Cypress 简明教程

Cypress - Dropdown

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

Dropdown Cypress Commands

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

  1. 用于选择 the option Cypress 的命令如下所示：

cy.get('select').select('Cypress')

  1. 用于选择选项 Tutorialspoint 和 JavaScript 的命令如下所示：

cy.get('select').select(['Tutorialspoint', 'JavaScript'])

  1. 可以选择下拉选项的值以及选项 (to modify default characteristics) 的命令如下所示：

cy.get('select').select('option1', options )

  1. 用于选择 the multiple values with options 的命令如下所示：

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

Options for dropdown in Cypress

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

  1. log – Default value – true − 用于打开/关闭控制台日志。

  2. timeout – Default value – defaultCommandTimeout(4000) − 用于在引发错误之前提供选择的最长等待时间。

  3. force – Default value – false − 用于执行操作。

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

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

dropdown cypress commands

Implementation

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

// 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

输出如下 −

dropdown commands

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