Cypress 简明教程

Cypress - Checkbox

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

The commands check and uncheck are used to work with checkbox. In the html code, a checkbox has an input tag and its type attribute has the value as checkbox.

Cypress Commands

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

The checkbox related Cypress commands is as follows −

  1. The command used to click all the checkboxes is as follows −

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

  1. The command used to click a checkbox with id check is as follows −

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

  1. The command used to click a checkbox with value Cypress is as follows −

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

  1. The command used to click the checkboxes with values - Java and Python is as follows −

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

  1. The command used to click the checkbox having value Java with options is as follows −

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

  1. The command used to click the checkboxes with values – Java and Python with options is as follows:

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

  1. The command used to click the checkbox having class check with an option is as follows −

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

  1. The command used to uncheck all the checkboxes is as follows −

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

  1. The command used to uncheck a checkbox with id check is as follows −

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

  1. The command used to uncheck the checkbox with value Cypress is as follows −

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

  1. The command used to uncheck the checkboxes with values - Java and Python is as follows −

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

  1. The command used to uncheck the checkbox having value Java with options is as follows −

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

  1. The command used to uncheck the checkboxes with values – Java and Python with options is as follows −

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

  1. The command used to uncheck the checkbox having class check with an option is as follows −

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

Options in Cypress

Cypress 中可用的选项如下：

The options which are available in Cypress are as follows −

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

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

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

  4. scrollBehaviour – Default value – scrollBehaviour(top) − This is for the position of viewport up to which element to be scrolled prior command execution.

  5. waitForAnimations – Default value – waitForAnimations(true) − This is used to wait for elements to complete animation prior running the commands.

  6. animationDistanceThreshold - Default value – animationDistanceThreshold (5) − This is for the pixel distance of an element that should be exceeded to qualify for animation.

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

Both check/uncheck commands require to be chained with commands that yield DOM elements and assertions can be applied to these commands.

Implementation of Cypress Commands

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

The implementation of the commands 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://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

Execution Results

输出如下：

The output is mentioned below −

implementation of cypress commands

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

The above results show the checkbox to the left of the Show password, first getting checked with the check command (verified with assertion-should).

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

Then, it is unchecked with the uncheck command (also verified with assertion-should).