一、本地创建一个html文件
（方便后面元素定位实践，如果只想了解元素定位内容，请直接翻到下面的第二部分内容）
pycharm里面创建一个html文件，粘贴以下内容保存，然后选择浏览器运行文件即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="main1" class="btn" data-cy=""submit>submit</button>
<button id="main2" class="btn" data-test=""submit>submit</button>
<button id="main3" class="btn" data-testid=""submit>submit</button>
<ul>
<li id="cy1">test1</li>
<li data-cy="cy2">test2</li>
<li data-test="cy3">test3</li>
<li data-testid="cy4">test4</li>
</ul>
</body>
</html>
浏览器运行后的结果如下图，F12打开元素定位工具。
从以上结构可以看出，ul是body的子，li是ul的子。
以下举例内容的元素均来源于文章开头写的html里面的元素，注意对比，可以自己举一反三练习写一个cypress的脚本，巩固cypress中元素定位命令的用法。
二、cypress元素定位基本方法
如果有朋友使用过selenium定位元素，应该清楚selenium提供了多种元素定位方法，每种元素定位都有其对应的指定命令。而cypress的元素定位基本可以直接使用get()命令进行元素的直接定位，曾经困难选择症不知道用selenium的哪种方法定位元素的同学，这个病有的治了！！撒花~~
1、get() 定位DOM元素
用法
cy.get(selector)
//以选择器定位，用于筛选匹配的DOM元素的选择器。
cy.get(alias)
//以别名定位，即属性定义的别名，连接.as()命令并引用@字符和别名的名称。
举例
1）cy.get(selector)
//找到id为main2的按钮并点击它，确定是id定位时请使用cy.get('#idname')的方式
cy.get('#main2').click()
//找到data-cy="cy2"的元素
cy.get('[data-cy="cy2"]')
//在ul找到第1个li并断言id=cy1
cy.get('ul li:first').should('have.id','cy1')
//查找包含btn的内容，并断言结果有3个
cy.get('.btn').should('have.length',3)
//在指定ul中查找data-test="cy3"的元素
cy.get('ul>[data-test="cy3"]')
脚本示例
运行结果
如果脚本运行时出现网址访问失败：访问地址404 not found、访问地址不被信任等提示，请参考下面博文内容进行解决。
《cypress运行问题–访问地址不被信任visit失败问题解决》
2）cy.get(alias)
以下是官方文档给出的别名的用法
//获取“todos”元素别名
cy.get('ul#todos').as('todos')
//...hack hack hack...
//later retrieve the todos
cy.get('@todos')
//获取“submitBTN”元素别名
beforeEach(() => {
cy.get('button[type=submit]').as('submitBtn')
})
it('disables on click', () => {
cy.get('@submitBtn').should('be.disabled')
})
//获取“用户”别名
beforeEach(() => {
cy.fixture('users.json').as('users')
})
it('disables on click', () => {
// access the array of users
cy.get('@users').then((users) => {
// get the first user
const user = users[0]
cy.get('header').contains(user.name)
})
})
我理解这个别名的用法大概就是
cy.get(‘元素’).as(‘别名’)
cy.get(’@别名’)
从以上定位举例可以看出，get命令可以筛选匹配当前页面的所有DOM的元素对象。
2、find() 获取特定选择器的子代DOM元素
即筛选已被匹配到的元素的的后代选择器。并将结果返回为jquery对象，注意不是元素对象。
用法
.find(selector)
举例
//找到ul下面的li内容，并断言一共有4个结果
cy.get('ul').find('li').should('have.length',4)
//如果直接用find找ul或者li就会报错，下面是错误示范，自己也可以试一下。
cy.find('li')
运行结果
上面运行结果里面报错的意思是说，.find()是找已匹配的元素的后代的命令，我们不能直接用cy.find()命令去定位元素，应该先用匹配父母的命令在前，然后再用匹配后代的元素跟在后面。就像cy.get(‘button’).click()命令一样。
3、contains() 获取包含指定文本的DOM元素
用法
常用的是前两种
.contains(content)
.contains(selector, content)
.contains(content, options)
.contains(selector, content, options)
举例
//找到包含submit的元素，contains('content')
cy.contains('submit').should('have.length',1)
//在id=main2元素中找到submit
cy.contains('#main2','submit')
//在ul的li内容中找到包含cy3的元素，contains('selector','content')
cy.contains('ul>li',"test3")
//contains命令只能查找包含的文本内容，如果你查找的对象是id或有特定属性的对象元素，查找就会报错。下面是错误示范。
cy.contains('main1')
运行结果
上面的报错是说明找不到包含“main1”的文本内容。我们再文章最前面写的html文件里，是有main1这个东西的，报错原因是在html文件里，main1是一个id属性的值，不是文本属性。如果你不知道什么是文本属性，可以简单理解为html运行后，在界面上显示出来的内容就是文本属性，比如submit和test*。
另外，运行脚本中第一句：
//找到包含submit的元素，contains('content')
cy.contains('submit').should('have.length',1)
找到包含submit文本内容的元素，且结果只有1个（html文件内容中一共有3个submit文本内容）。也就是说明contains()命令，只会匹配到第一个符合的元素并结束匹配。为了确认这个结论，我们可以打开执行界面右键–Inspect Element打开元素定位，然后鼠标点击执行快照里面的第一个contains命令，在下面元素定位控制器里就可以看到，它匹配找到了id=main1元素的submit文本内容，没有继续找后面的元素。
如果你想匹配指定元素后的文本内容，就需要用到contains(selector,content)的命令，也就是类似于举例中的第2和第3条举例。
三、总结
get()命令可以定位所有DOM元素，find()命令只能定位已匹配到的元素的后代，contains()命令只能定位包含指定文本内容的元素（一定是文本，不能是id等对象）。
如果以上内容对你有用，记得关注、点赞、收藏哦~~
下一篇计划编写定位iframe里面的元素的方法！
一起加油让时间过的更有意义！！
988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
