一、写在前面
又有很久没更文了,真的是被催婚搞的整个人情绪特别不好,如果硬要形容的话,那就是没法跟人正常沟通,一点就着,做什么都没耐心,看什么都烦,简直没救了...
也是偶然发现的,自己居然没写关于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、文本通过正则表达式匹配
匹配文本内容与类似java script的正则表达式匹配的最小元素。
示例代码如下:
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.loc