Playwright：你必须知道的自动化测试

欢迎大家来到IT世界,在知识的湖畔探索吧!

如果您喜欢自动化和测试应用程序，那么市场上有一种新工具可以吸引您的注意力并满足您对测试自动化的需求。

Playwright 是一个开源、强大且可靠的框架，用于对现代 Web 应用程序执行端到端自动化测试。它充满了诸如

• 在所有现代渲染引擎上进行跨浏览器测试，包括 Chromium、WebKit 和 Firefox
• 在 Windows、Linux 和 macOS 上进行跨平台测试，本地或 CI，有头或无头
• JavaScript、TypeScript、Java、Python 和 .Net 中的跨语言支持
• 移动网络测试
• 自动等待，导致没有片状测试
• Web-first 断言，自动重试
• 捕获执行跟踪、视频、屏幕截图
• 生成自定义测试报告
• 支持各种开发IDE和编辑器

从https://playwright.dev/了解更多信息

Playwright入门

Playwright 安装、配置和创建我们的第一个测试非常容易上手。我们可以选择使用 Eclipse、WebStorm、IntelliJ、VSCode 或任何其他可选择语言（JavaScript、TypeScript、Java、Python 和 .Net）的 IDE。

我们将在这里看到如何将Playwright 与 TypeScript 和 VSCode 一起使用。

先决条件

• 从https://nodejs.org/en/download/下载Node.js并安装在机器上
• 从https://code.visualstudio.com/下载VSCode（Visual Studio Code）并安装在机器上

安装Playwright的步骤

1. 在机器中的所需位置创建一个名为Learn_PlayWright的新项目文件夹
2. 打开 VSCode IDE 并打开项目文件夹Learn_PlayWright
3. 让我们更改 VSCode 中的图标包，以查看不同文件格式的漂亮而独特的图标使用快捷键 CTRL + SHIFT + X导航到扩展 ，搜索VSCode Great Icons并单击“安装”按钮使用快捷键CTRL + SHIFT + P打开命令面板键入“首选项：文件图标主题”并从填充列表中选择“ VSCode Great Icons ”
4. 让我们安装 Playwright导航到扩展，搜索Playwright选择“Playwright Test for VSCode”并点击“安装”按钮打开命令面板输入“ playwright ”并选择“测试：安装 Playwright ”选择要安装的浏览器 将出现一个终端窗口。出现提示时，键入“ Y ”继续。这将安装所有必要的 Playwright 库并创建我们的第一个自动化测试，以及必要的配置文件

欢迎大家来到IT世界,在知识的湖畔探索吧!

创建我们的第一个测试

1. 打开example.spec.ts 文件并尝试了解第一个自动化测试。看这么长的代码，不学playwright命令，真是让人不知所措
2. 让我们将这段代码放在一边以备将来参考并创建一个新测试
3. 在测试 文件夹下创建一个名为“ my1stTest.spec.ts ”的新文件
4. 下面是测试文件的代码：

import { test, expect, Page } from ‘@playwright/test’;

