前言
· 健壮、可靠的元素定位策略可以保障测试成功率的提高。
· 相对于其他测试框架来说，Cypress 提供了特别的定位策略，让你无须过多担心因定位失败而导致的测试失败。
做元素定位时，你是否曾遇到过以下难题
· 元素 ID 或 class 是动态生成的。
· 你使用了 CSS选择器去定位，但开发把元素CSS样式改掉了。
这种情况下通常会测试失败。
Cypress 如何解决上述难题
提供了 data-* 属性，包含了下面三个定位器：
data-cy data-test data-testid |
重点
· 它们都是 Cypress 专有的定位器，仅用来测试。
· data-* 属性和元素的行为或样式无关，意味着即使 CSS 样式或 JS 行为改变，也不会导致测试失败。
· 注意：在实际项目中，需要自己将 data-* 属性加到元素中，意味着你得有权限修改代码。
html 前端代码
测试文件代码
常规选择器
会点前端的童鞋应该都知道，在 css 里面怎么写， 这里就怎么写，敲简单的啦！
#id 选择器
通过元素的 id 属性来定位：
| cy.get("#main1").click() |
.class 选择器
通过元素的 class 属性来定位：
| cy.get(".btn").click() |
属性选择器
通过元素的各种属性来定位：
| cy.get("button[id='main2']").click() |
:nth-child(n) 选择器
html 代码栗子
测试代码
| cy.get("ul>li:nth-child(2)").click() |
Cypress.$定位器
针对难以用普通方式定位的元素，Cypress 还提供了 JQuery 选择器（对我来说简直是福音）。
格式： Cypress.$(selector)
Cypress.$('#main2') // 等价于 cy.get('#main2') |
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
