使用 Playwright 进行元素定位

前言

在自动化测试和网页爬取中，定位页面元素是一项重要的任务。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对元素操作的方法。