1. 简介

Playwright 是微软开源的端到端（end-to-end）测试框架，可用于现代 Web 应用。Playwright 提供如下特性：

• 任意浏览器、任意平台、一种 API

  • 跨浏览器：Playwright 支持所有现代渲染引擎，包括 Chromium、WebKit 和 Firefox。
  • 跨平台：在 Windows、Linux 和 macOS 上，进行本地或 CI 测试（无头或有头）。
  • 跨语言：可在 TypeScript、JavaScript、Python、.NET、Java 中使用 Playwright API。
  • 测试移动 Web：Android Google Chrome 和移动 Safari 的本地移动仿真。桌面和云上运行的渲染引擎相同。

• 弹性、没有古怪的测试

  • 自动等待：Playwright 在执行操作前，将等待到元素可被操作。它还有一组丰富的检查事件。两者结合可消除对人为超时的需求 — 这是导致古怪测试的主要原因。
  • Web 优先断言：Playwright 断言是专门为动态 Web 创建的。检查将自动重试，直到满足必要的条件。
  • 追踪：配置测试重试策略，捕获执行踪迹，录像，截屏，以防止遗忘

• 无需折中、无限制：浏览器在不同进程中运行属于不同源的 Web 内容。Playwright 与现代浏览器架构保持一致，在进程外运行测试。这使得 Playwright 摆脱典型的进程内测试运行器限制。

  • 复合一切：横跨多个选项卡、多个源和多个用户的测试场景。为不同用户创建具有不同上下文的场景，并且在服务器上运行它们，这些都在一个测试中进行。
  • 可信事件：悬停元素，与动态控件交互，生成可信事件。Playwright 使用真正的浏览器输入管道，与真正的用户没有区别。
  • 测试 Frame、穿透 Shadow DOM：Playwright 选择器穿透 Shadow DOM，允许无缝进入 Frame。

• 完全隔离、快速执行：

  • 浏览器上下文：Playwright 为每个测试创建一个浏览器上下文。浏览器上下文等同于全新的浏览器配置文件。它提供零开销的完全测试隔离。创建新浏览器上下文仅需几毫秒。
  • 登录一次：保存上下文的身份认证状态，并且在所有测试中重用。避免在每个测试中重复登录，还提供独立测试的完全隔离。

• 强大的工具：

  • 代码生成：通过录制操作生成测试。将它们保存成任何语言。
  • Playwright 检查器：检查页面，生成选择器，逐步完成测试执行，查看单击点，探索执行日志。
  • 追踪查看器：捕获所有信息以调查测试失败。Playwright 追踪包含测试执行录屏、实时 DOM 快照、操作资源管理器、测试源等。

2. 本文测试环境

• 操作系统：macOS 12.6
• Python：3.10.6（下文以 Python 为例，进行讲述）
• Playwright：1.30.0

3. 安装

3.1. 创建测试环境

xxxxxxxxxx
mkdir playwright-demo
cd playwright-demo/
python3 -m venv venv
# 安装 Pytest 插件
venv/bin/pip3 install pytest-playwright
# 安装需要的浏览器
venv/bin/playwright install

3.2. 添加样例测试

在当前工作目录或子目录内部，创建 test_my_application.py 文件，其内容如下：

xxxxxxxxxx
import re
from playwright.sync_api import Page, expect


def test_homepage_has_Playwright_in_title_and_get_started_link_linking_to_the_intro_page(page: Page):
    page.goto("https://playwright.dev/")

    # Expect a title "to contain" a substring.
    expect(page).to_have_title(re.compile("Playwright"))

    # create a locator
    get_started = page.locator("text=Get started")

    # Expect an attribute "to be strictly equal" to the value.
    expect(get_started).to_have_attribute("href", "/docs/intro")

    # Click the get started link.
    get_started.click()

    # Expects the URL to contain intro.
    expect(page).to_have_url(re.compile(".*intro"))

3.3. 运行样例测试

在默认情况下，测试运行在 Chromium 上，可通过 CLI 选项进行配置，测试以 Headless 模式运行。测试结果和测试日志被展示在终端中。

