Как правильно сформулировать оператор if в Cypress

Question

Я переформатирую это после запуска еще нескольких тестов и обнаружения большего количества слоев для этой проблемы

Текущая проблема

Итак, яобнаружил, что я могу добавить data-cy к подчеркиванию, чтобы указать, что состояние выбрано.Затем я добавил data-cy к названиям штатов.

Это так, чтобы я мог попытаться запустить тест следующим образом:

    it('Clicks to delete selected states', () => {
        if(cy.get('[data-cy=state_underline]').should('be.selected')){
            cy.get('[data-cy=state_name]')
            .click({ multiple: true })  
        }
    });

Ошибки

При запуске .should('be.selected') он выбирает первые несколько состояний, а затем выдает эту ошибку:

CypressError: Timed out retrying: coordsHistory must be at least 2 sets of coords

Когда я переключаю .should('be.selected') на .should('be.visible'), выдается эта ошибка:

This element '[ <span.css-184xmt0-Underline.css-jn1u554>, 58 more... ]' is not visible because it has an effective width and height of: '0 x 2' pixels.

---

ОригиналПроблема

Я пытаюсь написать тест, чтобы отменить выбор уже выбранных состояний.Единственное, что меняется, это <span class= для этого состояния.

* Кроме того, существует 50 состояний, и их может быть выбрано x количество одновременно.

Не выбранный диапазон:

class="css-mdt04d-StateText css-1x6iasc3"

Выбранный диапазон:

class="css-ddft8r-StateText css-1x6iasc3"

Исходное желаемое поведение

Я не совсем уверен, как произнести слово my if statement, чтобы проверить, изменился ли этот класс диапазона, а затем на cy.click) и затем найти кнопку удаления на этой странице (которая является частью кнопок по умолчаниютестовое задание).

Пример if statement

    it('Clicks to selected states', () => {
            if (cy.get('<span class="css-mdt04d-StateText css-1x6iasc3">') === '<span class="css-ddft8r-StateText css-1x6iasc3">'){
                cy.click()
                cy.get('[data-cy=default-buttons]')
                    .eq(3)
                    .click();
            }
    });

** ОБНОВЛЕНИЕ **

Итак, после еще нескольких копаний я обнаружил, что под линией подчеркивания есть промежуток с подчеркиванием.состояние, которое означает, что он выбран.Теперь мне интересно, могу ли я просто сказать что-то вроде .should('be.visible') тогда cy.click() это.

Код подчеркивания

<span class="css-1dsc69g-Underline css-1x6iasc4">

Answer 1

В случае, если вы хотите получить логические проверки состояния элемента, я бы предложил использовать jQuery, который был встроен в Cypress.Или может иметь атрибут, который позволяет получить текущее состояние элемента.Предположим, у вас есть промежутки, и если у него есть дочерний промежуток с подчеркиванием, мы можем предположить, что он выбран.Так что с jquery это будет что-то вроде: if (Cypress.$('span[class*="StateText"]').has('span[class*="Underline"]') { //your logic to handle selected element. }
ИЛИ
cy.get('span[class*="StateText"]').filter(':has(span[class*="Underline"])')...// now we have all selected spans
Гораздо проще использовать jquery, чем обрабатывать цепочку-кипарис внутри условных выражений, так как утверждения возвращают объект цепочки Cypress, но не булево.