当前位置： 首页 > article >正文

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

article 2024/12/4 3:57:25

前言

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

<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_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") #选择同意协议
 

 

 

 

 

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

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

                

        

				
				

					

					http://www.kler.cn/a/420773.html
					
				

                

                  
相关文章：

				  
                        

  • 嵌入式蓝桥杯学习1 点亮LED 
    • 


  • 黑马2024AI+JavaWeb开发入门Day04-SpringBootWeb入门-HTTP协议-分层解耦-IOCDI飞书作业 
    • 


  • html button 按钮单选且 高亮 
    • 


  • 详解Rust异步编程 
    • 


  • UICollectionView在xcode16编译闪退问题 
    • 


  • 性能监控系统Prometheus、Node-exporter与Grafana部署详解搭建 
    • 

                      
  • 
                        vmware虚拟机移植
                      
    • 
                    
                      
  • 
                        多线程 03 实现方式
                      
    • 
                    
                      
  • 
                        三维开发中blender建模后如何完美兼容到threejs
                      
    • 
                    
                      
  • 
                        SAP HANA 上进行 ABAP 开发：简介
                      
    • 
                    
                      
  • 
                        设计模式 更新ing
                      
    • 
                    
                      
  • 
                        简单快速的上手python
                      
    • 
                    
                      
  • 
                        node.js基础学习-zlib模块-压缩解压（八）
                      
    • 
                    
                      
  • 
                        护航开源大赛，赋能数字未来
                      
    • 
                    
                      
  • 
                        Milvus python库 pymilvus 常用操作详解之Collection（上）
                      
    • 
                    
                      
  • 
                        算力100问☞第32问：密集计算的关键技术有哪些？
                      
    • 
                    
                      
  • 
                        Pytest --capture 参数详解：如何控制测试执行过程中的输出行为
                      
    • 
                    
                      
  • 
                        【ONE·基础算法 || 动态规划（三）】
                      
    • 
                    
                      
  • 
                        基于Java Springboot成人教育APP且微信小程序
                      
    • 
                    
                      
  • 
                        Web实时通信@microsoft/signalr
                      
    • 
                    
                      
  • 
                        C语言第十四周课——课堂练习
                      
    • 
                    
                      
  • 
                        pip更换国内源，加速Python包下载（附2024年12月最新国内镜像源列表）
                      
    • 
                    
                      
  • 
                        Unity3D 设置图片拉伸四角不变形
                      
    • 
                    
                      
  • 
                        PhPMyadmin-漏洞复现
                      
    • 
                    
                      
  • 
                        工业公辅车间数智化节能头部企业，蘑菇物联选择 TDengine 升级 AI 云智控
                      
    • 
                    
                      
  • 
                        [在线实验]-RabbitMQ镜像的下载与部署
                      
    •