Cypress 简明教程

Cypress - Locators

Cypress 只支持级联样式表 (CSS) 选择器来识别元素。但是，它还可以借助“Cypress-Xpath”插件来处理 xpath。

我们来考虑一个 html 代码片段并了解一些 css 表达式的规则。

css expression

Rules of CSS expression

级联样式表 (CSS) 表达式的规则如下 −

  1. 带属性 ID 和标签名的语法为标签名#id − 这里，CSS 表达式应为 - input#gsc-i-id1。

  2. 带属性类和标签名的语法为标签名.类 − 这里，CSS 表达式应为 - input.gsc-input。

  3. 带任何属性值和标签名的语法为标签名[属性='值' − 这里，CSS 表达式应为 - input[title='search']。

  4. 带父项到子项遍历的语法为父项子项 − 这里，CSS 表达式应为 - tr td。

Cypress 提供了打开选择器演练场功能，我们可以从该演练场自动定位和识别元素。此功能位于测试运行器窗口中，在下图中突出显示。

test runner toolbar

单击打开选择器演练场时，一个箭头会变得可见。单击它并将其移动到我们必须识别的元素。CSS 表达式会填充在箭头右侧可用的字段 cy.get 中。

同时，元素会突出显示，如下所示 −

tutorialspoint scenario1