Playwright UI自动化测试

目录

可以，我用工程落地的方式给你讲，尽量不空谈。

如果你要用 Playwright 搭建 UI 自动化测试，可以按这条主线来做：

一、先说结论：Playwright 搭建 UI 自动化的标准步骤

一般分 6 步：

  1. 安装 Playwright
  2. 初始化项目结构
  3. 录制或手写测试脚本
  4. 加断言
  5. 封装页面对象（POM）
  6. 接入测试报告、截图、CI

二、Playwright 适合什么

它适合做：

  • 登录流程测试
  • 表单提交测试
  • 搜索流程测试
  • 下单流程测试
  • 回归测试
  • 冒烟测试
  • 多浏览器兼容测试

三、推荐语言

你可以用：

  • Python
  • TypeScript / JavaScript

如果你本身偏后端、脚本化，Python 上手快。
如果你团队前端多，TypeScript 是主流。

下面我先用 Python 版讲，因为更直观。

四、Python 版：从 0 搭建

1. 安装

安装 Playwright

pip install playwright

安装浏览器驱动

playwright install

如果你要跑 chromium：

playwright install chromium

2. 创建最简单的脚本

新建文件 test_demo.py

from playwright.sync_api import sync_playwright

def test_google():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)  # False表示打开浏览器看过程
        page = browser.new_page()
        page.goto("https://www.baidu.com")
        print(page.title())
        browser.close()

运行：

python test_demo.py

这说明你的环境已经通了。

五、真正做 UI 自动化测试，建议配合 pytest

安装：

pip install pytest

新建 test_login.py

from playwright.sync_api import Page

def test_baidu_search(page: Page):
    page.goto("https://www.baidu.com")
    page.locator("#kw").fill("Playwright")
    page.locator("#su").click()
    page.wait_for_timeout(2000)
    assert "Playwright" in page.title()

运行：

pytest

六、推荐直接用 Playwright 自带测试能力

如果是 Python，常见搭配是：

  • pytest + playwright

安装官方 pytest 插件：

pip install pytest-playwright

安装浏览器：

playwright install

然后你就可以直接在测试函数里使用 page fixture：

def test_example(page):
    page.goto("https://example.com")
    assert page.locator("h1").text_content() == "Example Domain"

七、一个真实一点的 UI 自动化例子：登录测试

假设你有个登录页：

  • 用户名输入框：#username
  • 密码输入框：#password
  • 登录按钮：#login-btn
  • 登录成功后出现文本：欢迎您

代码：

def test_login_success(page):
    page.goto("https://your-site.com/login")

    page.locator("#username").fill("testuser")
    page.locator("#password").fill("123456")
    page.locator("#login-btn").click()

    page.wait_for_load_state("networkidle")

    assert page.locator("text=欢迎您").is_visible()

八、如何定位元素

Playwright 常见定位方式：

1. CSS 选择器

page.locator("#username")
page.locator(".login-btn")

2. 文本定位

page.locator("text=登录")

3. 角色定位（推荐）

page.get_by_role("button", name="登录")

4. placeholder

page.get_by_placeholder("请输入用户名")

5. label

page.get_by_label("用户名")

推荐优先级

实际项目建议优先用：

  • get_by_role
  • get_by_label
  • get_by_test_id

最稳定。

九、强烈建议前端加 test id

比如前端写：

<input data-testid="username-input" />
<button data-testid="login-button">登录</button>

你的测试代码就能写得很稳：

page.get_by_test_id("username-input").fill("testuser")
page.get_by_test_id("login-button").click()

这是企业里很常见的做法。

十、如何录制脚本

Playwright 自带录制工具，非常适合入门。

运行：

playwright codegen https://your-site.com

然后你在浏览器里操作，它会自动生成代码。

这对你很有帮助，因为可以快速拿到：

  • 元素定位
  • 点击代码
  • 填表代码

然后你再手工优化。

十一、推荐项目结构

一个稍微规范点的 UI 自动化项目，可以这样组织：

ui-test/
│
├── tests/
│   ├── test_login.py
│   ├── test_search.py
│   └── test_order.py
│
├── pages/
│   ├── login_page.py
│   ├── home_page.py
│   └── order_page.py
│
├── utils/
│   ├── config.py
│   └── logger.py
│
├── conftest.py
├── pytest.ini
└── requirements.txt

十二、页面对象模式（POM）

如果测试多了，不要把所有操作都写在测试脚本里，建议封装页面对象。

1. 页面类：pages/login_page.py

class LoginPage:
    def __init__(self, page):
        self.page = page
        self.username_input = page.locator("#username")
        self.password_input = page.locator("#password")
        self.login_button = page.locator("#login-btn")

    def open(self):
        self.page.goto("https://your-site.com/login")

    def login(self, username, password):
        self.username_input.fill(username)
        self.password_input.fill(password)
        self.login_button.click()

