ai+playwriht 实现ui自动化

课程目标：

1、对playwriht 的现代化理念彻底新自动化测试的认知

一、Playwright 核心介绍

1. Playwright 是什么？

（1）微软开源的一个插件，支持 Chromium（Chrome/Edge）、Firefox、WebKit（Safari）三大浏览器引擎。

（2）跨平台：Windows/macOS/Linux；跨语言：Python、JS/TS、Java、C#。

（3）核心定位：Web 自动化、端到端（E2E）测试、爬虫、UI 回归、性能监控。‘

（4）基于devtools协议得浏览器自动化工具

（5）不需要浏览器的全部功能

（6）速度比较快、天生支持异步

（7）几乎可以自动化浏览期的全部功能

2. 核心优势（为什么选它）

（1）速度快

（2）定位比较方便

（3）很好和ai结合

自动等待：智能等待元素可见 / 可交互，告别 time.sleep()。

多浏览器 / 多设备：内置手机 / 平板模拟（iPhone、Pixel 等）。

录制生成代码：playwright codegen 一键生成操作脚本。

网络拦截 / 模拟：可 Mock API、修改请求 / 响应、弱网测试。

截图 / PDF / 录屏：全页 / 元素截图、生成 PDF、录制操作视频。

无头 / 有头：支持后台运行（无头）与可视化调试（有头）Playwright。

与 pytest 深度集成：完美适配你之前学的 pytest 生态。’‘’

3、playwright 和selenium 的核心差异？

二、环境准备

（一）安装（Python 环境）

1. 环境要求：安装python（Python 3.8以上（推荐 3.10+））

查看python是否有没有，没有就安装

c查看python当前路径

pip -V 看路径和版本

python -V 看当前默认 Python

python -m site 看库安装位置

（二）. 安装 Playwright 库

pip install playwright

2、查看安装playwright的版本

playwright --version

3、pip install --upgrade playwright 升级playwriht 版本

（三）. 安装浏览器驱动（自动下载 Chrom/Firefox/WebKit）

（1）playwright install chrome 安装谷歌

（2）playwright install firefox 下载火狐浏览器

三、基础运用（Python 同步 API）

1. 核心概念

Browser：浏览器实例（Chrome、Firefox、WebKit）。

BrowserContext：浏览器上下文（隔离会话，类似无痕窗口）Playwright。

Page：页面（一个标签页）。

Locator：元素定位器（推荐优先使用）。

2. 常用操作示例（可直接运行）

python

运行

# demo.py

from playwright.sync_api import sync_playwright

def run_playwright():

with sync_playwright() as p:

# 1. 启动浏览器（headless=False 可视化，True 无头）

browser = p.chromium.launch(headless=False, slow_mo=500) # slow_mo 放慢操作，方便看

# 2. 创建上下文（可设置代理、UA、视口等）

context = browser.new_context(

viewport={"width": 1920, "height": 1080},

user_agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"

)

# 3. 新建页面

page = context.new_page()

# 4. 导航

page.goto("https://www.baidu.com")

print("当前标题：", page.title())

# 5. 元素定位与交互（推荐用 get_by_* 定位器）

# 定位搜索框（placeholder）

page.get_by_placeholder("百度一下").fill("Playwright")

# 定位搜索按钮（文本）

page.get_by_role("button", name="百度一下").click()

# 6. 等待结果加载

page.wait_for_selector("div#content_left")

# 7. 截图

page.screenshot(path="baidu_result.png", full_page=True)

print("截图已保存：baidu_result.png")

# 8. 关闭

context.close()

browser.close()

if __name__ == "__main__":

run_playwright()

3. 元素定位（重点）

Playwright 推荐优先使用语义化定位器（更稳定），其次是 CSS/XPath。

（1）推荐：get_by_* 定位器

python

运行

# 按角色（最推荐）

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

page.get_by_role("link", name="首页")

# 按文本

page.get_by_text("欢迎回来")

# 按标签（input/textarea）

page.get_by_label("用户名")

page.get_by_placeholder("请输入密码")

# 按 alt 文本（图片）

page.get_by_alt_text("logo")

# 按 test-id（测试专用）

page.get_by_test_id("submit-btn")

（2）CSS / XPath（兼容旧场景）

python

运行

# CSS

page.locator("#kw").fill("Playwright")

page.locator(".s_btn").click()

# XPath

page.locator('//input[@id="kw"]').fill("Playwright")

四、与 pytest 集成（实战测试）

结合你之前学的 pytest，实现自动化测试用例。

1. 安装 pytest 插件

bash

运行

pip install pytest-playwright

2. 编写测试用例（test_login.py）

python

运行

# test_login.py

import pytest

from playwright.sync_api import Page, expect

# 全局 fixture（session 级，整个测试会话只启动一次浏览器）

@pytest.fixture(scope="session")

def browser_type_launch_args():

# 有头模式，方便调试

return {"headless": False, "slow_mo": 300}

# 测试用例

