playwright 学习复仇记-2 Selector选择器定位元素

前言

Selector 选择器，也就是通常说的元素定位了，页面上点点点的操作，都是基于元素定位，所以这块是重点需要学的核心内容。

Selector 选择器

说到元素定位，大家肯定会首先想到 selenium 的八大元素定位，其中xpath 和 css才是最主要的。
playwright 可以通过 ​​​CSS selector​​​, ​​XPath selector​​​, ​​HTML 属性（比如 id, data-test-id​​​）或者是 ​​text 文本内容​​​定位元素。
除了xpath selector外，所有selector默认都是指向shadow DOM，如果要指向常规DOM，可使用*:light。不过通常不需要。

操作元素，可以先定位再操作

# coding=utf-8
from playwright.sync_api import sync_playwrightwith sync_playwright() as p:# 创建服务器对象(指定浏览器驱动)# browser = p.chromium.launch()  # 不填写参数表示从计算机环境变量读取chromium驱动，启动无头模式（无界面版）browser = p.chromium.launch(headless=False,executable_path="C:\\Users\\19076\AppData\Local\Google\Chrome\Application\chrome.exe")# 创建一个窗口context = browser.new_context()# 在此窗口创建一个标签页page = context.new_page()page.goto("https://www.baidu.com/")#通过id识别元素page.locator("#kw").fill("百度热搜")page.locator("#su").click()page.wait_for_timeout(5000)# 一定不要忘记关闭对象page.close()context.close()

CSS 或 XPath 选择器（个人比较推荐xpath，动态元素除外）

# coding=utf-8
from playwright.sync_api import sync_playwrightwith sync_playwright() as p:# 创建服务器对象(指定浏览器驱动)# browser = p.chromium.launch()  # 不填写参数表示从计算机环境变量读取chromium驱动，启动无头模式（无界面版）browser = p.chromium.launch(headless=False,executable_path="C:\\Users\\19076\AppData\Local\Google\Chrome\Application\chrome.exe")# 创建一个窗口context = browser.new_context()# 在此窗口创建一个标签页page = context.new_page()page.goto("https://www.baidu.com/")# page.locator("#kw").fill("百度热搜")# page.locator("#su").click()# fill可输入文字page.fill("css=#kw","百度热搜")"""其他用法：#元素调用fill方法 element_handle = page.query_selector("#kw")element_handle.fill("百度热搜") #向百度搜索框输入playwright"""# xpath用法page.click('//*[@id="su"]')"""# copy full xpath，效果更趋向于静态元素page.click("/html/body/div[1]/div[1]/div[5]/div/div/form/span[2]/input")"""page.wait_for_timeout(5000)# 一定不要忘记关闭对象page.close()context.close()

或者可以直接写xpath和css语法，不需要前面的前缀​​css=​​​ 和 ​​xpath=​​, 它会自动判断你写的是css还是xpath语法，前提是你语法没有错误。

text 文本选择器

文本选择器是一个非常实用的定位方式，根据页面上看到的text文本就可以定位了，比如我们经常使用xpath 的文本选择器定位

text 文本除了可以定位 a 标签，还可以定位 button 按钮，input标签value值

# coding=utf-8
from playwright.sync_api import sync_playwrightwith sync_playwright() as p:# 创建服务器对象(指定浏览器驱动)# browser = p.chromium.launch()  # 不填写参数表示从计算机环境变量读取chromium驱动，启动无头模式（无界面版）browser = p.chromium.launch(headless=False,executable_path="C:\\Users\\19076\AppData\Local\Google\Chrome\Application\chrome.exe")# 创建一个窗口context = browser.new_context()# 在此窗口创建一个标签页page = context.new_page()page.goto("https://www.baidu.com/")print(page.title())# <a>标签# page.click('text=新闻')# <input type=button value="百度一下">，input标签value值# <button>百度一下</button> button标签page.click("text=百度一下")page.wait_for_timeout(5000)# 一定不要忘记关闭对象page.close()context.close()browser.close()

Selector 选择器组合定位

查找目标元素

