PlayWright是微軟開發(fā)的Web UI自動化測試框架。

它旨在提供一個跨平臺、跨語言、跨瀏覽器的自動化測試框架，同時也支持移動瀏覽器。

如其官方主頁所述：

• 自動等待、頁面元素智能斷言、執(zhí)行追蹤等功能，在處理網(wǎng)頁不穩(wěn)定方面非常有效。
• 它在與運行測試的進(jìn)程不同的進(jìn)程中控制瀏覽器，消除了進(jìn)程內(nèi)測試運行器的限制并支持 Shadow DOM 滲透。
• PlayWright 為每個測試創(chuàng)建一個瀏覽器上下文。瀏覽器上下文相當(dāng)于一個全新的瀏覽器配置文件，可以實現(xiàn)零成本的全面測試隔離。創(chuàng)建新的瀏覽器上下文只需幾毫秒。
• 提供代碼生成、逐步調(diào)試和跟蹤查看器等功能。

---

PlayWright vs. Selenium v??s. Cypress

當(dāng)今最好的 Web UI 自動化測試框架是什么？杰出的選項包括已有十年歷史的 Selenium、最近流行的 Cypress 以及我們在這里介紹的 PlayWright。它們有何不同？以下是總結(jié)對比供大家參考

主要比較：

• 支持的語言：PlayWright 和 Selenium 支持 Java、C# 和 Python，這使得它們在可能不熟悉 JavaScript/TypeScript 的測試工程師中更受歡迎。
• 技術(shù)方法：PlayWright 和 Selenium 都使用 Google 的遠(yuǎn)程調(diào)試協(xié)議來控制基于 Chromium 的瀏覽器。對于像 Firefox 這樣的瀏覽器，如果沒有這樣的協(xié)議，它們就會使用 JavaScript 注入。 Selenium 將其封裝在 Driver 中，而 PlayWright 直接調(diào)用它。另一方面，Cypress 使用 JavaScript 來控制瀏覽器。
• 瀏覽器支持：Selenium 支持 Internet Explorer，這與 IE 即將被淘汰無關(guān)。
• 易于使用：所有三個框架都有一個學(xué)習(xí)曲線。然而，與 Selenium 相比，PlayWright 和 Cypress 對于簡單場景更加用戶友好。

---

入門

雖然 PlayWright 支持多種語言，但它嚴(yán)重依賴 Node.js。無論您使用Python還是Java版本，PlayWright在初始化時都需要Node.js環(huán)境，下載Node.js驅(qū)動程序。因此，本指南我們將重點關(guān)注 JavaScript/TypeScript。

安裝與演示

1. 確保已安裝 Node.js。
2. 使用npm或yarn初始化PlayWright項目：

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

1. 按照提示操作：
   • 選擇 TypeScript 或 JavaScript（默認(rèn)：TypeScript）。
   • 指定測試目錄名稱。
   • 決定是否安裝PlayWright支持的瀏覽器（默認(rèn)：True）。

如果您選擇下載瀏覽器，PlayWright 將下載 Chromium、Firefox 和 WebKit，這可能需要一些時間。此過程僅在第一次設(shè)置期間發(fā)生，除非 PlayWright 版本已更新。

項目結(jié)構(gòu)

初始化后，您將得到一個項目模板：

playwright.config.ts    # PlayWright configuration file
package.json            # Node.js configuration file
package-lock.json       # Node.js dependency lock file
tests/                  # Your test directory
  example.spec.ts       # Template test case
tests-examples/         # Example tests directory
  demo-todo-app.spec.ts # Example test case

運行示例測試用例：

npx playwright test

測試靜默執(zhí)行（在無頭模式下），結(jié)果顯示為：

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/);
});

• 第一次測試：驗證頁面標(biāo)題包含“劇作家”。
• 第二次測試：單擊“開始”鏈接并驗證 URL。

每種測試方法都有：

• 測試名稱（例如“有標(biāo)題”）。
• 一個函數(shù)來執(zhí)行測試邏輯。

主要方法包括：

• page.goto：導(dǎo)航到 URL。
• Expect(page).toHaveTitle：斷言頁面標(biāo)題。
• page.getByRole：通過角色定位元素。
• wait：等待異步操作完成。

---

從命令行運行測試

以下是常用命令：

• 運行所有測試：

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

• 運行特定的測試文件：

playwright.config.ts    # PlayWright configuration file
package.json            # Node.js configuration file
package-lock.json       # Node.js dependency lock file
tests/                  # Your test directory
  example.spec.ts       # Template test case
tests-examples/         # Example tests directory
  demo-todo-app.spec.ts # Example test case

• 調(diào)試測試用例：

npx playwright test

---

代碼錄制

使用codegen功能記錄交互：

Running 6 tests using 6 workers

  6 passed (10s)

To open the last HTML report run:

  npx playwright show-report

錄制的代碼可以復(fù)制到您的文件中。注意：記錄器可能無法處理懸停等復(fù)雜操作。

---

深入劇作家指南

行動和行為

