你不知道的Cypress系列（14） -- 一文说透元素定位
你不知道的Cypress系列（14） -- 一文说透元素定位
元素定位可以说是UI自动化测试的基础，没有元素定位，UI自动化就无从谈起。一般来说，一个好的定位器应该有如下4个属性：
1. 准确性。Locator应该准确找到你需要的元素。
2. 唯一性。Locator不应该找到目标元素以外的任何内容。
3. 简单和清晰度。（最好）看到Locator就应该知道它定位的是哪个元素。
4. （一定程度的）兼容性。一旦你的页面元素发生变化，你的Locator多大程度上不用改动？CSS还是XPath？
无论你用哪个自动化测试工具，定位的方式无非就是CSS或者XPath。如果大家有过UI自动化测试的经历，特别是使用过Selenium/Webdriver, 这两种定位方式一定不陌生。
1. CSS 定位：
tagname[attribute=value]
2. Xpath定位：
//tagname[@attribute=’value‘]
其中：
tagname：是你要查找的HTML元素的类型（例如div，a，p)
attribute：是你的Locator执行搜索所需的HTML元素的属性（例如类， 字体颜色等）
value： 是你想要匹配的特定值
关于这两种定位方式，网上一度有很多讨论和对比，但其实没那么玄乎，其差别就以下两点：
1. CSS选择器仅支持正向遍历DOM，而XPath定位支持正向或者反向遍历DOM。
2. XPath引擎在每个浏览器中都不同，同样的Locator（可能导致）定位到不同的元素。
综合上来说，CSS选择器要更快，更宜读。而Xpath定位更加灵活（更适合没有id， class_name或者需要复杂定位的情况）。Cypress定位 VS Selenium定位
看过我Cypress书的同学都应该明白，Cypress里推荐的元素定位顺序如下：
1. data-cy
2. data-test
3. data-testid
4. id
5. class
6. tag
7. attributes
8. nth-child
前面3个是Cypress独有的定位方式，非常适合有更改项目代码权限的QA使用（如果你有项目代码的访问权限，很大可能你不需要后面几种定位方式，我们QA可以直接给元素加定位器）。
但遗憾的是，很多公司不给QA这个权限，那么我们可以退而求其次，看下后面几种定位方式（从第4种id定位开始）， 你可以看到后面几种定位， 跟Selenium里的定位没有什么不同，无非是以下8种。
1. find_element_by_id
2. find_element_by_name
3. find_element_by_xpath
// 关注iTesting，跟万人测试团一起成长
4. find_element_by_link_text
5. find_element_by_partial_link_text
6. find_element_by_tag_name
7. find_element_by_class_name
8. find_element_by_css_selector
看到这里你明白了不？这就是我说的定位可以无缝切换，你在Selenium里怎么定位，你就在Cypress里怎么定位。但是这8种定位方式的关键字你不能用了，你得用如下的定位：
#### Selenium/WebDriver定位
1. find_element_by_id
2. find_element_by_name
3. find_element_by_xpath
// 关注iTesting，跟万人测试团一起成长
4. find_element_by_link_text
5. find_element_by_partial_link_text
6. find_element_by_tag_name
7. find_element_by_class_name
8. find_element_by_css_selector
变
成
#### Cypress定位
1. cy.get('#main') // id
2. cy.get('.main') //class name
3. cy.xpath('//ul[@class="todo-list"]') //xPath
4-5. cy.contains('iTesting') //文本定位
6. cy.get('[class="todo-list]') // CSS定位
7. cy.get('tagname[attribute=value]') // 符合规则即可
所以这个时候你想想， 你在群里问的问题，xxx怎么定位啊？yyy怎么找不到啊？如果是定位相关，在确定无法使用 1. data-cy 2. data-test 3. data-testid 这3个定位方式的情况下，直接按照Selenium定位的方式就行了。
XPath和CSS定位的写法
还有同学说了，那XPath和CSS我也不熟啊。那我能说什么呢，直接上图吧。
一般通过这个图你就可以随心所欲地使用元素定位了。
最佳实践
说下最佳实践吧，如何定位更高效：
// 关注iTesting，跟万人测试团一起成长。
1. 定位时，首先采用不会更改的元素和属性（首选开发加了id的，次选CSS定位）
2. 避免使用文本，数字来定位（想想多语言和排序就知道为什么）
3. 尽量使用业务语义特征（举例来说，如果在淘宝上定位一个商品，商品的ID，名称、价格等是业务语义特征，而商品排在第几位，什么颜色展示等不是。）
4. 复杂元素定位先找锚点，锚点上还可以加Filter。（例如，如果你想找子元素，可以从父节点找起。如果一个filter不行，可以加别的filter， 例如a[href*=user_edit]:not([href$='user_id=1'])）
5. 实在不行就申请代码权限，给难定位的元素加1. data-cy 2. data-test 3. data-testid这3个属性。
6.权限也不给呢？只能烦死开发了。
最后的最后，大家可以看看jQuery和xPath的语法。这个对定位很有用，绝大多数情况下你说定位不到，其实是你语法学地不够好。
- - 时人莫小池中水, 浅处不妨有卧龙 - -
作者： Kevin Cai, 江湖人称蔡老师。 过期两性情感专家，非著名测试开发。 技术路线的坚定支持者，始终相信Nobody can be somebody。