Select 使用 Cypress 从下拉列表中过滤的选项

Question

我有一个下拉菜单，类似于查找，需要测试。我必须输入一个值，然后根据该值过滤选项。而且，我必须选择我想要的选项。

例如，根据提供的值过滤的一些选项将采用以下格式：

ENG 101 English-Read and Write
ENG 101 English-Speaking
ENG 101 English-Listening
MAT 201 Mathematics-Algebra
CSC 301 JAVA-Programming
CSC 301 CSharp-Programming

我只能在字段中输入第一列中的值 - 'ENG' 或 'MAT' 或 'CSC' 来过滤选项。

现在，如果我在字段中提供值 'MAT'，则只会过滤一个选项。 select 选项 'Mathematics-Algebra' 没问题。

如果我提供 'ENG' 的值进行过滤，则会过滤多个选项。现在，我必须 select 选项 'English-Listening'。这就是我遇到的问题。

cy.get('app-screen').find('#paper-description').type('ENG'); // this is for providing input 'ENG'
cy.get('.overlay-pane').find('mat-option span:nth-child(3)').should('have.text', 'English-Listening'); // this is for selecting the required filtered option.

执行上述语句时，出现以下断言错误。

Timed out retrying after 4000ms: expected '[ <span.col-3>, 2 more... ]' to have text English-Listening, but the text was English-Read and WriteEnglish-SpeakingEnglish-Listenting

html 结构将采用以下格式：

<div class='overlay-pane'>
    <mat-option>
        <span class='.col-1>ENG</span>
        <span class='.col-2>101</span>
        <span class='.col-3>English-Read and Write</span>
    </mat-option>
    <mat-option>
        <span class='.col-1>ENG</span>
        <span class='.col-2>101</span>
        <span class='.col-3>English-Speaking</span>
    </mat-option>
    <mat-option>
        <span class='.col-1>ENG</span>
        <span class='.col-2>101</span>
        <span class='.col-3>English-Listening</span>
    </mat-option>
</div>

这次select编辑的选项可能是'English-Listening'。下一次，它可能是 'English-Speaking' 或其他一些选项。如何 select 从查找的多个过滤项目中选择所需的选项？

Answer 1

您可以为此使用 within：

cy.get('app-screen').find('#paper-description').type('ENG')

cy.get('.overlay-pane')
  .find('mat-option')
  .eq(2)
  .within(() => {
    cy.get('.col-3').should('have.text', 'English-Listening').click()
  })

如果您不知道建议列表中文本的确切位置，您也可以使用 contains：

cy.get('app-screen').find('#paper-description').type('ENG')
cy.contains('span', 'English-Listening').should('be.visible').click()

Answer 2

你可以用 find 来做这个

cy.get('app-screen').find('#paper-description').type('ENG')

cy.get('.overlay-pane')
  .find('mat-option')
  .eq(2)
  .find('.col-3').should('have.text', 'English-Listening')
  .click()

Answer 3

对于 material 选项，您应该单击 mat-option

cy.get('app-screen').find('#paper-description').type('ENG')
cy.contains('mat-option', 'English-Listening').click()

Select 使用 Cypress 从下拉列表中过滤的选项

Select the filtered option from the dropdown using Cypress

cypress