Playwright:Web UI 自动化测试框架全面概述

playwright是微软开发的web ui自动化测试框架。

它旨在提供一个跨平台、跨语言、跨浏览器的自动化测试框架,同时也支持移动浏览器。

image description

如其官方主页所述:

自动等待、页面元素智能断言、执行追踪等功能,在处理网页不稳定方面非常有效。它在与运行测试的进程不同的进程中控制浏览器,消除了进程内测试运行器的限制并支持 shadow dom 渗透。playwright 为每个测试创建一个浏览器上下文。浏览器上下文相当于一个全新的浏览器配置文件,可以实现零成本的全面测试隔离。创建新的浏览器上下文只需几毫秒。提供代码生成逐步调试跟踪查看器等功能。

playwright vs. selenium v​​s. cypress

当今最好的 web ui 自动化测试框架是什么?杰出的选项包括已有十年历史的 selenium、最近流行的 cypress 以及我们在这里介绍的 playwright。它们有何不同?以下是总结对比供大家参考

feature playwright selenium cypress

supported languagesjavascript, java, c#, pythonjavascript, java, c#, python, rubyjavascript/typescriptsupported browserschrome, edge, firefox, safarichrome, edge, firefox, safari, iechrome, edge, firefox, safaritesting frameworkframeworks for supported languagesframeworks for supported languagesframeworks for supported languagesusabilityeasy to use and configurecomplex setup with a learning curveeasy to use and configurecode complexitysimplemoderatesimpledom manipulationsimplemoderatesimplecommunity maturityimproving graduallyhighly maturefairly matureheadless mode supportyesyesyesconcurrency supportsupportedsupporteddepends on ci/cd toolsiframe supportsupportedsupportedsupported via pluginsdrivernot requiredrequires a browser-specific drivernot requiredmulti-tab operationssupportednot supportedsupporteddrag and dropsupportedsupportedsupportedbuilt-in reportingyesnoyescross-origin supportsupportedsupportedsupportedbuilt-in debuggingyesnoyesautomatic waityesnoyesbuilt-in screenshot/videoyesno video recordingyes

主要比较:

支持的语言:playwright 和 selenium 支持 java、c# 和 python,这使得它们在可能不熟悉 javascript/typescript 的测试工程师中更受欢迎。技术方法:playwright 和 selenium 都使用 google 的远程调试协议来控制基于 chromium 的浏览器。对于像 firefox 这样的浏览器,如果没有这样的协议,它们就会使用 javascript 注入。 selenium 将其封装在 driver 中,而 playwright 直接调用它。另一方面,cypress 使用 javascript 来控制浏览器。浏览器支持:selenium 支持 internet explorer,这与 ie 逐渐被淘汰无关。易于使用:所有三个框架都有一个学习曲线。然而,与 selenium 相比,playwright 和 cypress 对于简单场景更加用户友好。

入门

虽然 playwright 支持多种语言,但它严重依赖 node.js。无论您使用python还是java版本,playwright在初始化时都需要node.js环境,下载node.js驱动程序。因此,本指南我们将重点关注 javascript/typescript

安装与演示

确保已安装 node.js。使用npm或yarn初始化playwright项目:

   # using npm   npm init playwright@latest   # using yarn   yarn create playwright

按照提示操作:选择 typescriptjavascript(默认:typescript)。指定测试目录名称。决定是否安装playwright支持的浏览器(默认:true)。

如果您选择下载浏览器,playwright 将下载 chromium、firefox 和 webkit,这可能需要一些时间。此过程仅在第一次设置期间发生,除非 playwright 版本已更新。

项目结构

初始化后,您将得到一个项目模板:

playwright.config.ts    # playwright configuration filepackage.json            # node.js configuration filepackage-lock.json       # node.js dependency lock filetests/                  # your test directory  example.spec.ts       # template test casetests-examples/         # example tests directory  demo-todo-app.spec.ts # example test case

运行示例测试用例:

npx playwright test

测试静默执行(在无头模式下),结果显示为:

running 6 tests using 6 workers  6 passed (10s)to open the last html report run:  npx playwright show-report

示例源代码

这是 example.spec.ts 测试用例:

import { test, expect } from '@playwright/test';test('has title', async ({ page }) => {  await page.goto('https://playwright.dev/');  await expect(page).tohavetitle(/playwright/);});test('get started link', async ({ page }) => {  await page.goto('https://playwright.dev/');  await page.getbyrole('link', { name: 'get started' }).click();  await expect(page).tohaveurl(/.*intro/);});

第一次测试:验证页面标题包含“剧作家”。第二次测试:单击“开始”链接并验证 url。

每种测试方法都有:

测试名称(例如“有标题”)。一个函数来执行测试逻辑。

主要方法包括:

page.goto:导航到 url。expect(page).tohavetitle:断言页面标题。page.getbyrole:通过角色定位元素。wait:等待异步操作完成。

从命令行运行测试

以下是常用命令:

运行所有测试:

  npx playwright test

运行特定的测试文件:

  npx playwright test landing-page.spec.ts

调试测试用例:

  npx playwright test --debug

代码录制

使用codegen功能记录交互:

npx playwright codegen https://leapcell.io/

录制的代码可以复制到您的文件中。注意:记录器可能无法处理悬停等复杂操作。

深入剧作家指南

行动和行为

本节介绍一些与页面元素交互的典型 playwright 操作。请注意,前面介绍的定位器对象在创建过程中实际上并没有在页面上定位该元素。即使页面上不存在该元素,使用元素定位器方法获取定位器对象也不会引发任何异常。实际的元素查找仅在交互期间发生。这与 selenium 的 findelement 方法不同,后者直接在页面上搜索元素,如果找不到元素则抛出异常。

文字输入

使用fill方法进行文本输入,主要针对、