Cypress - 定位器

Cypress 仅支持级联样式表 (CSS) 选择器来识别元素。但是，在“Cypress-Xpath”插件的帮助下，它也可以与 xpath 一起使用。

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

CSS表达规则

层叠样式表（CSS）的表达规则如下：

• 属性 id 和标记名的语法为 tagname#id - 此处，CSS 表达式应为 -input#gsc-i-id1。

• 属性类和标记名的语法是 tagname.class - 这里，CSS 表达式应该是 - input.gsc-input。

• 任何属性值和标记名的语法为 tagname[attribute='value' - 此处，CSS 表达式应为 - input[title='search']。

• 父子遍历的语法是父子 - 这里，css 表达式应该是 -tr td。

Cypress 提供了 Open Selector Playground 的功能，我们可以从中自动定位和识别元素。此功能位于测试运行器窗口内，如下图突出显示。

单击“打开选择器游乐场”后，会看到一个箭头。单击它并将其移动到我们必须识别的元素。css 表达式将填充到箭头右侧的 cy.get 字段中。

同时，该元素会突出显示，如下图所示 -