Playwright:Web UI 自動化測試框架全面概述
PlayWright是微軟開發的Web UI自動化測試框架。
它旨在提供一個跨平台、跨語言、跨瀏覽器的自動化測試框架,同時也支援行動瀏覽器。
如其官方首頁所述:
- 自動等待、頁面元素智能斷言、執行追蹤等功能,在處理網頁不穩定方面非常有效。
- 它在與執行測試的進程不同的進程中控制瀏覽器,消除了進程內測試執行器的限制並支援 Shadow DOM 滲透。
- PlayWright 為每個測試建立一個瀏覽器上下文。瀏覽器上下文相當於一個全新的瀏覽器設定文件,可以實現零成本的全面測試隔離。建立新的瀏覽器上下文只需幾毫秒。
- 提供程式碼產生、逐步偵錯和追蹤檢視器等功能。
PlayWright vs. Selenium vipress. Cypress
當今最好的 Web UI 自動化測試框架是什麼?傑出的選項包括已有十年歷史的 Selenium、最近流行的 Cypress 以及我們在這裡介紹的 PlayWright。它們有何不同?以下是總結對比供大家參考
Feature | PlayWright | Selenium | Cypress |
---|---|---|---|
Supported Languages | JavaScript, Java, C#, Python | JavaScript, Java, C#, Python, Ruby | JavaScript/TypeScript |
Supported Browsers | Chrome, Edge, Firefox, Safari | Chrome, Edge, Firefox, Safari, IE | Chrome, Edge, Firefox, Safari |
Testing Framework | Frameworks for supported languages | Frameworks for supported languages | Frameworks for supported languages |
Usability | Easy to use and configure | Complex setup with a learning curve | Easy to use and configure |
Code Complexity | Simple | Moderate | Simple |
DOM Manipulation | Simple | Moderate | Simple |
Community Maturity | Improving gradually | Highly mature | Fairly mature |
Headless Mode Support | Yes | Yes | Yes |
Concurrency Support | Supported | Supported | Depends on CI/CD tools |
iframe Support | Supported | Supported | Supported via plugins |
Driver | Not required | Requires a browser-specific driver | Not required |
Multi-Tab Operations | Supported | Not supported | Supported |
Drag and Drop | Supported | Supported | Supported |
Built-in Reporting | Yes | No | Yes |
Cross-Origin Support | Supported | Supported | Supported |
Built-in Debugging | Yes | No | Yes |
Automatic Wait | Yes | No | Yes |
Built-in Screenshot/Video | Yes | No video recording | Yes |
主要比較:
- 支援的語言: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。
安裝與演示
- 確保已安裝 Node.js。
- 使用npm或yarn初始化PlayWright專案:
# Using npm npm init playwright@latest # Using yarn yarn create playwright
- 按照提示操作:
- 選擇 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 方法進行文字輸入,主要針對 、
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
拖放
拖放過程涉及四個步驟:
- 將滑鼠停留在可拖曳元素上。
- 按下滑鼠左鍵。
- 將滑鼠移到目標位置。
- 放開滑鼠左鍵。
您可以使用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 對劇作家應用的獨特優勢
-
成本效率
- 隨選付費:低流量時避免資源浪費,尖峰時自動擴容。
- 真實範例:例如,根據 getdeploying.com 的計算,在傳統雲端服務中租用 1 vCPU 和 2 GB RAM 虛擬機器的費用約為每月 25 美元。在 Leapcell 上,25 美元可以支援處理 694 萬個請求、平均回應時間為 60 毫秒的服務,讓您物有所值。
-
開發者體驗
- 易於使用:直覺的介面,設定要求極低。
- 自動化:簡化開發、測試和部署。
- 無縫整合:支援 Go、Python、Node.js、Rust 等。
-
可擴充性和效能
- 自動縮放:動態調整資源以保持最佳效能。
- 非同步最佳化:輕鬆處理高並發任務。
- 全球覆蓋:分散式資料中心支援低延遲存取。
更多部署範例,請參閱文件。
以上是Playwright:Web UI 自動化測試框架全面概述的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

Python和JavaScript開發者的薪資沒有絕對的高低,具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大,薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網(https://www.shiseido.co.jp/sb/wonderland/)中�...

學習JavaScript不難,但有挑戰。 1)理解基礎概念如變量、數據類型、函數等。 2)掌握異步編程,通過事件循環實現。 3)使用DOM操作和Promise處理異步請求。 4)避免常見錯誤,使用調試技巧。 5)優化性能,遵循最佳實踐。

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

如何在JavaScript中將具有相同ID的數組元素合併到一個對像中?在處理數據時,我們常常會遇到需要將具有相同ID�...

探索前端中類似VSCode的面板拖拽調整功能的實現在前端開發中,如何實現類似於VSCode...
