playwright上手

内网如何安装项目依赖

注意：想运行 playwright需要下载相关浏览器的二进制文件

由于默认情况下，Playwright 会从 Microsoft CDN 下载浏览器二进制文件。

公司内网会阻止对公共资源的直接访问，所以不能直接通过内网进行下载。

解决办法：

在外网，创建一个文件夹随后在该目录下呼出命令行并输入 npm i -D @playwright/test

页面目录发生变化，并且命令行出现 added 193 packages in 15s 代表下载完成

随后命令行输入 npx playwright install 开始安装浏览器二进制依赖
待下载完成后进入到对应的目录，示例为：C:\Users\winches\AppData\Local\ms-playwright

将如图所示4个文件选中复制

将选中的4个文件粘贴到内网中的 ms-playwright 文件下

playwright 快速上手

Playwright介绍

Playwright是一个测试和自动化框架，可以实现网络浏览器的自动化交互。简而言之，您可以编写打开浏览器的代码，用代码实现使用所有网络浏览器的功能。自动化脚本可以实现导航到URL、输入文本、单击按钮和提取文本等功能。Playwright最令人惊喜的功能是它可以同时处理多个页面且不用等待，也不会被封锁。

Playwright支持大多数浏览器，例如Google Chrome、Firefox、使用Chromium内核的Microsoft Edge和使用WebKit内核的Safari。跨浏览器的网络自动化是Playwright的强项，可以为所有浏览器有效地执行相同的代码。此外，Playwright支持各种编程语言，例如Node.js、Python、Java和.NET。您可以编写代码用于打开网站并使用这些语言中的任何一种与之交互。

使用 `Node.js` 创建`playwright`项目

Playwright 有自己的 test runner用于端对端测试，我们称之为 Playwright Test.

初始化项目并安装 playwright/test库，只需要两个简单的命令既可以完成

npm init -y
npm i -D @playwright/test

创建一个简单的脚本 test-1.spec.ts

const { test, expect } = require('@playwright/test');// 测试用例
test('basic test', async ({ page }) => {// 打开一个页面并跳转到 https://playwright.dev/await page.goto('https://playwright.dev/');// 通过类选择器，选中类目为navbar__title的元素的innerTextconst name = await page.innerText('.navbar__title');// 断言校验是否匹配expect(name).toBe('Playwright');
});

现在运行你的测试脚本

npm playwright test

Playwright Test 刚刚使用 Chromium 浏览器以无GUI（headless）的方式运行了一个测试（Playwright Test）。让我们告诉它使用有GUI（headed）模式运行浏览器：

npx playwright test --headed

其他浏览器呢？让我们使用 Firefox 运行相同的测试（Playwright Test）：

npx playwright test --browser=firefox

最后，在所有三个浏览器上：

npx playwright test --browser=all

配置文档

要享受 Playwright Test 提供的所有功能，还需要创建一个配置文件 playwright.config.ts（或 playwright.config.js）。

下面是一些示例配置的介绍：

playwright.config.ts

import { PlaywrightTestConfig } from "@playwright/test";
let config: PlaywrightTestConfig = {   timeout: 6 * 60 * 1000,  // 每个测试用例超时 globalTimeout: 60 * 1000, // 总超时     testDir: "./demo",//测试目录     reporter: [["html", { outputFolder: "./", open: "always" }]],//测试报告  use: {      launchOptions: {            headless: false, //不是无头模式},         contextOptions: {           viewport: {   //窗口视野大小              width: 1400,                height: 900,            },      },      //baseURL: process.env.TENANT_URL, // 基础URL           screenshot: "only-on-failure", // 失败时截屏        trace: "retain-on-failure",// 失败时跟踪记录         browserName: "webkit", // 测试浏览器    },
};
export default config;

也可以通过 npm init playwright@latest 项目名 一键生成项目及配置

里面有开箱即用的配置

playwright.config.ts

