Иметь каждый () с оператором if не работает

Question

Задача

Я хочу, чтобы команды в логике if выполнялись только в том случае, если видна третья кнопка по умолчанию, но выдает ошибку, сообщающую, что у ее родителя есть класс видимости css: скрытый. Когда вам нужно удалить это состояние, становится видимой третья кнопка по умолчанию, поэтому я не уверен, почему она не проходит.

Желаемое поведение

Я хочу, чтобы каждое государство, которое подчеркнуто, нажимало на них, чтобы отменить их выбор. Тогда оператор if должен позаботиться о тех, кого нужно фактически удалить, потому что у них есть информация, заполненная для них, и поэтому, если видна третья кнопка по умолчанию, то есть кнопка remove , затем выполнить код внутри оператора if, который должен убедиться, что остальные кнопки по умолчанию скрыты, и нажать кнопку удалить .

код

it('deletes all selected states', () => {
  cy.get('span[class*="css-ddft8r-StateText"]').each($el => {
    cy.wrap($el)
      .filter(':has(span[class*="css-1qkbmzm-Underline css-1x6iasc4"])')
      .click({ multiple: true });
    if (cy.get('[data-cy=default-buttons]').eq(3).should('be.visible')) {
      cy.get('[data-cy=default-buttons]')
        .eq(0)
        .should('be.hidden');
      cy.get('[data-cy=default-buttons]')
        .eq(2)
        .should('be.visible');
      cy.get('[data-cy=default-buttons]')
        .eq(3)
        .click();
    }
  });
});

Answer 1

1. Команды Cypress возвращают объект Chainer - это внутренняя сущность Cypress, которую нельзя использовать с условными выражениями, поскольку объект всегда распознается как true в операторе if. Поэтому, пожалуйста, дайте шанс для jquery: if(Cypress.$('[data-cy=default-buttons]:contains("remove")').is(':visible')){ // do assertions cy.get('[data-cy=default-buttons]:contains("remove")').click({force: true}) // as parent is hidden, we can ommit click visibility check by passing force: true }
2. *= проверяет, что атрибут содержит часть переданной строки, поэтому ваш селектор может быть упрощен до: [class*="StateText"]
3. Весь тест выглядит слишком сложным и не работает должным образом с каждым циклом и условно внутри. Возможно, вам даже не нужно проверять кнопки для каждого элемента и выводить утверждения из цикла. Пример хранилища будет полезным.

Answer 2

Таким образом, решение, которое я выбрал, на самом деле заключалось в использовании .each() вместо оператора if внутри него.Мы выяснили, что можем использовать троичную часть внутри data-cy из-за нестабильности / ненадежности этих классов CSS, и это позаботилось о том, чтобы не писать оператор if.

Мы сделали примерно так:

cy.get('[data-cy=example_data_cy]').each($el => {
//click on the state if it was selected to unselect it