使用 Playwright、TypeScript 和 JavaScript 進行自動化

使用 TypeScript 的劇作家 | JavaScript 安裝

Playwright 是 Microsoft 與 Puppeteer 團隊合作推出的基於 Web 的現代 API 自動化工具，Puppeteer 是一個 JavaScript 函式庫，提供進階 API，透過 DevTools 協定或 WebDriver BiDi 控制 Chrome 或 Firefox。 Puppeteer 預設以無頭（無可見 UI）運作。

Playwright 支援基於現代 Web 的瀏覽器，透過單一 API 實現 Web 應用程式的自動化，並且還支援 API 的自動化。

劇作家的建築

Playwright 使用Web Socket 協議，一旦建立連接，將觸發測試並使用Web Socket 協議將JSON 格式的請求發送到伺服器，這意味著一旦Playwright 建立連接，無需再次建立連接來將請求發送到伺服器直到完成測試執行。 Playwright 必須透過 playwright.quit() 方法斷開連線。

讓我們來了解 HTTP 協定連接 Web Socket 協定連線之間的差異

WebSocket 與 HTTP 協定的差異
劇作家的特徵：
任何瀏覽器• 任何平台• 一個API
跨瀏覽器。 Playwright 支援所有現代渲染引擎，包括 Chromium、WebKit 和 Firefox。

跨平台。在 Windows、Linux 和 macOS 上進行本地或 CI 測試，無頭或有頭。

跨語言。在 TypeScript、JavaScript、Python、.NET、Java 中使用 Playwright API。

測試行動網路。適用於 Android 的 Google Chrome 和 Mobile Safari 的本機行動模擬。相同的渲染引擎可以在您的桌面和雲端運行。

1. 有彈性 • 沒有不穩定的測試

自動等待。劇作家在執行操作之前等待元素可操作。它還具有豐富的內省活動。兩者的結合消除了人為超時的需要——這是不穩定測試的主要原因。

網路優先斷言。劇作家斷言是專門為動態網路創建的。檢查會自動重試，直到滿足必要的條件。

追蹤。配置測試重試策略，捕捉執行軌跡、影片、螢幕截圖以消除碎片。

1. 沒有權衡•沒有限制

瀏覽器在不同的流程中執行屬於不同來源的網頁內容。 Playwright 與現代瀏覽器架構保持一致，並在進程外執行測試。這使得 Playwright 擺脫了典型的進程內測試運行器限制。

一切都多重。跨越多個選項卡、多個來源和多個使用者的測試場景。為不同的使用者建立具有不同上下文的場景，並在您的伺服器上運行它們，所有這些都在一次測試中。

可信事件。懸停元素、與動態控制項互動、產生可信事件。 Playwright 使用與真實使用者無法區分的真實瀏覽器輸入管道。

測試框架，穿透Shadow DOM。劇作家選擇器穿透 Shadow DOM 並允許無縫輸入幀。

1. 完全隔離•快速執行

瀏覽器上下文。 Playwright 為每個測試建立一個瀏覽器上下文。瀏覽器上下文相當於一個全新的瀏覽器設定檔。這提供了零開銷的完整測試隔離。建立新的瀏覽器上下文只需幾毫秒。

登入一次。保存上下文的身份驗證狀態並在所有測試中重複使用它。這繞過了每個測試中的重複登入操作，但提供了獨立測試的完全隔離。

1. 強大的工具

代碼產生器。透過記錄您的操作來產生測試。將它們儲存為任何語言。

劇作家檢驗員。檢查頁面、產生選擇器、逐步執行測試、查看點擊點、探索執行日誌。

追蹤檢視器。捕獲所有資訊以調查測試失敗。 Playwright 追蹤包含測試執行截圖、即時 DOM 快照、動作資源管理器、測試來源等等。

讓我們開始使用 Playwright 和 TypeScript/JavaScript

安裝 Playwright for TypeScript/JavaScript
安裝先決條件如下：Node.js 18

Windows 10、Windows Server 2016 或適用於 Linux 的 Windows 子系統 (WSL)。
macOS 13 Ventura 或 macOS 14 Sonoma。
Debian 11、Debian 12、Ubuntu 20.04 或 Ubuntu 22.04、Ubuntu 24.04，x86–64 和 arm64 架構。
首先使用 npm、yarn 或 pnpm 安裝 Playwright。或者，您也可以使用 VS Code 擴充功能開始並執行測試。

建立資料夾，例如 TypeScriptWithPlaywright 同樣為 JavaScriptwithPlaywright 建立資料夾，然後導航到資料夾並開啟 Windows 的命令提示字元

劇作家裝置
點選回車，將出現以下畫面，選擇腳本語言，然後按回車

選擇腳本語言
選擇腳本語言然後按 Enter 鍵後，將出現以下螢幕，並詢問您要將端到端測試放在哪裡。就這樣吧。

劇作家裝置
現在它會詢問 GitHub Actions 工作流程。如果您想配置，請按 Y 或 N。它會要求您安裝瀏覽器，如果您想安裝，請選擇 Y，表示正確。將出現以下畫面。

