持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情
前言
- 做 UI 自动化测试，每个测试用例都会包含对元素的操作
- 健壮、可靠的元素定位策略可以保障测试成功率的提高
- 相对于其他测试框架来说，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')
前端页面代码
后面写的 Cypress 代码，都会基于这个 html 页面来定位元素哦，文件位置随意放，代码需要手动自己敲一遍
.get(selector)
该用法用来在 DOM 树中查找 selector 对应的 DOM 元素
两种语法格式
**
// 以选择器定位
cy.get(selector)
// 以别名定位，后续会讲到
cy.get(alias)
简单的栗子
测试结果
如果可以匹配多个元素，则返回多个元素
.find(selector)
该定位方法用来在 DOM 树中搜索已被定位到的元素的后代，并将匹配到的元素返回为一个新的 jQuery 对象【注意，不是返回元素对象】
实际栗子-测试文件代码
测试结果
解析错误信息（重点，懂了这个就不会再犯同样的错误了）
- 英文： A child command must be chained after a parent because it operates on a previous subject
- 中文： 子命令需要链接到父命令之后，因为他需要作用于上一个对象
- 通俗理解： 需要找到元素才能对元素执行某些命令 【针对元素的操作】
- 重点： 很多命令都需要通过元素去调用的，所以需要先定位到元素，才能调用那些命令，否则元素都没有，怎么操作元素呢
.contains()
该方法可用来获取包含指定文本的 DOM 元素
两种语法格式
.contains(content)
.contains(selector, content)
实际栗子-测试文件代码
测试代码
重点： 只会返回第一个匹配到的元素
