Cypress 简明教程

Cypress - Checkbox

检查和取消检查命令用于处理复选框。在 html 代码中，复选框有一个 input 标签，其 type 属性的值为 checkbox。

Cypress Commands

与复选框相关的 Cypress 命令如下所示——

  1. 用于 click all the checkboxes 的命令如下所示——

cy.get('input[type="checkbox"]').check()

  1. 用来 click a checkbox with id check 的命令如下：

cy.get('#chk').check()

  1. 用来 click a checkbox with value Cypress 的命令如下：

cy.get('input[type="checkbox"]').check('Cypress')

  1. 用来 click the checkboxes with values - Java and Python 的命令如下：

cy.get('input[type="checkbox"]').check(['Java','Python'])

  1. 用来 click the checkbox having value Java with options 的命令如下：

cy.get('.chk').check('Java', options)

  1. 用来 click the checkboxes with values – Java and Python with options 的命令如下：

cy.get('input[type="checkbox"]').check(['Java','Python'], options)

  1. 用来 click the checkbox having class check with an option 的命令如下：

cy.get('.chk').check({force : true})

  1. 用来 uncheck all the checkboxes 的命令如下：

cy.get('input[type="checkbox"]').uncheck()

  1. 用来 uncheck a checkbox with id check 的命令如下：

cy.get('#chk').uncheck()

  1. 用来 uncheck the checkbox with value Cypress 的命令如下：

cy.get('input[type="checkbox"]').uncheck('Cypress')

  1. 用来 uncheck the checkboxes with values - Java and Python 的命令如下：

cy.get('input[type="checkbox"]').uncheck(['Java','Python'])

  1. 用来取消选择具有选项 Java 的复选框的命令如下：

cy.get('.chk').uncheck('Java', options)

  1. 用来 uncheck the checkboxes with values – Java and Python 和选项的命令如下：

cy.get('input[type="checkbox"]').uncheck(['Java','Python'], options)

  1. 用来 uncheck the checkbox having class check with an option 的命令如下：

cy.get('.chk').uncheck({force : true)

Options in Cypress

Cypress 中可用的选项如下：

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

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

  3. force – Default value – false − 用于强制执行一个动作。

  4. scrollBehaviour – Default value – scrollBehaviour(top) − 用于在执行命令之前将元素滚动到的视口的位置。

  5. waitForAnimations – Default value – waitForAnimations(true) − 用于在运行命令之前，等待元素完成动画。

  6. animationDistanceThreshold - Default value – animationDistanceThreshold (5) −这是元素的像素距离，应超过该距离才能达到动画要求。

勾选/取消勾选命令都要求与产生 DOM 元素的命令串联，而且可以将断言应用于这些命令。

Implementation of Cypress Commands

Cypress 中命令的实现如下所述−

// test suite
describe('Tutorialspoint', function () {
   // it function to identify test
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://accounts.google.com/signup")
      //checkbox with assertion
      cy.get('input[type="checkbox"]').check().should('be.checked')
      //identify checkbox with class with assertion
      cy.get('.VfPpkd-muHVFf-bMcfAe').uncheck().should('not.be.checked')
   })
})

Execution Results

输出如下：

implementation of cypress commands

上述结果显示“显示密码”左侧的复选框，首先使用 check 命令选中（使用断言应进行验证）。

然后，使用 uncheck 命令取消选中（也使用断言应进行验证）。