技術文章 » 微軟出品自動化神器【Playwright+Java】系列（十）元素定位詳解

微軟出品自動化神器【Playwright+Java】系列（十）元素定位詳解

2023-03-03 06:01:05

一、寫在前面

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

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