playwright--核心概念和Selector定位

---

前言

Playwright提供了一组API可自动化操作Chromium，Firefox和WebKit浏览器。通过使用 Playwright API，可以编写脚本来创建新的浏览器页面，导航到 URL，然后与页面上的元素进行交互。Playwright 可用于自动化用户交互以验证和测试 Web 应用程序。PlayWright的核心概念包括：

• 浏览器
• 浏览器上下文
• 页面和框架
• Selectors
• 自动等待
• 执行上下文
• Evaluation Argument

一、浏览器

浏览器是指 Chromium、Firefox 或 WebKit 的实例。Playwright 脚本通常从启动浏览器实例开始，以关闭浏览器结束。浏览器实例可以在无头（无 GUI）或有头模式下启动。

二、浏览器上下文

浏览器上下文是浏览器实例中一个隔离的类似隐身会话。浏览器上下文的创建速度既快又方便。浏览器上下文可用于并行化隔离的测试执行。

import asyncio
from playwright.async_api import async_playwright

async def main():
    with async_playwright() as p:
        browser = p.chromium.launch()
        # 创建新的隐身浏览器上下文
        context = await browser.new_context()
        # 在上下文中创建新页面。
        page = await context.new_page()
        await page.goto("https://www.baidu.com")
        await context.close()

三、页面和框架

浏览器上下文可以有多个页面。页面是指浏览器上下文中的单个选项卡或弹出窗口

四、Selectors

Playwright可以使用CSS选择器，XPath选择器，HTML属性（如）test、id、data-test-id等属性来定位元素。

1、data-test-id= selector

#同步
page.click('data-test-id=foo')

#异步步
await page.click('data-test-id=foo')

2、CSS and XPath selector

#同步
page.click('div')
page.click('//html/body/div')

#异步
await page.click('div')
await page.click('//html/body/div')

3、text 文本selector

page.click('text=Hello')

4、id定位selector

page.fill("id=kw", "csdn")

5、Selector 组合定位

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

#单击#free month promo中带有文本“Sign Up”的元素
page.click('#free-month-promo >> text=Sign Up')

五、内置Selector

playwright 推荐的内置定位器：

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

说明：日常工作中比较常用的方法，已加粗