Как проверить кнопку прокрутки в Cypress?

На чтение 3 мин Опубликовано 20.09.2024

Содержание

Вопрос или проблема
Ответ или решение
Пояснения:

Вопрос или проблема

У меня есть ряд элементов меню, которые прокручивают страницу к различным элементам на ней.

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

В первый раз все работает, однако затем я получаю ошибку:

TypeError: Время ожидания истекло после 4000 мс: Невозможно прочитать свойства неопределенного (чтение 'toLowerCase')

Это странно, потому что я не использую эту функцию в своем коде (я предполагаю, что она находится внутри самого Cypress).

Кто-нибудь знает правильный способ сделать это?

Мой HTML выглядит так:

<a class="subnav_item" href="#item-1">Элемент 1</a>
<a class="subnav_item" href="#item-2">Элемент 2</a>
<a class="subnav_item" href="#item-3">Элемент 3</a>

А мой тест Cypress выглядит так:

cy.get(".subnav_item").each(($submenuItem) => {
    let targetEl = cy.get($submenuItem).invoke('attr', 'href');
    cy.get($submenuItem).click();
    cy.wait(500);
    cy.get(targetEl).should('be.visible');
});

Ответ или решение

Для проверки корректности работы кнопки прокрутки в Cypress, важно правильно извлечь значение атрибута href и убедиться, что оно используется корректно. Ошибка, с которой вы столкнулись, возникает из-за несоответствия в том, как значения обрабатываются в самом Cypress. Давайте разберёмся, как это можно исправить.

Ваш текущий код:

cy.get(".subnav_item").each(($submenuItem) => {
    let targetEl = cy.get($submenuItem).invoke('attr', 'href');
    cy.get($submenuItem).click();
    cy.wait(500);
    cy.get(targetEl).should('be.visible');
});

Здесь есть две основные проблемы:

targetEl не будет содержать значение атрибута href, потому что cy.get($submenuItem).invoke('attr', 'href') возвращает Cypress.Chainable, а не строку. Для использования этого значения вам нужно обрабатывать его как Promise.
Не стоит использовать cy.wait(500), так как это может сделать тесты менее стабильно. Лучше использовать более целенаправленный подход, чтобы удостовериться, что элемент видим после клика.

Вот как можно улучшить ваш код:

cy.get(".subnav_item").each(($submenuItem) => {
    // Извлекаем атрибут href
    cy.wrap($submenuItem).invoke('attr', 'href').then((target) => {
        // Кликаем на элемент
        cy.wrap($submenuItem).click();

        // Получаем целевой элемент и проверяем его видимость
        cy.get(target).should('be.visible');
    });
});

Пояснения:

Использование cy.wrap($submenuItem) позволяет вам работать с элементом как с объектом Cypress, что упрощает дальнейшие операции.
invoke('attr', 'href') возвращает атрибут href, и, используя .then(), мы можем цепочкой передать это значение для дальнейшего использования.
Вместо использования cy.wait(500), мы просто проверяем, становится ли целевой элемент видимым после клика, что делает тесты более надежными, так как они не зависят от временной задержки.

Эти изменения помогут вам избежать ошибок и сделать ваш тест более эффективным. Удачи в автоматизации ваших тестов в Cypress!