def test_baidu_search(page: Page):

# 1. 打开百度

page.goto("https://www.baidu.com")

# 2. 断言标题

expect(page).to_have_title("百度一下，你就知道")

# 3. 搜索

page.get_by_placeholder("百度一下").fill("Playwright")

page.get_by_role("button", name="百度一下").click()

# 4. 等待结果并断言

page.wait_for_selector("div#content_left")

expect(page.locator("div#content_left")).to_be_visible()

# 5. 截图

page.screenshot(path="test_baidu_search.png")

def test_login_failure(page: Page):

page.goto("https://your-cms-login.com")

page.get_by_label("用户名").fill("wrong_user")

page.get_by_label("密码").fill("wrong_pwd")

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

# 断言错误提示

expect(page.get_by_text("用户名或密码错误")).to_be_visible()

3. 运行测试（pytest 命令）

bash

运行

# 运行所有测试（无头）

pytest

# 有头模式（可视化）

pytest --headed

# 指定浏览器（chromium/firefox/webkit）

pytest --browser firefox

# 运行指定用例

pytest test_login.py::test_baidu_search -v

# 只运行上次失败的用例（结合你之前学的 --lf）

pytest --lf --headed

五、进阶：录制脚本（codegen）

不用手写代码，操作浏览器自动生成脚本，新手神器。

bash

运行

# 启动录制，自动打开浏览器

playwright codegen https://www.baidu.com

# 录制完成后，自动生成 Python/JS 代码，可直接复制使用

六、常用命令速查

bash

运行

# 安装

pip install playwright

playwright install

# 录制

playwright codegen https://example.com

# 运行 pytest 测试

pytest --headed --browser chromium

pytest --lf --headed # 只跑上次失败用例

# 查看 trace（调试神器）

pytest --tracing on

playwright show-trace test-results/<test-name>/trace.zip

七、总结

Playwright = 现代化 Web 自动化 + 稳定 + 高效，完美适配 pytest 测试生态。

安装：pip install playwright + playwright install。

核心：Browser → Context → Page → Locator。

实战：与 pytest 集成，编写可维护的端到端测试用例

一、Playwright 核心介绍

1. 是什么

微软开源，支持 Chromium（Chrome/Edge）、Firefox、WebKit（Safari）三大浏览器引擎。
跨平台：Windows/macOS/Linux；跨语言：Python、JS/TS、Java、C#。
核心定位：Web 自动化、端到端（E2E）测试、爬虫、UI 回归、性能监控。

2. 核心优势（为什么选它）

自动等待：智能等待元素可见 / 可交互，告别 time.sleep()。
多浏览器 / 多设备：内置手机 / 平板模拟（iPhone、Pixel 等）。
录制生成代码：playwright codegen 一键生成操作脚本。
网络拦截 / 模拟：可 Mock API、修改请求 / 响应、弱网测试。
截图 / PDF / 录屏：全页 / 元素截图、生成 PDF、录制操作视频。
无头 / 有头：支持后台运行（无头）与可视化调试（有头）Playwright。
与 pytest 深度集成：完美适配你之前学的 pytest 生态。

二、安装（Python 环境）

1. 环境要求

Python 3.8+（推荐 3.10+）
已安装 pip

2. 安装步骤（3 条命令）

bash

运行

# 1. 安装 Playwright 库
pip install playwright

# 2. 安装浏览器驱动（自动下载 Chromium/Firefox/WebKit）
playwright install

# 国内加速（可选，解决下载慢）
set PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright
playwright install

3. 验证安装

python

运行

# test_playwright.py
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)  # 有头模式，可见浏览器
    page = browser.new_page()
    page.goto("https://www.baidu.com")
    print(page.title())  # 输出：百度一下，你就知道
    browser.close()

运行：

bash

运行

python test_playwright.py

能打开百度并打印标题，即安装成功。

三、基础运用（Python 同步 API）

1. 核心概念

Browser：浏览器实例（Chrome、Firefox、WebKit）。
BrowserContext：浏览器上下文（隔离会话，类似无痕窗口）Playwright。
Page：页面（一个标签页）。
Locator：元素定位器（推荐优先使用）。

2. 常用操作示例（可直接运行）

python

运行

# demo.py
from playwright.sync_api import sync_playwright

def run_playwright():
    with sync_playwright() as p:
        # 1. 启动浏览器（headless=False 可视化，True 无头）
        browser = p.chromium.launch(headless=False, slow_mo=500)  # slow_mo 放慢操作，方便看
        # 2. 创建上下文（可设置代理、UA、视口等）
        context = browser.new_context(
            viewport={"width": 1920, "height": 1080},
            user_agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"
        )
        # 3. 新建页面
        page = context.new_page()

        # 4. 导航
        page.goto("https://www.baidu.com")
        print("当前标题：", page.title())

        # 5. 元素定位与交互（推荐用 get_by_* 定位器）
        # 定位搜索框（placeholder）
        page.get_by_placeholder("百度一下").fill("Playwright")
        # 定位搜索按钮（文本）
        page.get_by_role("button", name="百度一下").click()

        # 6. 等待结果加载
        page.wait_for_selector("div#content_left")

        # 7. 截图
        page.screenshot(path="baidu_result.png", full_page=True)
        print("截图已保存：baidu_result.png")

        # 8. 关闭
        context.close()
        browser.close()

