一、寫在前面

又有很久沒更文了，真的是被催婚搞的整個人情緒特别不好，如果硬要形容的話，那就是沒法跟人正常溝通，一點就着，做什麼都沒耐心，看什麼都煩，簡直沒救了...

也是偶然發現的，自己居然沒寫關于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更出色，不知道是不是我的幻覺？

微軟自動化神器【Playwright】（十一）之元素定位詳解

一、寫在前面

二、元素定位

三、CSS定位

1、css+定位值

2、通過其文本内容比對元素

4、文本通過正規表達式比對

5、僅比對可見元素

6、在給定範圍内元素，比對元素

7、比對條件之一的元素

8、基于布局比對定位元素

9、從查詢結果中選擇第n個元素比對

10、第N個元素定位器

11、僅定位可見元素

三、XPath定位

1、XPath混合使用

2、常見XPath定位使用

四、使用文本定位

1、包含

2、嚴格比對

3、正規表達式比對

五、使用屬性選擇器定位

六、使用鍊式選擇器定位

七、寫在最後

繼續閱讀