写点什么

使用 Playwright 进行元素定位

  • 2024-05-11
    江西
  • 本文字数:1733 字

    阅读完需:约 6 分钟

前言

在自动化测试和网页爬取中,定位页面元素是一项重要的任务。Playwright 提供了多种方式来定位页面元素,包括通过 CSS 选择器、XPath 和文本内容等。在本文中,我们将介绍如何使用 Playwright 进行元素定位。

获取更多技术资料,请点击!

CSS 选择器定位元素

使用 CSS 选择器是一种常见且灵活的方式来定位页面元素。Playwright 提供了 locator 对象,可以通过 locator.query_selector() 方法来使用 CSS 选择器定位元素。以下是一个示例:


from playwright.sync_api import sync_playwright
def main(): with sync_playwright() as p: browser = p.chromium.launch() page = browser.new_page() page.goto('https://example.com') element = page.locator('h1') print("Element text:", element.text()) browser.close()
if __name__ == "__main__": main()
复制代码


在这个示例中,我们使用 CSS 选择器'h1'定位页面中的标题元素。然后,我们使用 element.text() 方法获取元素的文本内容并打印输出。

使用 XPath 定位元素

XPath 是另一种常用的定位页面元素的方式,特别适用于复杂的页面结构。Playwright 也支持使用 XPath 来定位元素。以下是一个示例:


from playwright.sync_api import sync_playwright
def main(): with sync_playwright() as p: browser = p.chromium.launch() page = browser.new_page() page.goto('https://example.com') element = page.locator('//h1') print("Element text:", element.text()) browser.close()
if __name__ == "__main__": main()
复制代码


在这个示例中,我们使用 XPath 表达式 '//h1' 定位页面中的标题元素。然后,我们同样使用 element.text() 方法获取元素的文本内容并打印输出。

文本内容定位元素

有时候,我们可能需要根据元素的文本内容来定位元素。Playwright 提供了 locator 对象的 with_text() 方法来实现这一功能。以下是一个示例:


from playwright.sync_api import sync_playwright
def main(): with sync_playwright() as p: browser = p.chromium.launch() page = browser.new_page() page.goto('https://example.com') element = page.locator('text="Example Domain"') print("Element text:", element.text()) browser.close()
if __name__ == "__main__": main()
复制代码


在这个示例中,我们使用 text="Example Domain" 来定位文本内容为 "Example Domain" 的元素。然后,我们同样使用 element.text() 方法获取元素的文本内容并打印输出。


注:


  • text=xxxx 没有加引号(单引号或者双引号),模糊匹配,对大小写不敏感

  • text='xxxx' 有引号,精确匹配,对大小写敏感


使用示例,比如点击百度首页上的“新闻” 文本,我们可以看到“新闻”是一个 a 标签


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") print(page.title()) page.click('text=新闻') page.wait_for_timeout(5000) browser.close()
复制代码

其他定位方法

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("muller")page.get_by_label("Password").fill("secret-password")page.get_by_role("button", name="Sign in").click()expect(page.get_by_text("Welcome, muller!")).to_be_visible()
复制代码

总结

本篇文章主要介绍了 playwright 的定位方式,playwright 支持 CSS 和 xpath 这两种最常用的定位方式,还有部分内置的定位方式。后续我们将介绍 playwright 对元素操作的方法。

用户头像

社区:ceshiren.com 微信:ceshiren2021 2019-10-23 加入

微信公众号:霍格沃兹测试开发 提供性能测试、自动化测试、测试开发等资料,实时更新一线互联网大厂测试岗位内推需求,共享测试行业动态及资讯,更可零距离接触众多业内大佬。

评论

发布
暂无评论
使用 Playwright 进行元素定位_霍格沃兹测试开发学社_InfoQ写作社区