本文出自霍格沃兹测试开发学社学员笔记

Playwright 简介

Playwright 官网：

• Web 自动化测试框架。

• 跨平台多语言支持。

• 支持 Chromium、Firefox、WebKit 等主流浏览器自动化操作。

Playwright 的优点

• 支持所有流行的浏览器。

• 速度更快，更可靠的执行。

• 更强大的自动化测试配置。

• 强大的工具库：Codegen、Playwright inspector、Trace Viewer。

Playwright 原理

scale 1000

participant 编程语言 as p

participant Playwright as playwright

participant puppeteer

participant 浏览器 as browser

p -> playwright: 编程语言调用 playwright 库

playwright -> puppeteer: 调用 puppeteer 工具

puppeteer <-> browser: 通过 Chrome DevTools 协议（基于 Websocket），调用浏览器

Playwright 与 selenium 对比

Playwright 核心工具

• Codegen：通过记录你的操作来生成测试。 将它们保存为任何语言。

• Playwright inspector： 检查页面、生成选择器、逐步执行测试、查看点击点、探索执行日志。

• Trace Viewer：捕获所有信息以调查测试失败。 Playwright 跟踪包含测试执行截屏、实时 DOM 快照、动作资源管理器、测试源等等。

Playwright 环境安装

• 安装 playwright 插件

• pip install pytest-playwright

• 安装所需的浏览器

• playwright install

Codegen

# 设定展示窗口大小playwright codegen --viewport-size=800,600 地址# 指定设备playwright codegen --device="iPhone 11" 地址

其他参数：https://playwright.dev/python/docs/codegen

Codegen-保存登录状态

• 场景：单点登录、验证码问题

# 保存登录状态playwright codegen --save-storage=auth.json# 加载认证信息playwright codegen --load-storage=auth.json 地址

Playwright 常用 API

Playwright 使用实例

from playwright.sync_api import sync_playwright, expectdef test_playwright():    # 实例化playwright    playwright = sync_playwright().start()    # 打开chrome浏览器,headless默认是True,无头模式,这里设置为False方便查看效果    browser = playwright.chromium.launch(headless=False)    # 打开一个窗口页面    page = browser.new_page()    # 在当前窗口页面打开测试人网站    page.goto("https://ceshiren.com/")    # 定位搜索按钮并点击    page.locator("#search-button").click()    # 定位搜索框并输入web自动化    page.locator("#search-term").fill("web自动化")    # 使用keyboard.down模拟键盘的enter事件    page.keyboard.down("Enter")    # 断言搜索结果    result = page.locator(".list>li:nth-child(1) .topic-title>span")    expect(result).to_contain_text("自动化测试")    # 截图    page.screenshot(path='screenshot.png')    # 用例完成后先关闭浏览器    browser.close()    # 然后关闭playwright服务    playwright.stop()

Trace Viewer

Trace Viewer 使用

trace 在代码中的配置

browser = chromium.launch()

实例化一个新的 context

context = browser.new_context()

设置 trace 的参数信息

context.tracing.start(screenshots=True, snapshots=True, sources=True)

使用 context 生成的 page 实例进行对应的操作

page = context.new_page()

结束追踪

context.tracing.stop(path = "trace.zip")

打开 trace

playwright show-trace trace.zip