天天看點

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

作者:軟體測試君

一、寫在前面

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

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

繼續閱讀