test.beforeEach(async ({ page }) => {

await page.goto(‘https://demo.playwright.dev/todomvc’);

});

test.describe(‘Add To Do Item’, () => {

test(‘should allow me to add to do item’, async ({ page }) => {

// Create a new to do item

await page.locator(‘.new-todo’).fill(“Do homework”);

await page.locator(‘.new-todo’).press(‘Enter’);

// Make sure the list only has one to do item

await expect(page.locator(‘.view label’)).toHaveText(“Do homework”);

})

});

执行我们的第一个测试

技术01：

右键单击第 7 行或第 8 行的左侧开头

从可用选项中选择“运行测试”

测试执行将在左侧面板上发生和更新

技术02：

1. 打开终端窗口，输入命令

npx 编剧测试 my1stTest.spec.ts

2、测试执行，浏览器打开标准测试报告

按照 playwright.config.ts 文件中的默认配置，

• 测试并行运行
• 默认报告是 HTML
• 测试在所有三种浏览器（Chromium、Firefox、WebKit）上以无头模式运行

我们可以根据需要更改配置。例如，使用无头：false

Playwright的有趣特征

1.录制脚本

Playwright有一个功能，可以记录用户交互和生成代码片段。

打开终端窗口并输入命令

npx Playwright codegen demo.playwright.dev/todomvc

这将在新的浏览器窗口中打开测试应用程序“
demo.playwright.dev/todomvc
”以及Playwright Inspector 窗口。

默认情况下，开始录制。一旦我们在应用程序中导航并执行用户交互，每一步都将记录在 Playwright Inspector 中。它具有开始/暂停/停止录制的选项以及生成代码的语言选择。

现在，将录制的脚本复制到一个新的测试文件“ myRecordedTest.spec.ts ”中。我们可以根据需要自定义测试并执行测试。

2. 录制测试执行视频

Playwright 能够为整个测试执行录制视频并将其保存在所需的位置。我们可以修改浏览器上下文并指定视频设置。在测试结束时关闭上下文也很重要。

下面是测试文件的代码：

import { chromium, test, expect } from '@playwright/test'; let browser = null; let context = null; let page = null; test.describe('Add To Do Item', () => { test('Launch the browser', async() => { browser = await chromium.launch({ headless: false }) context = await browser.newContext({ recordVideo: { dir: './videos/', size: { width: 640, height: 480 }, } }); page = await context.newPage(); await page.goto('https://demo.playwright.dev/todomvc'); }) test('should allow me to add to do item', async () => { // Create a new to do item await page.locator('.new-todo').fill("Do homework"); await page.locator('.new-todo').press('Enter'); // Make sure the list only has one to do item await expect(page.locator('.view label')).toHaveText("Do homework"); await context.close(); await browser.close(); }); });

欢迎大家来到IT世界,在知识的湖畔探索吧!

在此代码中，我们在测试代码中指定了浏览器详细信息和上下文。我们希望这两个测试都按顺序进行。因此，更新 playwright.config.ts 中的fullyParallel : false属性

执行后，打开视频 文件夹，播放录制的视频。该视频将包含整个测试执行过程。

3. 截图

Playwright 能够截取元素或整个页面的屏幕截图并将它们保存在所需的位置。

下面是测试文件的代码：

欢迎大家来到IT世界,在知识的湖畔探索吧!await page.screenshot({ path: Date.now() + 'loginPageScreenshot.png', fullPage: true }); await page.locator('.header').screenshot({ path: Date.now() + 'headerElementScreenshot.png' });

4.各种编剧测试配置

我们可以使用各种配置和选项自定义playwright.config.ts文件，例如测试目录、测试超时、断言超时、并行执行、测试失败时的重试次数、HTML 和 JSON 等报告类型、无头设置、自动截图、视频捕获和跟踪捕获失败。

这是 playwright.config.ts 文件的代码：

const config: PlaywrightTestConfig = {
  /* path of all the test files */
  testDir: './tests',
  /* Maximum time one test can run for. */
  timeout: 30 * 1000,
  expect: {
    /* Maximum time expect() should wait for the condition to be met. */
    timeout: 5000
  },
  /* Run tests in files in parallel */
  fullyParallel: false,
  /* Retry */
  retries: 2,
  /* Reporter to use */
  reporter: [["dot"],["json", { outputFile: "test-result.json"}],["html"]],
  use: {
    headless: false,
    screenshot: "only-on-failure",
    video: "retain-on-failure",
    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
    actionTimeout: 0,
    /* Collect trace when retrying the failed test. */
    trace: 'on-first-retry',
  },
};

下面是测试文件的代码：

欢迎大家来到IT世界,在知识的湖畔探索吧!import { test, expect } from '@playwright/test'; test.beforeEach(async ({ page }) => { await page.goto('https://demo.playwright.dev/todomvc'); }); test.describe('Add To Do Item', () => { test('should allow me to add to do item', async ({ page }) => { // Create a new to do item await page.locator('.new-todo').fill("Do homework"); await page.locator('.new-todo').press('Enter'); // Make sure the list only has one to do item await expect(page.locator('.view label')).toHaveText("Do homwork"); }); });

观察index.html文件、test-result.json文件和test-results文件夹，其中包含2 次重试执行失败测试的屏幕截图 和视频 。

5.视觉比较

Playwright 有能力制作和直观地比较屏幕截图。在第一次执行中，它会生成参考屏幕截图，然后在后续执行中进行视觉比较。它使用带有各种选项的像素匹配 库。

await expect(page).toHaveScreenshot();

此命令将捕获页面截图，测试失败，并将截图保存在项目目录中作为参考。在随后的执行中，它将获取页面截图并与参考截图进行逐像素比较。

如果我们重命名参考截图，我们必须修改上面的命令。

欢迎大家来到IT世界,在知识的湖畔探索吧!await expect(page).toHaveScreenshot('newPage.png');

如果应用页面被修改，我们可以使用命令更新我们的参考截图

npx playwright test –update-snapshots

我们还可以指定最大允许的视觉差异。

await expect(page).toHaveScreenshot({ maxDiffPixels: 100 });

6. 相对定位器

它允许我们根据页面布局定位元素。与 CSS 选择器结合使用时非常有用。

欢迎大家来到IT世界,在知识的湖畔探索吧!// Fill an input to the right of "Email". await page.locator('input:right-of(:text("Email"))').fill('data'); // Click a button near the FAQs. await page.locator('button:near(.faqs)').click(); // Click the button in the list closest to the "Subject". await page.locator('[type=radio]:left-of(:text("Subject"))').first().click();

除了相对定位器，它还为我们提供

• 文本选择器
• CSS 选择器
• 选择可见元素
• 选择包含其他元素的元素
• 增强现有定位器
• 在 Shadow DOM 中选择元素
• 通过标签文本选择元素
• XPath 选择器
• 第 N 个元素选择器
• 反应选择器
• Vue 选择器
• 角色选择器
• 链接选择器

从
https://playwright.dev/docs/selectors了解更多信息

7. 处理 HTTP 认证

Playwright 拥有可以监控和修改网络流量的API 。它可以处理 HTTP 身份验证、HTTP 代理、处理、修改和中止请求、修改响应以及与 WebSocket 一起工作。

我们可以通过修改浏览器上下文在我们的测试应用程序中处理 HTTP 身份验证。

下面是测试文件的代码：

test('Launch the browser', async() => { browser = await chromium.launch({ headless: false }) const context = await browser.newContext({ httpCredentials: { username: 'myUserName', password: 'myPassword', }, }); page = await context.newPage(); await page.goto('https://demo.playwright.dev/todomvc');     })

8. 从图像中提取文本

在某些应用程序中，我们会遇到 text() 属性不起作用的文本元素。原因是这些元素不是文本元素，而是伪元素（多个元素的组合）。要从此类元素中获取文本，我们需要使用名为Tesseract JS的第三方库。这个库支持超过 100 种语言，可以在浏览器 或NodeJS 服务器中运行。

要安装 Tesseract JS，请运行命令

npm install tesseract.js

我们可以通过截屏将伪元素转换为图像。然后使用Tesseract 识别命令将图像转换为文本。

下面是测试文件的代码：

欢迎大家来到IT世界,在知识的湖畔探索吧!const Tesseract = require('tesseract.js'); import { test } from '@playwright/test'; test.describe('Convert Image to Text', () => { test('Test 01', async ({ page }) => { await page.goto('https://mySampleTestApplication'); const imageElement = await page.locator('.image'); const name = Date.now(); await imageElement.screenshot({ path: `${name}.png` }); await convertToText(`${name}.png`); }); }); async function convertToText(name: string) { let imgText = await Tesseract.recognize(`./${name}`); };

每个人都可以在 Playwright 中学习和探索很多东西。

让我们和Playwright一起玩吧。快乐学习！！