注意：Playwright 瀏覽器可以透過以下指令手動安裝

npx 劇作家安裝

劇作家裝置
現在按 Enter 鍵，將出現下列畫面。

劇作家裝置
劇作家裝置

劇作家裝置

劇作家安裝完成
Playwright 預設執行在無頭模式下執行的測試腳本，以下命令將探索在特定瀏覽器上執行並偵錯，使用 codegen 產生測試腳本。

npx劇作家測驗
運行端對端測試。

npx 劇作家測驗 --ui
啟動互動式 UI 模式。

npx 劇作家測驗 --project=chromium
僅在桌上型 Chrome 上執行測試。

npx 劇作家測驗範例
在特定文件中執行測試。

npx 劇作家測驗 --debug
在調試模式下執行測試。

npx 劇作家代碼產生
使用 Codegen 自動產生測試。

我們建議您先輸入：

npx playwright test

現在讓我們使用以下命令執行測試腳本並查看報告。 Playwright 將在 chromium、Firefox 和 WebKit 中並行測試。

npx劇作家測驗

npx劇作家表演報告

Playwright 預設報告僅支援 TypeScript/JavaScript
預設情況下，Playwright 將您的測試腳本配置為在以下瀏覽器中以無頭模式執行。設定將出現在名為 playwright.config.js

的資料夾中

從'@playwright/test'導入{defineConfig, devices};

/**

• 從檔案讀取環境變數。
• https://github.com/motdotla/dotenv*/ // 從 'dotenv' 導入 dotenv; // 從 'path' 匯入路徑； // dotenv.config({ path: path.resolve(__dirname, '.env') });

/**

• 請參閱 https://playwright.dev/docs/test-configuration。
  /
  導出預設的defineConfig({
  testDir: './tests',
  / 在檔案中並行執行測試 /
  完全並行：true，
  / 如果您不小心在原始程式碼中留下了 test.only，那麼 CI 上的建置將會失敗。 /
  禁止僅：!!process.env.CI，
  / 僅在 CI 上重試 /
  重試：process.env.CI？ 2：0，
  / 選擇退出 CI 上的平行測試。 /
  工人：process.env.CI？ 1：未定義，
  / 使用的記者。請參閱 https://playwright.dev/docs/test-reporters /
  記者：'html',
  / 以下所有項目的共享設定。請參閱 https://playwright.dev/docs/api/class-testoptions。 /
  使用：{
  / 在等待 page.goto('/') 等操作中使用的基本 URL。 */
  // baseURL: 'http://127.0.0.1:3000',

  /* 重試失敗的測試時收集追蹤。請參閱 https://playwright.dev/docs/trace-viewer */
  追蹤：“第一次重試時”，
  },

/* 為主要瀏覽器設定項目 */
項目：[
{
名稱：'鉻'，
使用：{ ...devices['桌面 Chrome'] },
},

npx playwright test

]，

/* 在開始測試之前執行本機開發伺服器 */
// 網路伺服器: {
// 指令：'npm run start',
// url: 'http://127.0.0.1:3000',
// 重複使用現有伺服器: !process.env.CI,
// },
});
現在讓我們修改為執行非 headleases 模式（UI）的測試腳本並新增其他瀏覽器。 Playwright 還提供了記錄測試腳本執行的選項和追蹤視圖選項，這對於偵錯非常有用。如果啟用追蹤檢視器選項，則可以查看測試前的狀態、測試期間的狀態以及測試後的狀態。我修改了劇作家的配置文件，如下：

// @ts-check
const { DefineConfig, devices } = require('@playwright/test');

module.exports = DefineConfig({
testDir: './tests',
完全並行：true，
禁止僅：!!process.env.CI，
重試：process.env.CI？ 2：0，
工人：process.env.CI？ 1：未定義，
記者：'html',
使用：{
trace: 'on', // 啟用追蹤
video: 'on', // 為每個測試錄製影片
headless: false, // 以 headless 模式執行測試
},
項目：[
{
名稱：'鉻'，
使用：{ ...devices['桌面 Chrome'] },
},
{
名稱：'火狐'，
使用：{ ...devices['桌面 Firefox'] },
},
{
名稱：'webkit'，
使用：{ ...devices['Desktop Safari'] },
},
{
名稱：“Microsoft Edge”，
使用：{
...設備['桌面邊緣']，
頻道：'msedge'
},
},
{
名稱：“Google瀏覽器”，
使用：{
...設備['桌面 Chrome'],
頻道：'chrome'
},
},
],
});
現在測試腳本可以在設定檔中提到的瀏覽器上以非無頭模式執行測試，並帶有記錄、追蹤檢視器選項。

快樂學習！ ！自動化快樂！ ！測試愉快

請隨時透過 santoshvqa@gmail.com 和 LinkedIn 個人資料與我聯繫任何資訊/問題

https://www.linkedin.com/in/santosh-kulkarni-ab571639/

以上是使用 Playwright、TypeScript 和 JavaScript 進行自動化的詳細內容。更多資訊請關注PHP中文網其他相關文章！