if __name__ == "__main__":
    run_playwright()

3. 元素定位（重点）

Playwright 推荐优先使用语义化定位器（更稳定），其次是 CSS/XPath。

（1）推荐：get_by_* 定位器

python

运行

# 按角色（最推荐）
page.get_by_role("button", name="登录")
page.get_by_role("link", name="首页")

# 按文本
page.get_by_text("欢迎回来")

# 按标签（input/textarea）
page.get_by_label("用户名")
page.get_by_placeholder("请输入密码")

# 按 alt 文本（图片）
page.get_by_alt_text("logo")

# 按 test-id（测试专用）
page.get_by_test_id("submit-btn")

（2）CSS / XPath（兼容旧场景）

python

运行

# CSS
page.locator("#kw").fill("Playwright")
page.locator(".s_btn").click()

# XPath
page.locator('//input[@id="kw"]').fill("Playwright")

四、与 pytest 集成（实战测试）

结合你之前学的 pytest，实现自动化测试用例。

1. 安装 pytest 插件

bash

运行

pip install pytest-playwright

2. 编写测试用例（test_login.py）

python

运行

# test_login.py
import pytest
from playwright.sync_api import Page, expect

# 全局 fixture（session 级，整个测试会话只启动一次浏览器）
@pytest.fixture(scope="session")
def browser_type_launch_args():
    # 有头模式，方便调试
    return {"headless": False, "slow_mo": 300}

# 测试用例
def test_baidu_search(page: Page):
    # 1. 打开百度
    page.goto("https://www.baidu.com")
    # 2. 断言标题
    expect(page).to_have_title("百度一下，你就知道")
    # 3. 搜索
    page.get_by_placeholder("百度一下").fill("Playwright")
    page.get_by_role("button", name="百度一下").click()
    # 4. 等待结果并断言
    page.wait_for_selector("div#content_left")
    expect(page.locator("div#content_left")).to_be_visible()
    # 5. 截图
    page.screenshot(path="test_baidu_search.png")

def test_login_failure(page: Page):
    page.goto("https://your-cms-login.com")
    page.get_by_label("用户名").fill("wrong_user")
    page.get_by_label("密码").fill("wrong_pwd")
    page.get_by_role("button", name="登录").click()
    # 断言错误提示
    expect(page.get_by_text("用户名或密码错误")).to_be_visible()

3. 运行测试（pytest 命令）

bash

运行

# 运行所有测试（无头）
pytest

# 有头模式（可视化）
pytest --headed

# 指定浏览器（chromium/firefox/webkit）
pytest --browser firefox

# 运行指定用例
pytest test_login.py::test_baidu_search -v

# 只运行上次失败的用例（结合你之前学的 --lf）
pytest --lf --headed

五、进阶：录制脚本（codegen）

不用手写代码，操作浏览器自动生成脚本，新手神器。

bash

运行

# 启动录制，自动打开浏览器
playwright codegen https://www.baidu.com

# 录制完成后，自动生成 Python/JS 代码，可直接复制使用

六、常用命令速查

bash

运行

# 安装
pip install playwright
playwright install

# 录制
playwright codegen https://example.com

# 运行 pytest 测试
pytest --headed --browser chromium
pytest --lf --headed  # 只跑上次失败用例

# 查看 trace（调试神器）
pytest --tracing on
playwright show-trace test-results/<test-name>/trace.zip

七、总结

Playwright = 现代化 Web 自动化 + 稳定 + 高效，完美适配 pytest 测试生态。
安装：pip install playwright + playwright install。
核心：Browser → Context → Page → Locator。
实战：与 pytest 集成，编写可维护的端到端测试用例
pip -V → 看路径和版本
python -V → 看当前默认 Python
python -m site → 看库安装位置

posted @ 2026-03-28 08:36 xiaolehua 阅读(47) 评论(0) 收藏举报

刷新页面返回顶部

肖sir软件测试培训师

ai+playwriht 实现ui自动化

一、Playwright 核心介绍

1. 是什么

2. 核心优势（为什么选它）

二、安装（Python 环境）

1. 环境要求

2. 安装步骤（3 条命令）

3. 验证安装

三、基础运用（Python 同步 API）

1. 核心概念

2. 常用操作示例（可直接运行）

3. 元素定位（重点）

（1）推荐：get_by_* 定位器

（2）CSS / XPath（兼容旧场景）

四、与 pytest 集成（实战测试）

1. 安装 pytest 插件

2. 编写测试用例（test_login.py）

3. 运行测试（pytest 命令）

五、进阶：录制脚本（codegen）

六、常用命令速查

七、总结

公告