本節(jié)介紹一些用于與頁面元素交互的典型 Playwright 操作。請注意，前面介紹的定位器對象在創(chuàng)建過程中實際上并沒有在頁面上定位該元素。即使頁面上不存在該元素，使用元素定位器方法獲取定位器對象也不會引發(fā)任何異常。實際的元素查找僅在交互期間發(fā)生。這與 Selenium 的 findElement 方法不同，后者直接在頁面上搜索元素，如果找不到元素則拋出異常。

文字輸入

使用 fill 方法進(jìn)行文本輸入，主要針對 、 或具有 [contenteditable] 屬性的元素：<br>

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/);
});

復(fù)選框和單選按鈕

使用 locator.setChecked() 或 locator.check() 與 input[type=checkbox]、input[type=radio] 或具有 [role=checkbox] 屬性的元素進(jìn)行交互：

  npx playwright test

選擇控制

使用 locator.selectOption() 與 交互元素：

  npx playwright test landing-page.spec.ts

鼠標(biāo)點擊

基本操作：

  npx playwright test --debug

對于被其他人覆蓋的元素，請用力點擊：

npx playwright codegen https://leapcell.io/

或者以編程方式觸發(fā)點擊事件：

// Text input
await page.getByRole('textbox').fill('Peter');

鍵入字符

locator.type() 方法模擬逐個字符輸入，觸發(fā) keydown、keyup 和 keypress 事件：

await page.getByLabel('I agree to the terms above').check();

expect(await page.getByLabel('Subscribe to newsletter').isChecked()).toBeTruthy();

// Uncheck
await page.getByLabel('XL').setChecked(false);

特殊按鍵

使用 locator.press() 作為特殊鍵：

// Select by value
await page.getByLabel('Choose a color').selectOption('blue');

// Select by label
await page.getByLabel('Choose a color').selectOption({ label: 'Blue' });

// Multi-select
await page.getByLabel('Choose multiple colors').selectOption(['red', 'green', 'blue']);

支持的按鍵包括反引號、減號、等于、反斜杠、退格、制表符、刪除、轉(zhuǎn)義、ArrowDown、End、Enter、Home、Insert、PageDown、PageUp、ArrowRight、ArrowUp、F1-F12、Digit0-Digit9 和 KeyA -KeyZ。

文件上傳

使用locator.setInputFiles()指定要上傳的文件。支持多個文件：

// Left click
await page.getByRole('button').click();

// Double click
await page.getByText('Item').dblclick();

// Right click
await page.getByText('Item').click({ button: 'right' });

// Shift+click
await page.getByText('Item').click({ modifiers: ['Shift'] });

// Hover
await page.getByText('Item').hover();

// Click at specific position
await page.getByText('Item').click({ position: { x: 0, y: 0 } });

焦點元素

使用 locator.focus() 聚焦于某個元素：

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

拖放

拖放過程涉及四個步驟：

1. 將鼠標(biāo)懸停在可拖動元素上。
2. 按下鼠標(biāo)左鍵。
3. 將鼠標(biāo)移動到目標(biāo)位置。
4. 松開鼠標(biāo)左鍵。

您可以使用locator.dragTo()方法：

playwright.config.ts    # PlayWright configuration file
package.json            # Node.js configuration file
package-lock.json       # Node.js dependency lock file
tests/                  # Your test directory
  example.spec.ts       # Template test case
tests-examples/         # Example tests directory
  demo-todo-app.spec.ts # Example test case

或者，手動實施該過程：

npx playwright test

對話框處理

默認(rèn)情況下，Playwright 會自動取消警告、確認(rèn)和提示等對話框。您可以預(yù)先注冊一個對話框處理程序來接受對話框：

Running 6 tests using 6 workers

  6 passed (10s)

To open the last HTML report run:

  npx playwright show-report

處理新頁面

當(dāng)彈出新頁面時，可以使用popup事件來處理：

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/);
});

---

劇作家最佳平臺：Leapcell

Leapcell 是一個專為分布式應(yīng)用程序設(shè)計的現(xiàn)代云計算平臺。它采用按量付費模式，無閑置成本，確保您只需為使用的資源付費。

Leapcell 對劇作家應(yīng)用的獨特優(yōu)勢

1. 成本效率

   • 按需付費：低流量時避免資源浪費，高峰時自動擴(kuò)容。
   • 真實示例：例如，根據(jù) getdeploying.com 的計算，在傳統(tǒng)云服務(wù)中租用 1 vCPU 和 2 GB RAM 虛擬機的費用約為每月 25 美元。在 Leapcell 上，25 美元可以支持處理 694 萬個請求、平均響應(yīng)時間為 60 毫秒的服務(wù)，讓您物有所值。

2. 開發(fā)者體驗

   • 易于使用：直觀的界面，設(shè)置要求極低。
   • 自動化：簡化開發(fā)、測試和部署。
   • 無縫集成：支持 Go、Python、Node.js、Rust 等。

3. 可擴(kuò)展性和性能

   • 自動縮放：動態(tài)調(diào)整資源以保持最佳性能。
   • 異步優(yōu)化：輕松處理高并發(fā)任務(wù)。
   • 全球覆蓋：分布式數(shù)據(jù)中心支持低延遲訪問。

更多部署示例，請參閱文檔。

以上是Playwright：Web UI 自動化測試框架全面概述的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！