如果想從頭學起Cypress，可以看下面的系列文章哦
https://www.cnblogs.com/poloyy/category/1768839.html
前言
- 做 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')
拓展
對於更多的 css 選擇器寫法，可以看看這篇文章：https://www.cnblogs.com/poloyy/p/12629662.html
只需要關注選擇器那一列就好啦
結尾
本文是博主基於對蔡超老師的《Cypress 從入門到精通》閱讀理解完后輸出的博文，並附上了自己的理解
對書籍感興趣的，大家可以參考本篇博客：https://www.cnblogs.com/poloyy/p/13052972.html，考慮自身需求進行購買
我的博客即將同步至騰訊雲+社區，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1