私は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番目のオプションを選択するにはどうすればよいですか?関係なくその値の?
eq を使用して
cy.get('tbody>tr').eq(0) // Yield first 'tr' in 'tbody'
cy.get('ul>li').eq(4) // Yield fifth 'li' in 'ul'
selecting the nth option
の特定のコンテキストでは、これが適切な場合があります。
cy.get('select[name=subject] > option')
.eq(3)
.then(element => cy.get('select[name=subject]').select(element.val()))
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
メソッドを呼び出します。私は同じ問題を抱えており、カスタムサイプレスコマンドを作成して解決しました。私が望むほどきれいではありませんが、それは仕事をしました。
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内のオプションの完全なリストを取得する唯一の方法であり、現在はうまく機能していますが、現在回避しようとしているコードの一部です。