Cypress应用

check

勾选复选框(checkbox)或单选按钮(radio)。

在 .check() 之后继续链式调用依赖于该元素的命令是不安全的。

caution

该元素必须是类型为 checkbox 或 radio 的 <input> 元素。

语法

.check()
.check(value)
.check(values)
.check(options)
.check(value, options)
.check(values, options)

用法

正确用法

cy.get('[type="checkbox"]').check() // 勾选复选框元素
cy.get('[type="radio"]').first().check() // 勾选第一个单选按钮元素

错误用法

cy.check('[type="checkbox"]') // 错误，不能直接从 'cy' 链式调用
cy.get('p:first').check() // 错误，'.get()' 返回的不是复选框或单选按钮

参数

value (String)

需要勾选的复选框或单选按钮的值。

values (Array)

需要勾选的多个复选框或单选按钮的值。

options (Object)

传入一个选项对象以改变 .check() 的默认行为。

选项	默认值	描述
animationDistanceThreshold	animationDistanceThreshold	元素随时间移动超过的像素距离，才会被视为动画。
log	true	在命令日志中显示该命令
force	false	强制执行操作，禁用等待可操作性
scrollBehavior	scrollBehavior	执行命令前将元素滚动到的视口位置
timeout	defaultCommandTimeout	等待 .check() 解析的超时时间
waitForAnimations	waitForAnimations	是否等待元素完成动画后再执行命令。

生成结果

• .check() 返回与传入时相同的元素。
• 在 .check() 之后继续链式调用依赖于该元素的命令是不安全的。

示例

无参数

勾选所有复选框

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

选择所有单选按钮

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

勾选 id 为 'saveUserName' 的元素

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

值

选择值为 'US' 的单选按钮

<form>
  <input type="radio" id="ca-country" value="CA" />
  <label for="ca-country">加拿大</label>
  <input type="radio" id="us-country" value="US" />
  <label for="us-country">美国</label>
</form>

cy.get('[type="radio"]').check('US')

多个值

勾选值为 'subscribe' 和 'accept' 的复选框

<form>
  <input type="checkbox" id="subscribe" value="subscribe" />
  <label for="subscribe">订阅新闻通讯？</label>
  <input type="checkbox" id="acceptTerms" value="accept" />
  <label for="acceptTerms">接受条款和条件。</label>
</form>

cy.get('form input').check(['subscribe', 'accept'])

选项

勾选不可见的复选框

通过将选项中的 force 设置为 true，可以忽略 Cypress 默认检查元素是否可见、可点击且未禁用的行为。

cy.get('.action-checkboxes')
  .should('not.be.visible') // 通过
  .check({ force: true })
  .should('be.checked') // 通过

查找已选中的选项

可以使用 jQuery 的 :checked 选择器获取当前选中的选项。

<form id="pick-fruit">
  <input type="radio" name="fruit" value="orange" id="orange" />
  <input type="radio" name="fruit" value="apple" id="apple" checked="checked" />
  <input type="radio" name="fruit" value="banana" id="banana" />
</form>

cy.get('#pick-fruit :checked').should('be.checked').and('have.value', 'apple')

注意事项

可操作性

元素必须首先达到可操作状态

.check() 是一个“操作命令”，遵循可操作性的所有规则。

规则

要求

• .check() 需要链式调用返回 DOM 元素的命令。
• .check() 要求元素类型为 checkbox 或 radio。

断言

• .check() 会自动等待元素达到可操作状态。
• .check() 会自动重试直到所有链式断言通过。

超时设置

• .check() 可能会因等待元素达到可操作状态而超时。
• .check() 可能会因等待添加的断言通过而超时。

命令日志

勾选 name 为 'emailUser' 的元素

cy.get('form').find('[name="emailUser"]').check()

上述命令将在命令日志中显示为：

当点击命令日志中的 check 时，控制台会输出以下内容：

另请参阅

• .click()
• .uncheck()