Playwright 项目实战 - 01 初识

导言
最近工作上要上UI自动化，对比了几个成熟框架之后，决定使用playwright。后续会结合项目，对playwright的使用进行总结。

一、产品简介

作为微软开源的自动化测试工具，光环满满，正所谓 微软出品，必属精品。

官网给出的slogan是 真正意义上的端到端的工具。（也不知道是在阴阳谁~）

看下产品的特点：

• 支持多浏览器： 通过对Chromium、WebKit 和 Firefox的渲染引擎，实现多浏览器的支持
• 跨平台： 支持在Windows、macOS、Linux上进行本地/CI测试，有头/无头运行
• 多语言： 支持TS、JS、Python、Java
• 自动等待： Playwright等待元素可操作后再执行操作。它还具有丰富的自省事件集。两者的结合消除了人为超时的需要——这是测试不稳定的主要原因。
• Web 优先断言： 断言专为动态 Web 创建。检查会自动重试，直到满足必要条件为止。
• 跟踪： 配置测试重试策略，捕获执行跟踪、视频、屏幕截图以消除缺陷。
• 独立进程： 满足多个标签、多个来源和多个用户的测试场景。为不同的用户创建具有不同上下文的场景，彼此隔离。
• 可信事件： 悬停元素，与动态控件交互，产生可信事件。Playwright 使用与真实用户无法区分的真实浏览器输入管道。
• 浏览器上下文： 为每个测试创建一个浏览器上下文。浏览器上下文相当于一个全新的浏览器配置文件。这可以实现完全的测试隔离，且无需任何开销。创建新的浏览器上下文仅需几毫秒。
• 一次登录： 保存上下文的身份验证状态并在所有测试中重复使用。这样可以绕过每个测试中的重复登录操作，同时实现独立测试的完全隔离。
• Codegen： GUI形式记录操作，自动转成测试代码。
• 定位器： 检查页面，生成选择器，逐步执行测试执行，查看点击点，探索执行日志。
• 跟踪检查器： 捕获所有信息以调查测试失败。Playwright 跟踪包含测试执行截屏录像、实时 DOM 快照、操作资源管理器、测试源等。

二、竞品对比

• Selenium： 把HP的QTP市场份额挤压到渣渣的老牌扛把子，独领风骚数十年。只要你不计较时间成本和代码成本，基本可以满足你的一切需求。
• Cypress： 一个纯粹基于js的UI自动化测试工具，有一定的局限性，包括支持的语言、浏览器、社群相对较小、页签切换等。
• Playwright： 快、轻巧、稳定性好，大有“超英赶美”的趋势。

三、推荐心得

几款自动化工具之前都有涉猎并都成功投产到项目中去，整体感觉下来：

• Cypress是上手及推广难度最高的一个，光开发语言受限，就劝退了好多人，尤其是团队开发的时候。还有好多业务场景都得 变相取巧 才能实现，感觉有点违背UI自动化的初心。感觉更适合前端开发用于单元自测使用。
• Selenium感觉不用多说了，功能强大是真的强大，但项目重，也是真的重，自由深蹲180kg那么重，而且..也不稳定，想想就累。项目上只要跳进这个坑，除非离职，否则根本爬不出来。也有好处，就是实战后不用再背八股文了，什么显示等待、隐式等待、iframe切换，用明白了就不怕面试了。
• Playwright相对而言，上手快、文档全、稳定性高、二开少、写起来歘欻欻的。GUI稳的一匹，没人要求代码风格优雅的情况下，直接录制粘贴，改都不用改就能稳定跑。也不用什么八大定位方法，playwright的选择器直接穿透 Shadow DOM 并允许无缝进入框架。而且内置异步请求、断言响应，主要是对自动等待的处理简直不要太友好，还有跟踪检查录制，结合报告/预警事半功倍。

四、安装部署

安装pytest插件
pip install pytest-playwright

安装 playwright
pip install playwright

安装浏览器
python -m playwright install

注意避坑📢
建议参考官网推荐，使用配置

• Python 3.8 或更高版本。
• Windows 10+、Windows Server 2016+ 或 Windows Subsystem for Linux (WSL)。
• MacOS 12 Monterey、MacOS 13 Ventura 或 MacOS 14 Sonoma。
• Debian 11、Debian 12、Ubuntu 20.04 或 Ubuntu 22.04。
  之前本地docker调试好，放Linux上，因为centOS系统，升级了一大堆乱七八糟的东西，费时费力...听劝，乖~

五、简单demo

这块偷懒用官网的一个例子示意一下，后面的文章会结合项目进行分享~

import re
from playwright.sync_api import Page, expect

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

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

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

    # Click the get started link.
    page.get_by_role("link", name="Get started").click()

    # Expects page to have a heading with the name of Installation.
    expect(page.get_by_role("heading", name="Installation")).to_be_visible()

六、Codegen使用

我可是太爱用这个了，尤其是现在前端项目用了Mantine组件后（这个组件对自动化是真不友好）。

启动命令：后面直接拼URL即可，这里用的我司的 歌者 PPT 产品做个示例
playwright codegen https://gezhe.com/

录制页面如下，左边是正常浏览器渲染效果，右边是对应测试代码生成。

在左侧页面上停留在任意元素上，都会自动hover出定位器的代码。这个在初始刚接触playwright的时候特别友好~ 在中期摸鱼的时候特别方便~

七、参考资料

官方：https://playwright.dev/