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

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

如其官方首頁所述：

• 自動等待、頁面元素智能斷言、執(zhí)行追蹤等功能，在處理網(wǎng)頁不穩(wěn)定方面非常有效。
• 它在與執(zhí)行測試的進(jìn)程不同的進(jìn)程中控制瀏覽器，消除了進(jìn)程內(nèi)測試執(zhí)行器的限制並支援 Shadow DOM 滲透。
• PlayWright 為每個測試建立一個瀏覽器上下文。瀏覽器上下文相當(dāng)於一個全新的瀏覽器設(shè)定文件，可以實現(xiàn)零成本的全面測試隔離。建立新的瀏覽器上下文只需幾毫秒。
• 提供程式碼產(chǎn)生、逐步偵錯和追蹤檢視器等功能。

---

PlayWright vs. Selenium v??ipress. Cypress

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

主要比較：

• 支援的語言：PlayWright 和 Selenium 支援 Java、C# 和 Python，這使得它們在可能不熟悉 JavaScript/TypeScript 的測試工程師中更受歡迎。
• 技術(shù)方法：PlayWright 和 Selenium 都使用 Google 的遠(yuǎn)端偵錯協(xié)定來控制基於 Chromium 的瀏覽器。對於像 Firefox 這樣的瀏覽器，如果沒有這樣的協(xié)議，它們就會使用 JavaScript 注入。 Selenium 將其封裝在 Driver 中，而 PlayWright 直接呼叫它。另一方面，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ū)動程式。因此，本指南我們將重點(diǎn)放在 JavaScript/TypeScript。

安裝與演示

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

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

1. 按照提示操作：
   • 選擇 TypeScript 或 JavaScript（預(yù)設(shè)：TypeScript）。
   • 指定測驗?zāi)夸浢Q。
   • 決定是否要安裝PlayWright支援的瀏覽器（預(yù)設(shè)：True）。

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

專案結(jié)構(gòu)

初始化後，您將得到一個項目範(fàn)本：

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

運(yùn)行範(fàn)例測試案例：

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

---

範(fàn)例原始碼

這是 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)題包含「劇作家」。
• 第二次測試：點(diǎn)擊「開始」連結(jié)並驗證 URL。

每種測試方法都有：

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

主要方法包括：

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

---

從命令列運(yùn)行測試

以下是常用指令：

• 執(zhí)行所有測試：

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

• 執(zhí)行特定的測試檔案：

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

---

程式碼錄製

使用codegen功能記錄互動：

Running 6 tests using 6 workers

  6 passed (10s)

To open the last HTML report run:

  npx playwright show-report

錄製的程式碼可以複製到您的檔案中。注意：記錄器可能無法處理懸停等複雜操作。

---

深入劇作家指南

行動和行為

本節(jié)介紹一些典型的 Playwright 操作與頁面元素互動。請注意，前面介紹的定位器物件在建立過程中實際上並沒有在頁面上定位該元素。即使頁面上不存在該元素，使用元素定位器方法取得定位器物件也不會引發(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/);
});

複選框和單選按鈕

使用 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

滑鼠點(diǎn)擊

基本操作：

  npx playwright test --debug

對於被其他人覆蓋的元素，請用力點(diǎn)擊：

npx playwright codegen https://leapcell.io/

或以程式方式觸發(fā)點(diǎn)擊事件：

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

焦點(diǎn)元素

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

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

拖放

拖放過程涉及四個步驟：

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

您可以使用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

對話方塊處理

預(yù)設(shè)情況下，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)代雲(yún)端運(yùn)算平臺。它採用按量付費(fèi)模式，無閒置成本，確保您只需為使用的資源付費(fèi)。

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

1. 成本效率

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

2. 開發(fā)者體驗

   • 易於使用：直覺的介面，設(shè)定要求極低。
   • 自動化：簡化開發(fā)、測試和部署。
   • 無縫整合：支援 Go、Python、Node.js、Rust 等。

3. 可擴(kuò)充性和效能

   • 自動縮放：動態(tài)調(diào)整資源以保持最佳效能。
   • 非同步最佳化：輕鬆處理高並發(fā)任務(wù)。
   • 全球覆蓋：分散式資料中心支援低延遲存取。

更多部署範(fàn)例，請參閱文件。

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