不同的selector可组合使用，用​​>>​​连接

# id 属性+ css
page.fill('form >> [name="username"]', "super")
page.fill('form >> #password', "a123456.")
page.click("text=立即登录")# ​​form >> [name="username"]​​ 定位方式等价于# page.fill('form >> [name="username"]', "super")
# page.locator("form").locator('[name="username"]').fill("super")

相当于是根据父元素找到子元素了

登录按钮的值是​​value="立即登录 > "​​,可以用text文本定位的方式，模糊匹配到，这个人性化的设计提高了定位的效率。

<input class="btn btn-success btn-block" id="loginBtn" type="submit" value="立即登录 > ">

内置定位器

这些是 playwright 推荐的内置定位器。

• page.get_by_role()通过显式和隐式可访问性属性进行定位。
• page.get_by_text()通过文本内容定位。
• page.get_by_label()通过关联标签的文本定位表单控件。
• page.get_by_placeholder()按占位符定位输入。
• page.get_by_alt_text()通过替代文本定位元素，通常是图像。
• page.get_by_title()通过标题属性定位元素。
• page.get_by_test_id()根据data-testid属性定位元素（可以配置其他属性）。

使用示例

page.get_by_label("User Name").fill("John")
page.get_by_label("Password").fill("secret-password")
page.get_by_role("button", name="Sign in").click()
expect(page.get_by_text("Welcome, John!")).to_be_visible()

元素操作

1、输入文字（fill）

适用于：<input>,<textarea>或[contenteditable]，其他类型的会报错，page、element、frame都可以使用fill方法

from playwright.sync_api import sync_playwrightwith sync_playwright() as p:browser = p.chromium.launch(headless=False,slow_mo=1000)page = browser.new_page()page.goto("https://www.baidu.com")#页面直接调用fill方法page.fill("#kw", "playwright") #向百度搜索框输入playwright#元素调用fill方法 element_handle = page.query_selector("#kw")element_handle.fill("playwright") #向百度搜索框输入playwright

2、模拟键盘挨个输入字符（type）

我们也可以在type方法中增加delay参数，设置每个字符之间输入的延迟。page、element、frame都可以使用type方法。不适用于ctrl、enter等特殊键

from playwright.sync_api import sync_playwrightwith sync_playwright() as p:browser = p.chromium.launch(headless=False,slow_mo=1000)page = browser.new_page()page.goto("https://www.baidu.com")page.type("#kw", "哈哈哈")

3、模拟键盘按键操作（press）

模拟键盘上的每个按键，也支持Control+c等组合按键，不支持连续按键（例如先按a、再按b）

from playwright.sync_api import sync_playwrightwith sync_playwright() as p:browser = p.chromium.launch(headless=False,slow_mo=1000)page = browser.new_page()page.goto("https://www.baidu.com")page.type("#kw", "enter")#模拟键盘挨个输入字符page.press("#kw", "Control+a") #模拟ctrl+a键page.press("#kw", "Control+x")

4、聚焦到某个元素（focus）

page.focus('元素')

5、鼠标点击（click）

page.click("元素")
selector参数：指定元素
button：右击、左击、中建  "left", "middle", "right"，默认左
click_count：点击次数

6、鼠标双击（dbclick）

page.dbclick("元素")

7、鼠标悬浮（hover）

page.hover('#item')

8、操作复选框和单选框（check、uncheck）

适用于input[type=checkbox]，input[type=radio]，[role=checkbox]或label与复选框或单选按钮相关联

from playwright.sync_api import sync_playwrightwith sync_playwright() as p:browser = p.chromium.launch(headless=False,slow_mo=1000)context = browser.new_context()page = context.new_page()page.goto('https://passport.baidu.com/v2/?login') #进入百度的登录页面with context.expect_page() as new_page_info:page.click("#TANGRAM__PSP_3__regLink")#点击我要注册new_page = new_page_info.valuenew_page.check("#TANGRAM__PSP_4__isAgree") #选择同意协议

9、操作复选框和单选框（select_option）

适用于在<select>元素中选择一个或多个选项