首頁 web前端 js教程 Playwright:Web UI 自動化測試框架全面概述

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

Dec 26, 2024 pm 05:57 PM

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

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

Playwright: A Comprehensive Overview of Web UI Automation Testing Framework

如其官方首頁所述:

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

PlayWright vs. Selenium v​​ipress. 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

安裝與演示

  1. 確保已安裝 Node.js。
  2. 使用npm或yarn初始化PlayWright專案:
   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright
登入後複製
登入後複製
登入後複製
  1. 按照提示操作:
    • 選擇 TypeScriptJavaScript(預設: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
登入後複製
登入後複製
登入後複製

拖放

拖放過程涉及四個步驟:

  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

Playwright: A Comprehensive Overview of Web UI Automation Testing Framework

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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱門文章

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

熱門話題

Java教學
1677
14
CakePHP 教程
1431
52
Laravel 教程
1334
25
PHP教程
1279
29
C# 教程
1257
24
Python vs. JavaScript:學習曲線和易用性 Python vs. JavaScript:學習曲線和易用性 Apr 16, 2025 am 12:12 AM

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

JavaScript和Web:核心功能和用例 JavaScript和Web:核心功能和用例 Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

JavaScript在行動中:現實世界中的示例和項目 JavaScript在行動中:現實世界中的示例和項目 Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

了解JavaScript引擎:實施詳細信息 了解JavaScript引擎:實施詳細信息 Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

Python vs. JavaScript:開發環境和工具 Python vs. JavaScript:開發環境和工具 Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda,適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack,適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

C/C在JavaScript口譯員和編譯器中的作用 C/C在JavaScript口譯員和編譯器中的作用 Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。1)C 用于解析JavaScript源码并生成抽象语法树。2)C 负责生成和执行字节码。3)C 实现JIT编译器,在运行时优化和编译热点代码,显著提高JavaScript的执行效率。

從網站到應用程序:JavaScript的不同應用 從網站到應用程序:JavaScript的不同應用 Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中,JavaScript與HTML、CSS一起操作DOM,實現動態效果,並支持如jQuery、React等框架。 2)通過ReactNative和Ionic,JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行,支持高並發請求。

Python vs. JavaScript:比較用例和應用程序 Python vs. JavaScript:比較用例和應用程序 Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化,JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色,使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺,用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用,支持全棧開發。

See all articles