Как найти элемент, изменить его состояние, дождаться ответа сети и проверить, изменился ли класс

Question

У меня есть список элементов на странице. По умолчанию некоторые из них отключены, а некоторые включены. Каждый элемент имеет переключатель для его включения. Когда пользователь переключает элемент в положение ON, приложение отправляет запрос AJAX, и, если ответ в порядке, элемент изменяет атрибут data-cy-status с off на on.

Я хочу проверить это в тесте Cypress .

cy.server();
cy.route('POST', '**/shop/method_payment/').as('methodAdd');

cy.get('[data-cy="payment-method"][data-cy-status="off"]').first().as('methodEl');
cy.get('@methodEl').find('[data-cy="pm-switch"]').click();
cy.wait('@methodAdd');
cy.get('@methodEl').should('have.attr', 'data-cy-status', 'on');

Но

cy.get('[data-cy="payment-method"][data-cy-status="off"]').first().as('methodEl');

сохранить селектор в псевдониме, а не элемент DOM. И когда я проверяю его после AJAX ответа с

cy.get('@methodEl').should('have.attr', 'data-cy-status', 'on');

, кипарис выбирает следующий отключенный элемент, а не включенный. Как правильно это сделать?

Answer 1

Найденное решение. Добавлен дополнительный неизменяемый селектор data-cy-status-on-init.

cy.server();
cy.route('POST', '**/shop/method_payment/').as('methodAdd');

cy.get('[data-cy="payment-method"][data-cy-status-on-init="off"]').first().as('methodEl');
cy.get('@methodEl').find('[data-cy="pm-switch"]').click();
cy.wait('@methodAdd');
cy.get('@methodEl').should('have.attr', 'data-cy-status', 'on');