PlayWright是微軟開(kāi)發(fā)的Web UI自動(dòng)化測(cè)試框架。

它旨在提供一個(gè)跨平臺(tái)、跨語(yǔ)言、跨瀏覽器的自動(dòng)化測(cè)試框架，同時(shí)也支援行動(dòng)瀏覽器。

如其官方首頁(yè)所述：

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

---

PlayWright vs. Selenium v??ipress. Cypress

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

主要比較：

• 支援的語(yǔ)言：PlayWright 和 Selenium 支援 Java、C# 和 Python，這使得它們?cè)诳赡懿皇煜?JavaScript/TypeScript 的測(cè)試工程師中更受歡迎。
• 技術(shù)方法：PlayWright 和 Selenium 都使用 Google 的遠(yuǎn)端偵錯(cuò)協(xié)定來(lái)控制基於 Chromium 的瀏覽器。對(duì)於像 Firefox 這樣的瀏覽器，如果沒(méi)有這樣的協(xié)議，它們就會(huì)使用 JavaScript 注入。 Selenium 將其封裝在 Driver 中，而 PlayWright 直接呼叫它。另一方面，Cypress 使用 JavaScript 來(lái)控制瀏覽器。
• 瀏覽器支援：Selenium 支援 Internet Explorer，這與 IE 即將被淘汰無(wú)關(guān)。
• 易於使用：所有三個(gè)框架都有一個(gè)學(xué)習(xí)曲線。然而，與 Selenium 相比，PlayWright 和 Cypress 對(duì)於簡(jiǎn)單場(chǎng)景更加用戶友好。

---

入門(mén)

雖然 PlayWright 支援多種語(yǔ)言，但它嚴(yán)重依賴 Node.js。無(wú)論您使用Python還是Java版本，PlayWright在初始化時(shí)都需要Node.js環(huán)境，下載Node.js驅(qū)動(dòng)程式。因此，本指南我們將重點(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）。
   • 指定測(cè)驗(yàn)?zāi)夸浢Q。
   • 決定是否要安裝PlayWright支援的瀏覽器（預(yù)設(shè)：True）。

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

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

初始化後，您將得到一個(gè)項(xiàng)目範(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)例測(cè)試案例：

npx playwright test

測(cè)試靜默執(zhí)行（在無(wú)頭模式下），結(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 測(cè)試用例：

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

• 第一次測(cè)驗(yàn)：驗(yàn)證頁(yè)標(biāo)題包含「劇作家」。
• 第二次測(cè)試：點(diǎn)擊「開(kāi)始」連結(jié)並驗(yàn)證 URL。

每種測(cè)試方法都有：

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

主要方法包括：

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

---

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

以下是常用指令：

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

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

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

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

• 偵錯(cuò)測(cè)試案例：

npx playwright test

---

程式碼錄製

使用codegen功能記錄互動(dòng)：

Running 6 tests using 6 workers

  6 passed (10s)

To open the last HTML report run:

  npx playwright show-report

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

---

深入劇作家指南

行動(dòng)和行為

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

文字輸入

使用 fill 方法進(jìn)行文字輸入，主要針對(duì) 、 或具有 [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() 與 互動(dòng)元素：

  npx playwright test landing-page.spec.ts

滑鼠點(diǎn)擊

基本操作：

  npx playwright test --debug

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

npx playwright codegen https://leapcell.io/

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

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

鍵入字元

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

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

文件上傳

使用locator.setInputFiles()指定要上傳的檔案。支援多個(gè)文件：

// 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() 聚焦在某個(gè)元素：

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

拖放

拖放過(guò)程涉及四個(gè)步驟：

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

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

或者，手動(dòng)實(shí)作該流程：

npx playwright test

對(duì)話方塊處理

預(yù)設(shè)情況下，Playwright 會(huì)自動(dòng)取消警告、確認(rèn)和提示等對(duì)話方塊。您可以預(yù)先註冊(cè)一個(gè)對(duì)話框處理程序來(lái)接受對(duì)話框：

Running 6 tests using 6 workers

  6 passed (10s)

To open the last HTML report run:

  npx playwright show-report

處理新頁(yè)面

當(dāng)新頁(yè)面彈出時(shí)，可以使用popup事件來(lái)處理：

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

---

劇作家最佳平臺(tái)：Leapcell

Leapcell 是一個(gè)專為分散式應(yīng)用程式設(shè)計(jì)的現(xiàn)代雲(yún)端運(yùn)算平臺(tái)。它採(cǎi)用按量付費(fèi)模式，無(wú)閒置成本，確保您只需為使用的資源付費(fèi)。

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

1. 成本效率

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

2. 開(kāi)發(fā)者體驗(yàn)

   • 易於使用：直覺(jué)的介面，設(shè)定要求極低。
   • 自動(dòng)化：簡(jiǎn)化開(kāi)發(fā)、測(cè)試和部署。
   • 無(wú)縫整合：支援 Go、Python、Node.js、Rust 等。

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

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

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

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