Skip to main content
Cypress应用

click

点击一个 DOM 元素。

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

语法​

.click()
.click(options)
.click(position)
.click(position, options)
.click(x, y)
.click(x, y, options)

用法​

正确用法

cy.get('.btn').click() // 点击按钮
cy.focused().click() // 点击获得焦点的元素
cy.contains('Welcome').click() // 点击第一个包含 'Welcome' 的元素

错误用法

cy.click('.btn') // 错误，不能从 'cy' 链式调用
cy.window().click() // 错误，'window' 不返回 DOM 元素

参数​

position (String)

点击的位置。默认位置是 center。有效位置包括 topLeft、top、topRight、left、center、right、bottomLeft、bottom 和 bottomRight。

cypress-command-positions-diagram

x (Number)

距离元素左侧的像素距离。

y (Number)

距离元素顶部的像素距离。

options (Object)

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

选项默认值描述
altKeyfalse激活 alt 键（Mac 上是 option 键）。别名：optionKey。
animationDistanceThresholdanimationDistanceThreshold元素随时间移动超过的像素距离，以被视为动画。
ctrlKeyfalse激活 control 键。别名：controlKey。
logtrue在命令日志中显示命令
forcefalse强制执行操作，禁用等待可操作性
metaKeyfalse激活 meta 键（Windows 键或 Mac 上的 command 键）。别名：commandKey、cmdKey。
multiplefalse依次点击多个元素
scrollBehaviorscrollBehavior执行命令前元素应滚动到的视口位置
shiftKeyfalse激活 shift 键。
timeoutdefaultCommandTimeout等待 .click() 解析的超时时间超时
waitForAnimationswaitForAnimations是否等待元素完成动画后再执行命令。

生成结果 了解主题管理​

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

示例​

无参数​

点击导航中的链接​

cy.get('.nav > a').click()

位置​

指定元素的角落进行点击​

点击按钮的右上角。

cy.get('img').click('topRight')

坐标​

指定相对于左上角的明确坐标​

以下点击将在元素内部执行（距离左侧 15px，距离顶部 40px）。

cy.get('#top-banner').click(15, 40)

选项​

强制点击，无论其可操作状态如何​

强制点击会覆盖 Cypress 应用的可操作性检查，并自动触发事件。

cy.get('.close').as('closeBtn')
cy.get('@closeBtn').click({ force: true })

带位置参数的强制点击​

cy.get('#collapse-sidebar').click('bottomLeft', { force: true })

带相对坐标的强制点击​

cy.get('#footer .next').click(5, 60, { force: true })

点击所有 id 以 'btn' 开头的元素​

默认情况下，Cypress 会在尝试点击多个元素时报错。通过传递 { multiple: true }，Cypress 会依次对每个元素执行点击，并会在命令日志中多次记录。

cy.get('[id^=btn]').click({ multiple: true })

带组合键的点击​

.click() 命令也可以与按键修饰符一起使用，以模拟在点击时按住组合键，例如 ALT + 点击。

info

你也可以在 .type() 中使用组合键。这提供了跨多个命令按住按键的选项。更多信息请参见组合键。

以下按键可以通过 options 与 .click() 组合使用。

选项说明
altKey激活 alt 键（Mac 上是 option 键）。别名：optionKey。
ctrlKey激活 control 键。别名：controlKey。
metaKey激活 meta 键（Windows 键或 Mac 上的 command 键）。别名：commandKey、cmdKey。
shiftKey激活 shift 键。

Shift 点击​

// 在第一个 <li> 上执行 SHIFT + 点击
cy.get('li:first').click({
  shiftKey: true,
})

说明​

可操作性​

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

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

焦点​

焦点会给予第一个可聚焦元素​

例如，点击 <button> 内的 <span> 会将焦点给予按钮，因为这符合真实用户场景。

然而，Cypress 还处理了子元素在视觉上不在可聚焦父元素内（根据 CSS 对象模型）的情况。在这些情况下，如果找不到可聚焦的父元素，焦点会给予窗口（这与真实浏览器行为一致）。

取消​

阻止 mousedown 事件不会导致焦点​

如果阻止了 mousedown 事件的默认行为（e.preventDefault()），根据规范，元素将不会获得焦点。

规则​

要求 了解命令链​

  • .click() 需要链式调用返回 DOM 元素的命令。

断言 了解断言​

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

超时设置 了解超时机制​

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

命令日志​

点击按钮

cy.get('.action-btn').click()

以上命令会在命令日志中显示为：

Command log for click

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

console.log for click

历史​

版本变更
6.1.0添加了 scrollBehavior 选项
3.5.0在 .click() 期间添加了发送 mouseover、mousemove、mouseout、pointerdown、pointerup 和 pointermove 事件

另请参阅​

目录