Вы веб-разработчик или тестировщик и хотите улучшить свои навыки работы с Cypress? Что ж, вы попали по адресу! В этой статье блога мы собираемся изучить различные способы нажатия на N-й элемент с помощью Cypress, популярной среды сквозного тестирования JavaScript. Итак, возьмите свой любимый напиток, расслабьтесь и начнем!

Метод 1: использование команды.eq()

Один из самых простых способов щелкнуть N-й элемент — использовать команду .eq()в Cypress. Эта команда позволяет выбирать элементы в коллекции по их индексу. Вот пример:

cy.get('button').eq(2).click();

В этом примере мы выбираем третий элемент кнопки на странице (поскольку индекс начинается с 0), а затем запускаем по нему событие щелчка. Вы можете заменить buttonлюбым допустимым селектором CSS для элементов, на которые вы хотите ориентироваться.

Метод 2: использование селектора :nth-child()

Другой подход — использовать селектор :nth-child()в Cypress. Этот селектор позволяет выбирать элементы в зависимости от их положения относительно родительского элемента. Вот пример:

cy.get('ul li:nth-child(3)').click();

В данном случае мы выбираем третий элемент liвнутри элемента ulи нажимаем на него. Опять же, вы можете изменить селектор в соответствии со своими потребностями.

Метод 3. Перебор элементов

Если вам нужно нажать на несколько элементов с определенным шаблоном или условием, вы можете использовать цикл в Cypress. Вот пример:

cy.get('a').each(($el, index) => {
  if (index === 2) {
    cy.wrap($el).click();
  }
});

В этом примере мы перебираем все элементы привязки (a) на странице, и когда мы достигаем третьего элемента (индекс 2), мы нажимаем на него, используя cy.wrap()команда.

Метод 4: использование.filter() и.click()

Если у вас есть коллекция элементов и вы хотите отфильтровать их по определенным критериям, вы можете использовать команду .filter()в сочетании с .click(). Вот пример:

cy.get('input[type="checkbox"]').filter(':checked').eq(1).click();

В этом примере мы выбираем все отмеченные флажки на странице, а затем нажимаем второй (индекс 1) из отфильтрованной коллекции.

Метод 5: пользовательские команды Cypress

Если вам часто приходится нажимать на N-й элемент в ваших тестах, вы можете создать собственную команду Cypress для повторного использования. Вот пример:

Cypress.Commands.add('clickNthElement', (selector, index) => {
  cy.get(selector).eq(index).click();
});
// Usage
cy.clickNthElement('div', 4);

Определив специальную команду, например clickNthElement, вы можете легко щелкнуть N-й элемент, предоставив селектор и индекс в качестве аргументов.

Заключение

В этой статье мы рассмотрели несколько способов щелчка по N-му элементу с помощью Cypress. Независимо от того, предпочитаете ли вы использовать команду .eq(), селектор :nth-child(), циклы или пользовательские команды, теперь у вас есть набор инструментов, полный методов для решения любого сценария в ваших тестах Cypress. Так что вперед, экспериментируйте и выведите автоматическое тестирование на новый уровень!