龙空技术网

微软自动化神器【Playwright】(十一)之元素定位详解

软件测试君 375

前言:

现时各位老铁们对“java元素定位”可能比较关注,我们都想要分析一些“java元素定位”的相关文章。那么小编同时在网上搜集了一些关于“java元素定位””的相关资讯,希望咱们能喜欢,看官们快快来了解一下吧!

一、写在前面

又有很久没更文了,真的是被催婚搞的整个人情绪特别不好,如果硬要形容的话,那就是没法跟人正常沟通,一点就着,做什么都没耐心,看什么都烦,简直没救了...

也是偶然发现的,自己居然没写关于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()`匹配包含指定文本的最小元素。匹配不区分大小写,还是模糊匹配,就是指定范围了。**示例代码如下:**```javapage.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(";);page.querySelector("#wait").click();String content = page.waitForSelector("div:has(p)").textContent();System.out.println(content);
7、匹配条件之一的元素

以逗号分隔,从CSS选择器列表将匹配该列表中的选择器之一可以选择的所有元素,简单说就是从这么多列表中找到一个匹配的选择器去选择元素。 「示例代码如下:」

page.navigate(";);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(";);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语法,这里没法可说的,个人感觉是完美兼容SeleniumCSS 、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(";);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更出色,不知道是不是我的幻觉?

标签: #java元素定位