Web自动化测试之playwright：Web元素定位.pdf

Web⾃⾃动动化化测测试试之之playwright：：Web元元素素定定位位

要对web页⾯进⾏控制，⾸先需要定位到页⾯对应的元素，和Selenium⼀样，playwright也⽀多种元素定位⽅法，下⾯来介绍它⽀的元

素选择器。

⽬录

playwright主要的选择器:

LocatorDescription

text⽂本值

cssselectorCSS选择器

xpathxpath表达式

ReactselectorReact选择器

VueselectorVue选择器

id,data-testid,data-test-id,data-test属性值，只⽀这4种属性。其它属性需要通过css⽅式

可以和Selenium对⽐来看：。

其中Vueselector和Reactselector⽬前还是实验性的功能，这⾥不做更多介绍。

Text定定位位

通过⽂本值定位

点击【学术】：

page.clicktext=学术)

#或者

page.click学术)

属属性性值值定定位位

只⽀id,data-testid,data-test-id,data-test这4种属性值，其它属性需要使⽤css表达式。

page.fillid=kw,test)

page.clickid=su)

其它属性值定位：

page.fillcss=[id=kw],test)

page.fillcss=[class=s_ipt],test)

page.fillcss=[name=wd],test)

#也可以简化为

page.fill[id=kw],test)

page.fill[class=s_ipt],test)

page.fill[name=wd],test)

xpath定定位位

xpath定位语法介绍可参考：。

使⽤xpath定位上图中的【资讯】：

page.click//*[@id=s_tab]//a[2])

cssselector定定位位

CSS常常规规⽤⽤法法

cssselector定位语法介绍可参考：。

点击【资讯】：

page.click#s_taba:nth-child2)+a)

定定位位可可见见元元素素

page.clickbutton:visible)

page.clickbuttonvisible=true)

伪伪类类：：:has()

⽗元素包含某个⼦元素

page.click#s-top-left:hasa)a:nth-child2))

伪伪类类：：:is()

选择其中任何⼀个元素，点击【新闻】

page.click:isa:has-text新闻),a:has-textNews)))

通通过过页页⾯⾯布布局局定定位位元元素素

Playwright可以通过页⾯布局来定位元素，下⾯来定位输⼊框右边的【百度⼀下】

page.clickinput:right-of#kw))

主要包括以下5种⽤法：

:right-ofinnerselector)-匹配innerselector的任意右边元素

:left-ofinnerselector)-匹配innerselector左边元素

:aboveinnerselector)-匹配innerselector上⾯的元素

:belowinnerselector)-匹配innerselector下⾯的元素

:nearinnerselector)-匹配innerselector附近50pixels以内)的元素。

组组合合定定位位

⽂本定位⽅法可以和css、xpath等⽅法组合

page.clickcss=[class=bgs_btn]text=百度⼀下)

page.click#s-top-left:hasa)text=hao123)

page.click//*[@id=s_tab]//atext=资讯)

定定位位第第n个个元元素素：：:n