Найти элемент по HTML в Cypress

Question

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

<div class="navigationIcon">
    <input>
    <div>
        <img class="navigationImage" src="[image/path]">
        <div class="navigationText">[navigation text]</div>
    </div>
</div>

На одной странице их несколько.Я хотел бы попытаться нацелиться на конкретный объект с помощью [текст навигации], но для них возможно иметь похожий текст.Мой основной пример - «Профили», второй - «Профили участников».Таким образом, выполнение cy.contains("Profiles") даст мне элемент «Профили членства» вместо «Профили».

Пожалуйста, имейте в виду, это используется в такой функции, как:

Cypress.Commands.add('goTo', (places) =>
{
    // Navigate to the places
});

Где «места» - это массив страниц для навигации.Итак, я не знаю точный текст, который я ищу в функции, чтобы сказать что-то вроде and !text === 'Membership Profiles'.

Кто-нибудь знает, как я могу получить элементы с помощью содержимого HTML?Это функция, которую я придумал:

Cypress.Commands.add('goTo', (places) =>
{
    for (let i = 0; i < places.length; i++)
    {
        let place = places[i];
        let navLinks = Cypress.$('.navigationIcon').toArray();
        navLinks.some((link) =>
        {
            if (link.innerHTML.includes(`>${place.name}</div>`))
            {
                cy.wrap(link).click();
                return true;
            }
        });
    }
});

, но она слишком быстро перемещается к следующему внешнему виду для итерации цикла, и второй раз через переменную navLinks извлекает те же элементы из предыдущей итерации.

Есть ли в Cypress что-то встроенное, чтобы я мог выполнять поиск по HTML?Я просматривал документацию, но ничего не могу найти.

Answer 1

Благодаря ответу Брендана я смог получить что-то работающее:

Cypress.Commands.add('navigateTo', (places) =>
{
    for (let i = 0; i < places.length; i++)
    {
        cy.goTo(places[i]);
    }
});

Cypress.Commands.add('goTo', (place) =>
{
    cy.log(`Navigating to ${place.name}`);

    cy.get('div.navigationIcon > div > div').then(($navLinks) =>
    {
        for (let i = 0; i < $navLinks.length; i++)
        {
            let $link = Cypress.$($navLinks[i]);
            if ($link.text().trim() === place.name)
            {
                // Click the link
                cy.wrap($link).click();
                break;
            }
        }

        // Ensure the url changed
        cy.url().should('include', place.uri);
    });
});

Примечание:

Я передаю массив в функцию navigateTo, например:

cy.navigateTo([
    { name: 'Setup', uri: '#Setup:'},
    { name: 'Profiles', uri: '#Profiles:'},
    { name: 'Addresses', uri: '#Addresses:'}
]);

Чтобы он перешел на страницу, а затем подтвердил перемещение по URL-адресу

Answer 2

Я придумал это, я не проверял его, но я верю, что он будет делать то, что вам нужно.

Cypress.Commands.add('goTo', place => {
  cy.get("div.navigationIcon > div > div").then($navs => {
    var $desiredNav = $navs.find($nav => {
      return $nav.text() == place;
    });

    cy.wrap($desiredNav).click();
});

Чтобы заставить его работать с вашим массивом мест, я бы сделал этоили цикл for может быть помещен в ваши тесты:

Cypress.Commands.add('goToPlaces', places => {
  for (let i = 0; i < places.length; i++)
  {
    cy.goTo(places[i]);
  }
});