Playwright：Web UI 自動化測試框架全面概述

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

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

如其官方首頁所述：

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

PlayWright vs. Selenium v​​ipress. Cypress

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

主要比較：

• 支援的語言：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。

安裝與演示

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

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

1. 按照提示操作：
   • 選擇 TypeScript 或 JavaScript（預設：TypeScript）。
   • 指定測驗目錄名稱。
   • 決定是否要安裝PlayWright支援的瀏覽器（預設：True）。

如果您選擇下載瀏覽器，PlayWright 將下載 Chromium、Firefox 和 WebKit，這可能需要一些時間。此過程僅在第一次設定期間發生，除非 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

運行範例測試案例：

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：等待非同步操作完成。

從命令列運行測試

以下是常用指令：

• 執行所有測試：

   # 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

• 偵錯測試案例：

npx playwright test

程式碼錄製

使用codegen功能記錄互動：

Running 6 tests using 6 workers

  6 passed (10s)

To open the last HTML report run:

  npx playwright show-report

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

深入劇作家指南

行動和行為

本節介紹一些典型的 Playwright 操作與頁面元素互動。請注意，前面介紹的定位器物件在建立過程中實際上並沒有在頁面上定位該元素。即使頁面上不存在該元素，使用元素定位器方法取得定位器物件也不會引發任何異常。實際的元素查找僅在互動期間發生。這與 Selenium 的 findElement 方法不同，後者直接在頁面上搜尋元素，如果找不到元素則拋出異常。

文字輸入

使用 fill 方法進行文字輸入，主要針對 、 或具有 [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] 屬性的元素進行交互：

  npx playwright test

選擇控制

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

  npx playwright test landing-page.spec.ts

滑鼠點擊

基本操作：

  npx playwright test --debug

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

npx playwright codegen https://leapcell.io/

或以程式方式觸發點擊事件：

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

鍵入字元

locator.type() 方法模擬逐個字元輸入，觸發 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']);

支援的按鍵包括反引號、減號、等於、反斜線、退格、製表符、刪除、轉義、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. 將滑鼠停留在可拖曳元素上。
2. 按下滑鼠左鍵。
3. 將滑鼠移到目標位置。
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

對話方塊處理

預設情況下，Playwright 會自動取消警告、確認和提示等對話方塊。您可以預先註冊一個對話框處理程序來接受對話框：

Running 6 tests using 6 workers

  6 passed (10s)

To open the last HTML report run:

  npx playwright show-report

處理新頁面

當新頁面彈出時，可以使用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 是一個專為分散式應用程式設計的現代雲端運算平台。它採用按量付費模式，無閒置成本，確保您只需為使用的資源付費。

Leapcell 對劇作家應用的獨特優勢

1. 成本效率

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

2. 開發者體驗

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

3. 可擴充性和效能

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

更多部署範例，請參閱文件。

以上是Playwright：Web UI 自動化測試框架全面概述的詳細內容。更多資訊請關注PHP中文網其他相關文章！