2. 测试用例：tests/test_login.py

from pages.login_page import LoginPage

def test_login_success(page):
    login_page = LoginPage(page)
    login_page.open()
    login_page.login("testuser", "123456")

    assert page.locator("text=欢迎您").is_visible()

这样代码更清晰，也更容易维护。

十三、等待机制怎么处理

Playwright 比 Selenium 强的一点是：自动等待做得很好。

比如你点按钮时，它会自动等元素可点击。

但有时你仍然要显式等待。

常见等待

1. 等页面加载完成

page.wait_for_load_state("networkidle")

2. 等元素出现

page.locator("#result").wait_for()

3. 不推荐随便写死 sleep

page.wait_for_timeout(3000)

这个只是调试时临时用，不适合正式测试。

十四、断言怎么写

UI 自动化最关键是断言，不只是“点了没报错”。

比如：

assert page.locator("text=登录成功").is_visible()

或者：

assert page.url == "https://your-site.com/dashboard"

或者：

assert page.locator("#username").input_value() == "testuser"

十五、失败截图和录像

这在排查问题时很有用。

可以在 conftest.py 或测试配置里加。

简单方式：

def test_example(page):
    page.goto("https://example.com")
    page.screenshot(path="example.png")

更高级的可以配 trace。

十六、Trace 调试非常强

Playwright 有个很强的能力：trace。
你可以记录整个执行过程，失败后回放。

运行测试时带上：

pytest --tracing=retain-on-failure

然后查看 trace。

或者 JS 版常见：

npx playwright show-trace trace.zip

这对定位：

  • 元素找不到
  • 页面没加载完
  • 点击错位置

特别有帮助。

十七、如何处理登录态

很多 UI 自动化测试不想每条用例都重新登录一次。

可以把登录态保存下来。

思路是：

  1. 先登录一次
  2. 保存 storage state
  3. 后续测试直接复用

在 Playwright 里这是常见玩法。

十八、如何做数据驱动测试

比如你想测试多个用户名密码组合：

import pytest

@pytest.mark.parametrize("username,password,expected", [
    ("user1", "123456", True),
    ("user2", "wrongpass", False),
])
def test_login(page, username, password, expected):
    page.goto("https://your-site.com/login")
    page.locator("#username").fill(username)
    page.locator("#password").fill(password)
    page.locator("#login-btn").click()

    if expected:
        assert page.locator("text=欢迎您").is_visible()
    else:
        assert page.locator("text=用户名或密码错误").is_visible()

十九、如何接入 CI/CD

如果你后面想接 Jenkins / GitLab CI / GitHub Actions，流程通常是：

  1. 安装依赖
  2. 安装 Playwright 浏览器
  3. 跑 pytest
  4. 输出报告

例如：

pip install -r requirements.txt
playwright install
pytest

二十、企业落地时建议加的能力

一个正式项目建议加这些：

  • 日志
  • 截图
  • 失败自动重试
  • 报告（allure / pytest-html）
  • 环境配置（测试、预发、生产隔离）
  • 测试数据管理
  • 页面对象封装
  • 公共组件封装

二十一、如果你想更规范，建议这样分层

1. 用例层

描述测什么

2. 页面层

封装页面操作

3. 组件层

封装公共组件，比如弹窗、导航栏、表格

4. 工具层

日志、配置、随机数据、截图等

二十二、一个最小可用方案

如果你现在就想开始搭，最小方案是：

安装

pip install playwright pytest pytest-playwright
playwright install

目录

tests/test_login.py

代码

def test_login(page):
    page.goto("https://example.com/login")
    page.locator("#username").fill("admin")
    page.locator("#password").fill("123456")
    page.locator("#login-btn").click()
    assert page.locator("text=欢迎您").is_visible()

运行

pytest

二十三、最后给你一句实战建议

如果你是要自己搭一个长期可维护的 UI 自动化框架，最推荐的技术组合是：

Python 方案

  • playwright
  • pytest
  • pytest-playwright
  • allure-pytest（报告）

JS/TS 方案

  • @playwright/test

如果你团队没有特别偏好，Python 更容易起步，TypeScript 更贴近 Playwright 官方生态。

如果你愿意，我下一步可以直接给你这 3 个之一：

  1. 一套完整的 Python + Playwright UI 自动化项目模板
  2. 一个登录+搜索+下单的 Playwright 示例
  3. 如何在 Playwright 上叠加 LLM，做智能 UI 测试 Agent

如果你想要“直接能跑”的，我建议我下一条直接给你：
完整项目模板代码结构。

posted @ 2026-03-24 08:44  向着朝阳  阅读(25)  评论(0)    收藏  举报