一、寫在前面
又有很久沒更文了，真的是被催婚搞的整個人情緒特別不好，如果硬要形容的話，那就是沒法跟人正常溝通，一點就著，做什麼都沒耐心，看什麼都煩，簡直沒救了...
也是偶然發現的，自己居然沒寫關於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更出色，不知道是不是我的幻覺？