Ошибка Cypress: cy.click() можно вызвать только для одного элемента для одного элемента
Я использую Cypress для проверки функции выхода из моего пользовательского интерфейса. Однако я столкнулся с ошибкой, которая мне кажется неточной, поскольку у меня есть только один элемент с указанным атрибутом. Вот код, который я использую:
Cypress.Commands.add('logOut', () => {
cy.get('button[data-cy = "account-menu-button"]').click();
cy.get('button[data-cy = "account-menu-logout-button"]').click();
});
Когда я запускаю тесты, я получаю следующую ошибку:
cy.click() можно вызвать только для одного элемента. Ваша тема содержала 2 элемента. Передайте { Multiple: true }, если вы хотите последовательно щелкать каждый элемент.
Я попытался изменить код, чтобы гарантировать выбор только одного элемента:
Cypress.Commands.add('logOut', () => {
cy.get('button[data-cy = "account-menu-button"]').eq(0).click();
cy.get('button[data-cy = "account-menu-logout-button"]').click();
});
Время ожидания повторной попытки истекло через 4050 мс: cy.click() не удалось, поскольку этот элемент не виден:
<button class = "flex h-7 w-7 items-center justify-center rounded-full bg-flow-turquoise text-sm font-medium text-flow-purple md:bg-flow-purple md:bg-opacity-20" data-cy = "account-menu-button" type = "button">AU</button>Этот элемент button.flex.h-7.w-7.items-center.justify-center.rounded-full.bg-flow-turquoise.text-sm.font-medium.text-flow-purple.md:bg- flow-purple.md:bg-opacity-20 не отображается, поскольку его родительский элемент div.flex.items-center.gap-x-4.md:hidden имеет свойство CSS: display: none Исправьте эту проблему или используйте {force: true}, чтобы отключить проверку ошибок.
Кажется, что элемент не виден, потому что у его родителя есть display: none. Вот соответствующие части моего HTML:
<div class = "flex items-center gap-x-4 md:hidden">
<button class = "flex h-7 w-7 items-center justify-center rounded-full bg-flow-turquoise text-sm font-medium text-flow-purple md:bg-flow-purple md:bg-opacity-20" data-cy = "account-menu-button" type = "button">AU</button>
</div>
Ответы 2
Сначала я бы проверил, что первый возвращенный элемент действительно является тем элементом, который вам нужен. Чтобы проверить элементы, которые возвращает Cypress, в консоли браузера попробуйте запустить document.querySelectorAll('[data-cy = "account-menu-button"]') и нажать на результаты. Возможно, первый элемент скрыт, а второй — это тот элемент, с которым вы действительно хотите взаимодействовать. В этом случае обновите запрос, чтобы использовать .eq(1) вместо .eq(0).
Однако, если после проверки того, что ваш .eq(0) захватывает правильный элемент, я бы следовал инструкциям в сообщении об ошибке — добавлял { force: true } к функции .click().
Cypress.Commands.add('logOut', () => {
cy.get('button[data-cy = "account-menu-button"]').eq(0).click({ force: true });
cy.get('button[data-cy = "account-menu-logout-button"]').click({ force: true });
});
В этом случае требуется { force: true }, поскольку cy.click() соответствует правилам Actionability, а родительский элемент для выбранного вами элемента имеет display: none, но { force: true } переопределяет эту проверку.
Если у вас есть два элемента с одинаковым button[data-cy = "account-menu-button"], возможно, на странице есть две версии для двух разных макетов страницы, но в любой момент времени видна только одна.
Это подтверждается сообщением
не удалось, поскольку этот элемент не виден
так что просто выбрать первый вариант — не лучший вариант.
Вместо этого используйте :visible в селекторе.
cy.get('button[data-cy = "account-menu-button"]:visible')
.click();
Не используйте {force:true}, как предложено, проверка видимости — лучший способ.
Как правило, принудительное нажатие дает вам плохой тест, который может пройти, хотя должен быть неудачным.
Например, если CSS изменен и возникла ошибка, из-за которой какая-либо кнопка становится не видимой, ваш тест ее не обнаружит. Тест все равно пройдет успешно, даже если реальный пользователь не видит ни одной кнопки.