xxxxxxxxxx
venv/bin/pytest

4. 编写测试

Playwright 断言（assertion）是专门为动态网页创建的。检查将自动重试，直到满足必要的条件。Playwright 自带 auto-wait，这意味着它在执行操作前，等待到元素变为可操作的（actionable）。Playwright 提供 expect 函数来编写断言。

下面是展示如何编写使用断言、定位器（locator）和选择器（selector）的测试的示例。

xxxxxxxxxx
import re
from playwright.sync_api import Page, expect


def test_homepage_has_Playwright_in_title_and_get_started_link_linking_to_the_intro_page(page: Page):
    page.goto("https://playwright.dev/")

    # Expect a title "to contain" a substring.
    expect(page).to_have_title(re.compile("Playwright"))

    # create a locator
    get_started = page.locator("text=Get started")

    # Expect an attribute "to be strictly equal" to the value.
    expect(get_started).to_have_attribute("href", "/docs/intro")

    # Click the get started link.
    get_started.click()

    # Expects the URL to contain intro.
    expect(page).to_have_url(re.compile(".*intro"))

4.1. 断言

Playwright 提供 expect 函数，它将一直等待，直到满足预期条件。

xxxxxxxxxx
import re
from playwright.sync_api import expect

expect(page).to_have_title(re.compile("Playwright"))

4.2. 定位器

定位器（Locator）是 Playwright 的自动等待和重试能力的核心部分。定位器是一种随时在网页上查找元素的方法，用于在元素上执行诸如 .click、.fill 之类的操作。可以使用 page.locator(selector, **kwargs) 方法创建自定义定位器。

xxxxxxxxxx
from playwright.sync_api import expect

get_started = page.locator("text=Get started")

expect(get_started).to_have_attribute("href", "/docs/installation")
get_started.click()

选择器（Selector）是用于创建定位器的字符串。Playwright 支持许多不同的选择器，比如 Text、CSS、XPath 等。阅读 in-depth guide 文档，了解更多关于可用的选择器以及如何进行选择的信息。

xxxxxxxxxx
from playwright.sync_api import expect

expect(page.locator("text=Installation")).to_be_visible()

4.3. 测试隔离

Playwright Pytest 插件基于 test fixture（比如 built in page fixture）的概念，它将被传给你的测试。由于浏览器上下文，在测试之间，页面（Page）彼此隔离，这相当于开启新的浏览器行为，每个测试获得新环境，即使在一个浏览器中运行多个测试时，也是如此。

xxxxxxxxxx
from playwright.sync_api import Page

def test_basic_test(page: Page):
  # ...

4.4. 使用测试钩子

可以使用各种各样的 fixture 在测试之前或之后执行代码，以及在它们之间共享对象。函数（function）作用域的 fixture 具有 beforeEach/afterEach 一样的自动使用行为。模块（module）作用域的 fixture 具有 beforeAll/afterAll 一样的自动使用行为，它在所有测试之前和所有测试之后运行。

xxxxxxxxxx
import pytest
from playwright.sync_api import Page, expect


@pytest.fixture(scope="function", autouse=True)
def before_each_after_each(page: Page):
    print("beforeEach")
    # Go to the starting url before each test.
    page.goto("https://playwright.dev/")
    yield
    print("afterEach")

def test_main_navigation(page: Page):
    # Assertions use the expect API.
    expect(page).to_have_url("https://playwright.dev/")

5. 运行测试

可以运行单个测试、一组测试或全部测试。测试可以运行在一种或多种浏览器上。默认情况下，以 Headless 方式运行测试，这意味着在运行测试时，不会打开浏览器窗口，可以在终端中看到结果。通过使用 --headed 标记，可以以 headed 模式运行测试。

• 在 Chromium 上运行测试

  xxxxxxxxxx
  pytest
  

• 运行单个测试文件

  xxxxxxxxxx
  pytest test_login.py
  

• 运行一组测试文件

  xxxxxxxxxx
  pytest tests/todo-page/ tests/landing-page/
  

• 使用函数名运行测试