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

news2024/12/24 21:33:13

前言

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_playwright


with 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_playwright


with 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_playwright


with 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 选择器组合定位

查找目标元素

python+playwright 学习-2.Selector 选择器定位元素_百度_03

不同的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文本定位的方式，模糊匹配到，这个人性化的设计提高了定位的效率。

内置定位器

这些是 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_playwright

with 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_playwright

with 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_playwright

with 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_playwright

with 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.value
        new_page.check("#TANGRAM__PSP_4__isAgree") #选择同意协议