要對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對比來看：Selenium Web元素定位方法 。
其中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 定位語法介紹可參考：Web自動化測試：xpath & CSS Selector定位 。
使用xpath定位上圖中的【資訊】：
page.click('//*[@id="s_tab"]//a[2]')
css selector 定位
CSS常規用法
css selector 定位語法介紹可參考：Web自動化測試：xpath & 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.context = self.browser.new_context()
self.page = self.context.new_page()
def teardown(self):
self.browser.close()
def test_text(self):
self.page.goto("https://www.baidu.com/")
# self.page.click("text=學術")
self.page.click('"學術"')
sleep(5)
def test_id(self):
self.page.goto("https://www.baidu.com/")
# 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):
self.page.goto("https://www.baidu.com/")
self.page.fill("id=kw", "test")
self.page.click("id=su")
sleep(2)
self.page.click('//*[@id="s_tab"]//a[2]')
# self.page.click('//*[@id="s_tab"]//a >> text=資訊')
sleep(5)
def test_css_selector(self):
self.page.goto("https://www.baidu.com/")
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):
self.page.goto("https://www.baidu.com/")
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):
self.page.goto("https://www.baidu.com/")
sleep(2)
self.page.click(':is(a:has-text("新聞"), a:has-text("News"))')
sleep(5)
def test_layout(self):
self.page.goto("https://www.baidu.com/")
sleep(2)
self.page.fill("id=kw", "test")
self.page.click('input:right-of(#kw)')
sleep(5)
def test_nth_march(self):
self.page.goto("https://www.baidu.com/")
sleep(2)
self.page.click(':nth-match(#s-top-left > a, 2)')
sleep(5)
總結
playwright和Selenium的元素定位方法有相似之處，因為都是對相同的WEB頁面元素進行定位，所以差別不大，區別在於它們的定位方式，Selenium對每種選擇器提供了對應的方法，而playwright只需要寫定位表達式就可以了，不需要指定具體方法。從這一點來看，playwright是非常方便的。