Cypress 简明教程

Cypress - Dropdown

select 命令用于处理静态下拉列表。在 html 代码中,下拉列表具有 select 标记,下拉列表元素通过 option 标记名表示。

The command select is used to work with static dropdown. In the html code, a dropdown has a select tag and the dropdown elements are represented by option tagname.

Dropdown Cypress Commands

与下拉列表相关的 Cypress 命令如下所示:

The dropdown related Cypress commands are as follows −

  1. The command used to choose the option Cypress is as follows −

cy.get('select').select('Cypress')
  1. The command that chooses options Tutorialspoint and JavaScript is as follows −

cy.get('select').select(['Tutorialspoint', 'JavaScript'])
  1. The command which can choose a value of a dropdown option along with options (to modify default characteristics) is as follows −

cy.get('select').select('option1', options )
  1. The command that chooses the multiple values with options is as follows −

cy.get('select').select(['option1', 'option2'], options)

Options for dropdown in Cypress

Cypress 中可用于下拉列表的选项如下所示:

The options which are available for the dropdown in Cypress are as follows −

  1. log – Default value – true− This is used to turn on/off the console log.

  2. timeout – Default value – defaultCommandTimeout(4000)− This is used to provide the maximum wait time for the selection prior to throwing an error.

  3. force – Default value – false− This is used to enforce an action.

断言可以应用于 Cypress 中的 select 命令。

Assertion can be applied to the select commands in Cypress.

让我们尝试从下拉列表中选择选项 India ,该选项在 html 代码中的值为 99。

Let us make an attempt to select the option India from the dropdown having value as 99 in the html code.

dropdown cypress commands

Implementation

在 Cypress 中选择选项印度的下拉命令实现如下所示:

The implementation of the dropdown commands to select the option India in Cypress is explained below −

// test suite
describe('Tutorialspoint', function () {
   // it function to identify test
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://register.rediff.com/register/register.php")
      //select option India with value then verify with assertion
      cy.get('select[id="country"]').select('99').should('have.value', '99')
   })
})

Execution Results

Execution Results

输出如下 −

The output is stated below −

dropdown commands

输出显示 Country 下拉列表选择选项 India(在 html 代码中,该选项的值标识为 99)。

The output shows that the Country dropdown selects the option India (in the html code, this option is identified with the value as 99).