Cypress - 定位器

Cypress 只支持使用层叠样式表 (CSS) 选择器来识别元素。但是，借助“Cypress-Xpath”插件，它也可以使用 xpath。

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

CSS 表达式规则

层叠样式表 (CSS) 表达式的规则如下：

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

• 使用属性 class 和标签名的语法为 tagname.class - 此处，css 表达式应为 - input.gsc-input。

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

• 使用父到子遍历的语法为 parent child - 此处，css 表达式应为 -tr td。

Cypress 提供了“打开选择器游乐场”的功能，我们可以从中自动定位和识别元素。此功能位于测试运行器窗口内，如下面的图像中突出显示。

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

同时，元素将被突出显示，如下面的图像所示：