Web⾃动化测试之playwright：Web元素定位
要对web页⾯进⾏控制，⾸先需要定位到页⾯对应的元素，和Selenium⼀样，playwright也⽀持多种元素定位⽅法，下⾯来介绍它⽀持的元素选择器。
⽬录
playwright主要的选择器:
Locator Description
text⽂本值
css selector CSS 选择器
xpath xpath表达式
React selector React选择器
Vue selector Vue 选择器
id, data-testid, data-test-id, data-test属性值，只⽀持这4种属性。其它属性需要通过css⽅式
可以和Selenium对⽐来看： 。
其中Vue selector和React selector⽬前还是实验性的功能，这⾥不做更多介绍。
Text 定位
通过⽂本值定位
点击【学术】：
page.click('text="学术"')
# 或者
page.click('"学术"')
属性值定位
只⽀持id, data-testid, data-test-id, data-test这4种属性值，其它属性需要使⽤css表达式。
page.fill("id=kw","test")
page.click("id=su")
其它属性值定位：
page.fill('css=[id="kw"]',"test")
page.fill('css=[class="s_ipt"]',"test")
page.fill('css=[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]')
css selector 定位
CSS常规⽤法
css selector 定位语法介绍可参考： 。
点击【资讯】：
page.click("#s_tab a:nth-child(2) + a")
定位可见元素
page.click("button:visible")
page.click("button >> visible=true")
伪类：:has()
⽗元素包含某个⼦元素
page.click("#s-top-left:has(a) > a:nth-child(2)")
伪类：:is()
选择其中任何⼀个元素，点击【新闻】
page.click(':is(a:has-text("新闻"), a:has-text("News"))')
通过页⾯布局定位元素
Playwright可以通过页⾯布局来定位元素，下⾯来定位输⼊框右边的【百度⼀下】page.click('input:right-of(#kw)')
主要包括以下5种⽤法：
:right-of(inner > selector) - 匹配 inner selector的任意右边元素
:left-of(inner > selector) - 匹配inner selector左边元素
:above(inner > selector) - 匹配inner selector上⾯的元素
:below(inner > selector) - 匹配inner selector下⾯的元素
:near(inner > selector) - 匹配inner selector附近 ( 50 pixels以内) 的元素。组合定位
⽂本定位⽅法可以和css、xpath等⽅法组合
page.click('css=[class="bg s_btn"] >> text=百度⼀下')
page.click('#s-top-left:has(a) >> text=hao123')
page.click('//*[@id="s_tab"]//a >> text=资讯')
定位第n个元素：:nth-match()
如果定位到多个元素需要选择其中某⼀个，可以使⽤:nth-match()，索引从1开始。点击【hao123】:
page.click(':nth-match(#s-top-left > a, 2)')# 点击匹配到的第2个元素
注意：和 :nth-child() 不同之处在于，:nth-match()匹配的元素可以不是邻居关系。完整测试代码
from time import sleep
from playwright.sync_api import sync_playwright
class TestLocator():
def setup(self):
playwright = sync_playwright().start()
self.browser = playwright.chromium.launch(headless=False)
self.page = w_page()
def teardown(self):
self.browser.close()
def test_text(self):
("www.baidu/")
# self.page.click("text=学术")
self.page.click('"学术"')
sleep(5)
def test_id(self):
("www.baidu/")
# self.page.fill("id=kw", "test")
# self.page.fill('css=[id="kw"]', "test")
# self.page.fill('css=[class="s_ipt"]', "test")
self.page.fill('[class="s_ipt"]',"test")
# self.page.fill('css=[name="wd"]', "test")
# self.page.click('css=[class="bg s_btn"] >> text=百度⼀下')
self.page.click("id=su")
sleep(5)
def test_xpath(self):
("www.baidu/")
self.page.fill("id=kw","test")
self.page.click("id=su")
sleep(2)
self.page.click('//*[@id="s_tab"]//a[2]')css 属性选择器
# self.page.click('//*[@id="s_tab"]//a >> text=资讯')
sleep(5)
def test_css_selector(self):
("www.baidu/")
self.page.fill("id=kw","test")
self.page.click("id=su")
sleep(2)
self.page.click("#s_tab a:nth-child(2) + a")
sleep(5)
def test_css_has(self):
("www.baidu/")
self.page.click('#s-top-left:has(a) > a:nth-child(2)')
# self.page.click('#s-top-left:has(a) >> text=hao123')
sleep(5)
def test_css_is(self):
("www.baidu/")
sleep(2)
self.page.click(':is(a:has-text("新闻"), a:has-text("News"))')
sleep(5)
sleep(5)
def test_layout(self):
("www.baidu/")
sleep(2)
self.page.fill("id=kw","test")
self.page.click('input:right-of(#kw)')
sleep(5)
def test_nth_march(self):
("www.baidu/")
sleep(2)
self.page.click(':nth-match(#s-top-left > a, 2)')
sleep(5)
总结
playwright和Selenium的元素定位⽅法有相似之处，因为都是对相同的WEB页⾯元素进⾏定位，所以差别不⼤，区别在于它们的定位⽅式，Selenium对每种选择器提供了对应的⽅法，⽽playwright只需要写定位表达式就可以了，不需要指定具体⽅法。从这⼀点来
看，playwright是⾮常⽅便的。
--THE END--

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。