Выбор опций в select

Синтаксис:

cy.get('select#country').select('USA'); // по тексту
cy.get('select#country').select(['USA', 'Canada']); // несколько опций
cy.get('select#country').select('us'); // по значению атрибута value
cy.get('select#country').select(2); // по индексу (нумерация с 0)

Особенности:

• Метод поддерживает множественный выбор, если имеет атрибут multiple.
  select() автоматически проверяет, что выбранная опция действительно существует. Если нет — тест упадет.
  Можно комбинировать выбор по тексту и значению с использованием массива: ['Canada', 'us'].

  ---

  Проверка выбранного значения

  После выбора опции важно убедиться, что действие произошло корректно. Cypress предоставляет команду .should() для проверки состояния элемента.

  Примеры проверки:

  cy.get('select#country')
    .select('Canada')
    .should('have.value', 'ca'); // проверка по value
  
  cy.get('select#country')
    .select('Canada')
    .find(':selected')
    .should('have.text', 'Canada'); // проверка видимого текста

  Особенности:

  • .should('have.value', ...) проверяет значение атрибута value выбранной опции.
  • .find(':selected') позволяет получить текст выбранной опции.
  • Для множественного выбора проверка требует использования массива:

  cy.get('select#languages')
    .select(['JavaScript', 'Python'])
    .invoke('val')
    .should('deep.equal', ['js', 'py']);

  ---

  Работа с динамическими списками

  Некоторые

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

  Пример с ожиданием:

  cy.get('select#city', { timeout: 10000 }).should('be.visible');
  cy.get('select#city').select('Moscow');

  Советы:

  • Использовать { timeout: ... } для элементов, которые загружаются асинхронно.
  • Проверять наличие опций через .children('option'):

  cy.get('select#city').children('option').should('have.length.greaterThan', 0);

  ---

  Сложные случаи: кастомные селекты

  Многие современные UI-библиотеки (например, React Select, Ant Design) используют кастомные компоненты, которые выглядят как , но на самом деле являются набором

  или

  . Для таких элементов стандартный .select() не работает.

  Подход:

  1. Кликнуть по контейнеру селекта.
  2. Выбрать нужный элемент из раскрывающегося списка.
  3. Проверить, что значение отображается корректно.

  Пример для кастомного селекта:

  cy.get('.custom-select').click();
  cy.get('.custom-select .option').contains('Moscow').click();
  cy.get('.custom-select .selected-value').should('have.text', 'Moscow');

  ---

  Обработка ошибок при выборе

  Cypress автоматически бросает ошибку, если опция не найдена, но можно дополнительно контролировать поведение:

  cy.get('select#country').then($select => {
    const optionExists = $select.find('option[value="us"]').length > 0;
    if (optionExists) {
      cy.wrap($select).select('us');
    } else {
      cy.log('Опция отсутствует');
    }
  });

  Преимущества такого подхода:

  • Избегание падения теста при отсутствии опции.
  • Возможность логирования и ведения отчета о недоступных значениях.

  ---

  Практические рекомендации

  • Использовать явные селекторы (id, data-cy) для

  .

• Для множественного выбора всегда проверять массив выбранных значений.
• Для динамических или кастомных селектов использовать .click() и .contains().
• Всегда проверять, что выбранная опция действительно активна (:selected или текст в DOM).