import type { PlaywrightTestConfig } from '@playwright/test';
import { devices } from '@playwright/test';
const config: PlaywrightTestConfig = {/* 测试包含的目录 */testDir: './tests',/* 一个测试可以运行expect（）应等待满足条件的最长时间的最长时间 */timeout: 30 * 1000,expect: {/*** expect（）应等待满足条件的最长时间* 例如，在'await expect（locator）.toHaveText（）'*/timeout: 5000},/* 如果意外退出测试，则无法在CI上构建。只有在源代码中 */forbidOnly: !!process.env.CI,/* 仅在CI上重试 */retries: process.env.CI ? 2 : 0,/* 选择退出CI的并行测试 */workers: process.env.CI ? 1 : undefined,/* Reporter to use. See https://playwright.dev/docs/test-reporters */reporter: 'html',/* 下面所有项目的共享设置。 See https://playwright.dev/docs/api/class-testoptions. */use: {/* 每个操作（如“click（）”）可以花费的最长时间。默认值为0（无限制） */actionTimeout: 0,/* 在“等待页面”等操作中使用的基本URL。转到（“/”） */// baseURL: 'http://localhost:3000',/* 在重试失败的测试时收集跟踪. See https://playwright.dev/docs/trace-viewer

更多配置的信息可以查看：配置信息

Test fixtures

Test fixtures官网跳转

您注意到上面的测试脚本可以访问的参数 {page}：

test('basic test', async ({ page }) => {...
}

我们称这些参数为 fixtures.。Fixtures 是为每次测试运行创建的对象。Playwright Test 加载了这些 fixtures，您也可以添加自己的 fixtures。在运行测试时，Playwright Test 会查看每个测试声明，分析测试所需的 fixtures 并专门为测试准备这些 fixtures 。

以下是您可能常用的预定义 fixtures 的列表：

Fixture	Type	Description
page	Page	此测试运行的独立页面。
context	BrowserContext	此测试运行的隔离上下文。`page`也属于这种情况。了解如何配置上下文。
browser	Browser	浏览器在测试之间共享以优化资源。了解如何配置浏览器。
browserName	string	当前运行测试的浏览器的名称。要么`chromium`，`firefox`要么`webkit`。

测试和断言特性

如果您熟悉 Jest、Mocha 和 Ava 等测试运行程序，您会发现 Playwright Test 语法很熟悉。

Playwright Test 使用expect库进行测试断言。它使用特定于 Playwright 的匹配器对其进行了扩展，以实现更大的测试工程。

这些是您可以通过测试执行的基本操作：

聚焦测试

你可以集中一些测试。当有重点测试时，只有它们运行。

test.only('focus this test', async ({ page }) => {// 在整个项目中只运行重点测试。
});

跳过测试

你可以通过设置一些条件来跳过测试：

test('skip this test', async ({ page, browserName }) => {test.skip(browserName === 'firefox', 'Still working on it');
});

分组测试

您可以对测试进行分组以给它们一个逻辑名称或将范围之前/之后关联到组。

const { test, expect } = require('@playwright/test');test.describe('two tests', () => {test('one', async ({ page }) => {// ...});test('two', async ({ page }) => {// ...});
});

测试钩子（test hooks）

您可以使用 test.beforeAll 和 test.afterAll 钩子来设置和拆除测试之间共享的资源。您可以使用 test.beforeEach 和 test.afterEach 钩子分别为每个测试设置和拆除资源。

// example.spec.js
const { test, expect } = require('@playwright/test');test.describe('feature foo', () => {test.beforeEach(async ({ page }) => {// 在每次测试之前转到起始 url。await page.goto('https://my.start.url/');});test('my test', async ({ page }) => {// 断言使用 expect API。expect(page.url()).toBe('https://my.start.url/');});
});

写断言（expect）

Playwright Test 使用 expect 库进行测试断言。它提供了很多匹配器， toEqual, toContain, toMatch, toMatchSnapshot 等等。

将 expect 与各种 Playwright 方法相结合，来实现测试目标：

page.isVisible(selector[, options])#
page.waitForSelector(selector[, options])#
page.textContent(selector[, options])#
page.getAttribute(selector, name[, options])#
page.screenshot([options])#
在断言指南中了解更多信息

// example.spec.ts
import { test, expect } from '@playwright/test';test('my test', async ({ page }) => {await page.goto('https://playwright.dev/');// 期望标题“包含”子字符串。await expect(page).toHaveTitle(/Playwright/);// 期望属性“严格等于”该值。await expect(page.locator('text=Get Started').first()).toHaveAttribute('href', '/docs/intro');await page.click('text=Get Started');// 期望一些文本在页面上可见。await expect(page.locator('text=Introduction').first()).toBeVisible();
});

注意运行这个测试是如何输出的：

学习命令行

这里有常见的命令行参数.

Run tests in headed browsers（带浏览器UI模式运行）

npx playwright test --headed

Run tests in a particular browser（以指定的浏览器运行）

npx playwright test --browser=webkit

Run tests in all browsers（在所有浏览器运行测试）

npx playwright test --browser=all

Run a single test file（单测试文件）

npx playwright test tests/todo-page.spec.ts

Run a set of test files（多测试文件）

npx playwright test tests/todo-page/ tests/landing-page/

Run a test with specific title（使用特定的标题运行测试）

npx playwright test -g "add a todo item"

Run tests in parallel - that’s the default（并行测试-默认）

npx playwright test

Disable parallelization（禁用并行）

npx playwright test --workers=1

Choose a reporter

npx playwright test --reporter=html

Ask for help （请求帮忙）

npx playwright test --help

在调试模式下运行(GUI工具)

Playwright Inspector 是一个 GUI 工具，可帮助创作和调试 Playwright 脚本。

# Linux/macOS
PWDEBUG=1 npx playwright test# Windows with cmd.exe
set PWDEBUG=1
npx playwright test# Windows with PowerShell
$env:PWDEBUG=1
npx playwright test

自动生成测试代码

使用Playwright无需写一行代码，我们只需手动操作浏览器，它会录制我们的操作，然后自动生成代码脚本。

下面就是录制的命令codegen，仅仅一行。

npx playwright codegen wikipedia.org

执行 codegen 并运行浏览器。 Playwright Inspector 将记录用户交互动作并生成JavaScript代码 codegen 将尝试生成基于文本的弹性选择器。

（图示为）Playwright Inspector

codegen的用法可以使用--help查看，如果简单使用就是直接在命令后面加上url链接，如果有其他需要可以添加options。

options含义：

-o：将录制的脚本保存到一个文件
–target：规定生成脚本的语言，默认为 Playwright Test
-b：指定浏览器驱动

比如，我要在baidu.com搜索，用chromium驱动，将结果保存为test1.spec.ts的ts文件。

npx playwright codegen -b chromium -o ./test2.spec.ts --target=javascript

命令行输入后会自动打开浏览器，然后可以看见在浏览器上的一举一动都会被自动翻译成代码，如下所示。

通过 `vscode Playwright Test for VScode` 插件生成代码

通过在浏览器中执行测试操作来记录新的测试。

保留已验证状态

执行 codegen 并指定 --save-storage 参数来保存 cookies 和 localStorage。这对于单独记录身份验证步骤并在以后负复用它非常有用。

npx playwright codegen --save-storage=auth.json
# Perform authentication and exit.
# auth.json will contain the storage state.

使用 --load-storage 参数来加载先前的存储。通过这种方式，所有的 cookies 和 localStorage 将被恢复，使大多数web应用程序进入认证状态。

npx playwright open --load-storage=auth.json my.web.app
npx playwright codegen --load-storage=auth.json my.web.app
# Perform actions in authenticated state.

具有自定义设置的Codegen

如果你想在一些非标准的设置中使用codegen (例如, 使用 browserContext.route(url, handler)), 可以调用 page.pause() ，它将打开一个带有代码生成控件的单独窗口。

const { chromium } = require('playwright');(async () => {// Make sure to run headed.const browser = await chromium.launch({ headless: false });// Setup context however you like.const context = await browser.newContext({ /* pass any options */ });await context.route('**/*', route => route.continue());// Pause the page, and start recording manually.const page = await context.newPage();await page.pause();
})();

检查选择器（selectors）

在 open 或 codegen 期间，您可以在任何浏览器的developer tools控制台中使用以下API。

playwright.$(selector)

查询 Playwright 选择器，使用实际的 Playwright 查询引擎，例如：

> playwright.$('.auth-form >> text=Log in');<button>Log in</button>

playwright.$$(selector)

与相同playwright.$，但返回所有匹配的元素。

> playwright.$$('li >> text=John')> [<li>, <li>, <li>, <li>]

playwright.inspect(selector)

在 Elements 面板中显示元素（如果相应浏览器的 DevTools 支持它）。

> playwright.inspect('text=Log in')

playwright.selector(element)

为给定元素生成选择器。

> playwright.selector($0)"div[id="glow-ingress-block"] >> text=/.*Hello.*/"

playwright.locator(selector)

使用实际的 Playwright 查询引擎查询 Playwright 元素，例如：

> playwright.locator('.auth-form', { hasText: 'Log in' });> Locator ()
>   - element: button
>   - elements: [button]

调试工具（Debugging）

Playwright 脚本与现有的调试工具一起使用，例如 Node.js 调试器和浏览器开发工具。 Playwright 还为浏览器自动化引入了新的调试功能。

Playwright Inspector
Playwright Trace Viewer
Run in headed mode（以GUI模式运行）
Browser Developer Tools（浏览器开发工具）
Run in Debug Mode（在调试模式下运行）
Selectors in Developer Tools Console（开发者工具台中的选择器）
Visual Studio Code debugger (Node.js)（Visual Studio 代码调试器）
Verbose API logs（详细的API日志）

Playwright Inspector

Playwright Inspector 是一个 GUI 工具，可帮助创作和调试 Playwright 脚本。这是我们默认推荐的脚本故障排除工具。

Playwright Trace Viewer

Playwright Trace Viewer 是一个 GUI 工具，可帮助以事后分析的方式对测试运行进行故障排除.

浏览器开发工具（Browser Developer Tools）

您可以在 Chromium、Firefox 和 WebKit 中使用浏览器开发工具，同时以 GUI（Headed）模式运行 Playwright 脚本。开发人员工具有助于：

检查 DOM 树并查找元素选择器
在执行期间**查看控制台日志（**或了解如何通过 API 读取日志）
检查网络活动和其他开发人员工具功能

使用 page.pause() 方法是暂停 Playwright 脚本执行并在开发人员工具中检查页面的简单方法。它还将打开 Playwright Inspector 以帮助调试。

对于 Chromium: 您还可以通过启动选项打开开发人员工具。

await chromium.launch({ devtools: true });

⚠ 注意对于 WebKit：在执行期间启动 WebKit Inspector 将阻止 Playwright 脚本继续执行

开发者工具控制台中的选择器（Selectors in Developer Tools Console）

开发者工具控制台中的选择器

在调试模式下使用 PWDEBUG=console运行时，可在开发人员工具控制台中使用 playwright 对象。

使用 PWDEBUG=console 参数运行
设置断点暂停执行
在浏览器开发者工具中打开控制台面板
使用 playwright API
- playwright.$(selector):突出显示第一次出现的选择器内容。这反映了 page.$ 是如何看到页面的。
- playwright.$$(selector): 突出显示所有出现的选择器内容。这反映了 page.$$ 是如何看到页面的。
- playwright.inspect(selector): 检查“元素”面板中的选择器。
- playwright.clear(): 清除现有高亮标记。
- playwright.selector(element): 生成一个指向元素的选择器。

Visual Studio 代码调试器 (Node.js)

Visual Studio 代码调试器

VS Code 调试器可用于通过断点暂停和恢复 Playwright 脚本的执行。调试器可以通过两种方式进行配置。

支持的语言

Playwright API 支持多种语言

JavaScript and TypeScript
Python
Java
.NET

JavaScript and TypeScript#

支持 Playwright for Node.js .

Python#

支持 Playwright for Python.

Java#

支持 Playwright for Java.

.NET#

支持 Playwright for .NET.

「自动化测试」新一代 Web 前端自动化测试框架 —— playwright 快速上手，轻松带入项目相关推荐

web前端自动化测试（基于QT4W框架）
目录 web前端自动化测试(基于QT4W框架) 一.背景 1.1前端测试种类二.技术方案三.核心代码 3.1控件封装 3.2操作控件方法实现 3.3测试用例case 3.4断言方法 web前端自动 ...
2014年最受欢迎WEB前端UI框架
2014年已经过了一半,WEB前端受到更多人的观注,WEB前端也已经逐渐成为一种职业头衔! 相应的WEB前端UI框架更是受到新人追捧,下边为大家列出目前最受欢迎.最优秀的前端框架以供大家选择一款适合自 ...
web前端开源框架_9个用于前端Web开发的开源CSS框架
web前端开源框架当大多数人想到Web开发时,通常会想到HTML或JavaScript. 他们通常会忘记对访问网站的能力有更大影响的技术: 级联样式表(CSS) . 根据Wikipedia的说法,C ...
Web前端主流框架有哪些？哪种比较好？一文带你搞懂！
最近在某乎上看到这样一个问题--前端为什么会越来越复杂. 在评论中,看到一个回答,大意是这样的:相对于后端来说,前端的发展路径更容易分叉,总要有一种新的方法去解决一个新的问题.随着用户审美的提高,对产 ...
Python Flask Web教程002：Flask 快速上手
Flask Web教程002:Flask 快速上手 0. 前言 1. Web基础知识 2. 第一个flask web程序 3. 总结 0. 前言 web开发中有一些共同的功能,比如:数据库驱动.网页模 ...
web前端技术框架选型参考
一.出发点随着Web技术的不断发展,前端架构框架.UI框架.构建工具.CSS预处理等层出不穷,各有千秋.太多的框架在形成初期,都曾在web领域掀起过一场技术浪潮,可有些却仅仅是昙花一现,随着他们用 ...
一个jsp能取到父类jsp的值吗_「Javaweb」ssm整合权限控制框架shiro，你知道怎么做吗？...
为美好而努力--羊羽科技说. 最近在开发自己的网站,需要权限控制功能,在网上找了一下,找到了我接下来要介绍的shiro框架. shiro框架是Apache公司维护的开源产品之一,其官网对其的简介是这样 ...
腾讯Web前端JX框架入门教程(一)
什么是JX框架 JX框架(Javascript eXtension tools)是模块化的非侵入式Web前端框架,适用于Web Page和Web App项目的开发,特别适合构建和组织大规模.工业级的W ...
web 前端基本框架
一.web前端2018/12/06单词: password charset submit reset checkbox placeholder texteara radio ...

「自动化测试」新一代 Web 前端自动化测试框架 —— playwright 快速上手，轻松带入项目

playwright上手

内网如何安装项目依赖

playwright 快速上手

Playwright介绍

使用 `Node.js` 创建`playwright`项目

配置文档

Test fixtures

测试和断言特性

聚焦测试

跳过测试

分组测试

测试钩子（test hooks）

写断言（expect）

学习命令行

在调试模式下运行(GUI工具)

自动生成测试代码

通过 `vscode Playwright Test for VScode` 插件生成代码

保留已验证状态

具有自定义设置的Codegen

检查选择器（selectors）

playwright.$(selector)

playwright.$$(selector)

playwright.inspect(selector)

playwright.selector(element)

playwright.locator(selector)

调试工具（Debugging）

Playwright Inspector

Playwright Trace Viewer

浏览器开发工具（Browser Developer Tools）

开发者工具控制台中的选择器（Selectors in Developer Tools Console）

Visual Studio 代码调试器 (Node.js)

支持的语言

JavaScript and TypeScript#

Python#

Java#

.NET#

「自动化测试」新一代 Web 前端自动化测试框架 —— playwright 快速上手，轻松带入项目相关推荐

最新文章

热门文章

「自动化测试」新一代 Web 前端自动化测试框架 —— playwright 快速上手，轻松带入项目

playwright上手

内网如何安装项目依赖

playwright 快速上手

Playwright介绍

使用 Node.js 创建playwright项目

配置文档

Test fixtures

测试和断言特性

聚焦测试

跳过测试

分组测试

测试钩子（test hooks）

写断言（expect）

学习命令行

在调试模式下运行(GUI工具)

自动生成测试代码

通过 vscode Playwright Test for VScode 插件生成代码

保留已验证状态

具有自定义设置的Codegen

检查选择器（selectors）

playwright.$(selector)

playwright.$$(selector)

playwright.inspect(selector)

playwright.selector(element)

playwright.locator(selector)

调试工具（Debugging）

Playwright Inspector

Playwright Trace Viewer

浏览器开发工具（Browser Developer Tools）

开发者工具控制台中的选择器（Selectors in Developer Tools Console）

Visual Studio 代码调试器 (Node.js)

支持的语言

JavaScript and TypeScript#

Python#

Java#

.NET#

「自动化测试」新一代 Web 前端自动化测试框架 —— playwright 快速上手，轻松带入项目相关推荐

最新文章

热门文章

使用 `Node.js` 创建`playwright`项目

通过 `vscode Playwright Test for VScode` 插件生成代码