Как выбрать n-й элемент внутри элемента select в кипарисе

У меня есть HTML:

<select name="subject" data-testid="contact-us-subject-field">
  <option value="What is this regarding?">What is this regarding?</option>
  <option value="Partnerships">Partnerships</option>
  <option value="Careers">Careers</option>
  <option value="Press">Press</option>
  <option value="Other">Other</option>
</select>

Выбор опции с известным значением, например "Карьера", так же просто:

cy.get('[data-testid="contact-us-subject-field"]').select('Careers');

Как выбрать n-й вариант в этом поле, независимо от его значения?

Ответ 1

Используя эквалайзер

cy.get('tbody>tr').eq(0)    // Yield first 'tr' in 'tbody'
cy.get('ul>li').eq(4)       // Yield fifth 'li' in 'ul'

Ответ 2

В конкретном контексте выбора n-го option это может быть уместно:

cy.get('select[name=subject] > option')
  .eq(3)
  .then(element => cy.get('select[name=subject]').select(element.val()))

Ответ 3

У меня была такая же проблема, и я решил ее создать пользовательскую команду кипариса. Не так красиво, как хотелось бы, но это сработало.

Cypress.Commands.add("selectNth", (select, pos) => {
  cy.get('${select} option +option')
    .eq(pos)
    .then( e => {
       cy.get(select)
         .select(e.val())
    })
})

затем я использовал в тесте как таковой

    cy.viewport(375, 667)
      .selectNth("customSelector", 3)

Параметр option +option был единственным способом, который я смог найти, чтобы получить полный список опций внутри select, и в настоящее время это бит кода, который я пытаюсь работать, несмотря на то, что он работает нормально.

Ответ 4

Основано на решении от Мигеля Руэды, но с использованием опции prevSubject:

Cypress.Commands.add(
  'selectNth',
  { prevSubject: 'element' },
  (subject, pos) => {
    cy.wrap(subject)
      .children('option')
      .eq(pos)
      .then(e => {
        cy.wrap(subject).select(e.val())
      })
  }
)

Использование:

cy.get('[name=assignedTo]').selectNth(2)

Объяснение:

Используя children('option') и .eq(pos) перемещайте .eq(pos) select к конкретному элементу.
Вызовите метод select со значением выбранного элемента.