web-dev-qa-db-ja.com

サイプレスのselect要素内のn番目のアイテムを選択する方法

私は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>

「Careers」などの既知の値を持つオプションを選択するのは簡単です。

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

このフィールドでn番目のオプションを選択するにはどうすればよいですか？関係なくその値の？

cypress
20
JD.

eq を使用して

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

selecting the nth optionの特定のコンテキストでは、これが適切な場合があります。

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

Miguel Rueda からのソリューションに基づいていますが、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)を使用すると、selectの子を特定の要素にトラバースします。
  • 選択した要素の値でselectメソッドを呼び出します。
4
Tomáš Ehrlich

私は同じ問題を抱えており、カスタムサイプレスコマンドを作成して解決しました。私が望むほどきれいではありませんが、それは仕事をしました。

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内のオプションの完全なリストを取得する唯一の方法であり、現在はうまく機能していますが、現在回避しようとしているコードの一部です。

0
Miguel Rueda