2

微软出品自动化神器【Playwright+Java】系列（十）元素定位详解 - 久曲健

 1 year ago
source link: https://www.cnblogs.com/longronglang/p/17173611.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

一、写在前面

又有很久没更文了，真的是被催婚搞的整个人情绪特别不好，如果硬要形容的话，那就是没法跟人正常沟通，一点就着，做什么都没耐心，看什么都烦，简直没救了...

也是偶然发现的，自己居然没写关于Playwright的元素定位，这不是自动化测试的重中之重，怎么可以忘，马上安排！

二、元素定位

主要支持定位方式有：css、xpath、text。

示例代码如下：

java
//选择单个元素
page.querySelector("selector");
//选择多个元素
page.querySelectorAll("selector");
//选择单个元素，并且自动等待到元素可见、可操作
page.waitForSelector("selector");

三、CSS定位

1、css+定位值

可以理解为指定为：css方式定位+使用的定位方式（css选择器语法）。

示例代码如下：

java
page.locator("css=[type='text']")

2、通过其文本内容匹配元素

元素标签+:has-text()

:has-text()匹配任何包含指定文本的元素，在内部的某个地方，可能在子元素或后代元素中。匹配不区分大小写，理解为模糊匹配,应注意与其他CSS说明符一起使用，否则将匹配所有包含指定文本的元素，包括<body>。

示例代码如下：

java
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的正则表达式匹配的最小元素。

示例代码如下：

java
page.querySelector("article .ant-row :text-matches("Open M\o*dal", "i")")

5、仅匹配可见元素

示例dom:

html
<button style='display: none'>Invisible</button>
<button>Visible</button>

示例代码如下：

java
page.locator("button:visible").click();

注意：
文本匹配会规范化空格。例如，它将多个空格变成一个，将换行符变成空格，并忽略前后空格。

6、在给定范围内元素，匹配元素

给定元素的范围的参数传递的任何选择器至少匹配一个元素，它将返回一个元素,也是模糊匹配！
示例代码如下：

java
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选择器列表将匹配该列表中的选择器之一可以选择的所有元素，简单说就是从这么多列表中找到一个匹配的选择器去选择元素。
示例代码如下：

java
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、基于布局匹配定位元素

基于页面布局定位，上下左右之类的，会有当页面布局改变时，会出现找不到元素或者匹配其他元素的情况。

示例代码如下：

java
//在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（）不同，元素不必是兄弟姐妹，它们可以在页面上的任何位置元素。

示例代码如下：

java
page.waitForSelector(":nth-match(:text('promo-card'), 2)").click();

10、第N个元素定位器

选择索引的的方式定位。

示例代码如下：

java
//获取第一个元素的文本
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、仅定位可见元素

一个页面有两个按钮，第一个不可见，第二个可见，示例：

highlighter- HTML
<button style='display: none'>Invisible</button>
<button>Visible</button>

示例代码如下：

java
page.locator("button").locator("visible=true").click();

三、XPath定位

任何以//或…开头的选择器被假定为xpath选择器。例如，Playwright将'//html/body'转换为'xpath=//html/body'。

1、XPath混合使用

特性就是管道符|的使用，在XPath中可指定多个选择器。它将匹配该列表中的选择器之一可以选择的所有元素。

示例代码如下：

java
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定位入门这两篇。

四、使用文本定位

使用文本定位:以引号 "" 或者 ' 开头的，可以判定为文本定为文本定位。

示例代码如下：

java
//包含
String content = page.textContent("button:text('card0')");

2、严格匹配

示例代码如下：

java
//严格匹配
String content1 = page.textContent("button:text-is('card0')");

3、正则表达式匹配

示例代码如下：

java
//正则
String content2 = page.textContent("button:text-matches("ca\r*d0")");

五、使用属性选择器定位

不是CSS选择器，因此不支持任何特定于CSS的选项。

示例代码如下：

java
page.fill("id=user","username1");
page.type("data-testid=testid","username2");

六、使用链式选择器定位

选择器被链接时，下一个选择器相对于前一个选择器的结果被查询,个人感觉就是按照层级去定位元素。

示例代码如下：

java
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更出色，不知道是不是我的幻觉？

__EOF__


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK