百木园一、写在前面
又有很久没更文了，真的是被催婚搞的整个人情绪特别不好，如果硬要形容的话，那就是没法跟人正常沟通，一点就着，做什么都没耐心，看什么都烦，简直没救了...
也是偶然发现的，自己居然没写关于Playwright的元素定位，这不是自动化测试的重中之重，怎么可以忘，马上安排！
二、元素定位
主要支持定位方式有：css、xpath、text。
示例代码如下：
//选择单个元素
page.querySelector(\"selector\");
//选择多个元素
page.querySelectorAll(\"selector\");
//选择单个元素，并且自动等待到元素可见、可操作
page.waitForSelector(\"selector\");
三、CSS定位
1、css+定位值
可以理解为指定为：css方式定位+使用的定位方式（css选择器语法）。
示例代码如下：
page.locator(\"css=[type=\'text\']\")
2、通过其文本内容匹配元素
元素标签+:has-text()
:has-text()匹配任何包含指定文本的元素，在内部的某个地方，可能在子元素或后代元素中。匹配不区分大小写，理解为模糊匹配,应注意与其他CSS说明符一起使用，否则将匹配所有包含指定文本的元素，包括<body>。
示例代码如下：
List<ElementHandle> elements = page.querySelectorAll(\"button:has-text(\"Button\")\");
System.out.println(elements.size());// 5
```html
#### 3、在指定元素中查找匹配文本的元素
`:text()`匹配包含指定文本的最小元素。匹配不区分大小写，还是模糊匹配，就是指定范围了。
**示例代码如下：**
```java
page.querySelector(\"article .ant-row :text(\"Open Modal\")\").click();
4、文本通过正则表达式匹配
匹配文本内容与类似JavaScript的正则表达式匹配的最小元素。
示例代码如下：
page.querySelector(\"article .ant-row :text-matches(\"Open M\\o*dal\", \"i\")\")
5、仅匹配可见元素
示例dom:
<button style=\'display: none\'>Invisible</button>
<button>Visible</button>
示例代码如下：
page.locator(\"button:visible\").click();
注意：
文本匹配会规范化空格。例如，它将多个空格变成一个，将换行符变成空格，并忽略前后空格。
6、在给定范围内元素，匹配元素
给定元素的范围的参数传递的任何选择器至少匹配一个元素，它将返回一个元素,也是模糊匹配！
示例代码如下：
page.navigate(\"http://localhost:8080/wait.html\");
page.querySelector(\"#wait\").click();
String content = page.waitForSelector(\"div:has(p)\").textContent();
System.out.println(content);
7、匹配条件之一的元素
以逗号分隔，从CSS选择器列表将匹配该列表中的选择器之一可以选择的所有元素，简单说就是从这么多列表中找到一个匹配的选择器去选择元素。
示例代码如下：
page.navigate(\"https://antdv.com/components/modal-cn\");
page.waitForSelector(\"#components-modal-demo-basic .code-box-demo span\").click();
page.locator(\"button:has-text(\"取 消\"), button:has-text(\"确定\")\").click();
8、基于布局匹配定位元素
基于页面布局定位，上下左右之类的，会有当页面布局改变时，会出现找不到元素或者匹配其他元素的情况。
示例代码如下：
//在promo-card附近的元素
page.locator(\"button:near(.promo-card)\").click();
//获取(promo-card2)元素右侧元素文本
String textContent3 = page.waitForSelector(\"button:right-of(#card2)\").textContent();
System.out.println(\"textContent3: \"+textContent3);
//获取(promo-card2)元素左侧元素文本
String textContent1 = page.waitForSelector(\"button:left-of(#card2)\").textContent();
System.out.println(\"textContent1: \"+textContent1);
//获取(promo-card2)元素上面元素属性
String above = page.waitForSelector(\"button:above(#card2)\").getAttribute(\"id\");
System.out.println(\"above: \"+above);
//获取(promo-card2)元素下面元素属性
String below = page.waitForSelector(\"button:below(#card2)\").getAttribute(\"id\");
System.out.println(\"below: \"+below);
9、从查询结果中选择第n个元素匹配
与： nth-child（）不同，元素不必是兄弟姐妹，它们可以在页面上的任何位置元素。
示例代码如下：
page.waitForSelector(\":nth-match(:text(\'promo-card\'), 2)\").click();
10、第N个元素定位器
选择索引的的方式定位。
示例代码如下：
//获取第一个元素的文本
String first = page.locator(\"button\").locator(\"nth=0\").textContent();
//获取最后一个元素的文本
String last = page.locator(\"button\").locator(\"nth=-1\").textContent();
System.out.println(first+\"\\n\"+last);
11、仅定位可见元素
一个页面有两个按钮，第一个不可见，第二个可见，示例：
<button style=\'display: none\'>Invisible</button>
<button>Visible</button>
示例代码如下：
page.locator(\"button\").locator(\"visible=true\").click();
三、XPath定位
任何以//或…开头的选择器被假定为xpath选择器。例如，Playwright将\'//html/body\'转换为\'xpath=//html/body\'。
1、XPath混合使用
特性就是管道符|的使用，在XPath中可指定多个选择器。它将匹配该列表中的选择器之一可以选择的所有元素。
示例代码如下：
page.navigate(\"https://antdv.com/components/modal-cn\");
page.querySelector(\"#components-modal-demo-basic .code-box-demo span\").click();
page.locator(\"//div[@id=\'vcDialogTitle0\']|//div[@role=\'documentcontent\']\").waitFor();
System.out.println();
2、常见XPath定位使用
完全支持XPath定位和CSS语法，这里没法可说的，个人感觉是完美兼容Selenium的CSS 、XPath定位定位方式的，参考学习CSS定位入门、XPATH定位入门这两篇。
四、使用文本定位
使用文本定位:以引号 \"\" 或者 \' 开头的，可以判定为文本定为文本定位。
1、包含
示例代码如下：
//包含
String content = page.textContent(\"button:text(\'card0\')\");
2、严格匹配
示例代码如下：
//严格匹配
String content1 = page.textContent(\"button:text-is(\'card0\')\");
3、正则表达式匹配
示例代码如下：
//正则
String content2 = page.textContent(\"button:text-matches(\"ca\\r*d0\")\");
五、使用属性选择器定位
不是CSS选择器，因此不支持任何特定于CSS的选项。
示例代码如下：
page.fill(\"id=user\",\"username1\");
page.type(\"data-testid=testid\",\"username2\");
六、使用链式选择器定位
选择器被链接时，下一个选择器相对于前一个选择器的结果被查询,个人感觉就是按照层级去定位元素。
示例代码如下：
page.navigate(\"https://2x.antdv.com/components/modal-cn\");
page.click(\"#components-modal-demo-basic .code-box-demo span\");
page.click(\"div[role=\"dialog\"] >> div[role=\"document\"] >> text=\"取 消\"\");
System.out.println();
七、写在最后
在Playwright系列的第九篇文中说，一个不留神就更新API了，请大家原谅我哈！
不但英文不好，而且眼神也不好，尴尬，这是第一次，也是最后一次！
我会在后面的文章中陆续把落下的补上，随着这几天的熟悉使用，有时帮我觉得它比selenium更出色，不知道是不是我的幻觉？
优秀不够，你是否无可替代
软件测试交流QQ群：721256703，期待你的加入！！
欢迎关注我的微信公众号：软件测试君
来源：https://www.cnblogs.com/longronglang/p/17173611.html
本站部分图文来源于网络，如有侵权请联系删除。