首頁 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)

前端熱敏紙小票打印遇到亂碼問題怎麼辦? 前端熱敏紙小票打印遇到亂碼問題怎麼辦? Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中,小票打印是一個常見的需求。然而,很多開發者在實...

神秘的JavaScript:它的作用以及為什麼重要 神秘的JavaScript:它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

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

誰得到更多的Python或JavaScript? 誰得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

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

如何實現視差滾動和元素動畫效果,像資生堂官網那樣?
或者:
怎樣才能像資生堂官網一樣,實現頁面滾動伴隨的動畫效果? 如何實現視差滾動和元素動畫效果,像資生堂官網那樣? 或者: 怎樣才能像資生堂官網一樣,實現頁面滾動伴隨的動畫效果? Apr 04, 2025 pm 05:36 PM

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

JavaScript難以學習嗎? JavaScript難以學習嗎? Apr 03, 2025 am 12:20 AM

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

JavaScript的演變:當前的趨勢和未來前景 JavaScript的演變:當前的趨勢和未來前景 Apr 10, 2025 am 09:33 AM

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

如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? 如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? Apr 04, 2025 pm 05:09 PM

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

前端開發中如何實現類似 VSCode 的面板拖拽調整功能? 前端開發中如何實現類似 VSCode 的面板拖拽調整功能? Apr 04, 2025 pm 02:06 PM

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

See all articles