透過 Playwright 和 Cucumber 整合增強您的 ETests

介紹

在這篇文章中，我將向您介紹為什麼 Playwright 和 Cucumber 是端對端 (E2E) 測試的絕佳工具。然後，我們將深入探討整合 Playwright 以在 JavaScript 前端應用程式中無縫使用的步驟。最後，我將分享一些專業技巧，以最大限度地提高您與 Playwright 的效率。

為什麼是劇作家和黃瓜？

雖然有許多強大的工具可用於建立 E2E 測試套件，但沒有一個能與 Playwright 和 Cucumber 的協同作用相媲美。

以下是 Playwright 在編寫 E2E 測試的市場中脫穎而出的原因，僅舉幾例：

• 1.任何瀏覽器、任何平台、一個 API
  • a.跨瀏覽器。 Playwright 支援所有現代渲染引擎，包括 Chromium、WebKit 和 Firefox。
  • b.跨平台。在 Windows、Linux 和 macOS 上進行本地或 CI 測試，無頭或有頭。
  • c.跨語言。在 TypeScript、JavaScript、Python、.NET 和 Java 中使用 Playwright API。
• 2.有彈性，沒有不穩定的測試
  • a.自動等待。劇作家在執行操作之前等待元素可操作。
  • b.網路優先的斷言。劇作家斷言是專門為動態網路創建的。
• 3.強大的工具
  • a.代碼產生器。透過記錄您的操作來產生測試。以任何語言保存它們。
  • b.劇作家監察員。檢查頁面、產生選擇器、逐步執行測試、查看點擊點並探索執行日誌。

但是，如果沒有 Cucumber 管理測試程式碼可能會成為維護的噩夢。 Cucumber 有助於以簡單、人類可讀的語言編寫測試，甚至使非技術利益相關者也可以存取它們。作為行為驅動開發 (BDD) 的基石，Cucumber 充當技術文件並加速新工程師的入職。

劇作家與黃瓜的融合

第 1 步：安裝依賴項

使用npm或yarn安裝必要的套件。

第 2 步：設定項目結構

像這樣組織你的專案：

第三步：配置黃瓜

在專案根目錄中建立 Cucumber 設定檔 - cucumber.js 文件，其中包含以下內容：

第 4 步：配置測試報告

建立 cucumber.report.js - 用於設定測試報告的檔案。配置選項可以在這裡找到

第5步：編寫特徵文件

在features目錄下建立一個feature文件，例如example.feature:

第 6 步：編寫步驟定義

在steps目錄中建立一個步驟定義文件，例如example.steps.js：

步驟7：新增NPM測試腳本

將腳本加入 package.json 來執行測試：

同時，npm 套件是一個方便的工具，可讓您在同一測試中執行兩個進程，為了執行 E2E 測試，您還需要運行應用程序，有時在本地，有時在遠端。

第 8 步：運行測試

執行測試：

劇作家專業技巧

• 1.錯誤訊息 - 仔細閱讀它們—它們通常能指出問題。
• 2.迭代開發 - 測試小塊程式碼以隔離和解決問題。
• 3. Playwright Inspector - 它可以幫助記錄動作並自動產生測試腳本，因此只需編寫一段程式碼。您可以如下啟動劇作家檢查器

• 4.記錄控制台訊息 - 在無頭模式下列印瀏覽器控制台訊息，如下所示

• 5.處理延遲載入 - 對於延遲載入元素，請使用下列函數
  • a. waitForSelector 或 waitFor
  • b.等待超時
  • c.如果需要則捲動到視圖中
• 6.偵錯 DOM - 在瀏覽器控制台中使用 document.querySelector 或其他查詢選擇器來定位元素
• 7.捕捉失敗的螢幕截圖

如果您已經到達這裡，那麼我已盡了令人滿意的努力讓您繼續閱讀。請留下任何評論或分享更正。

我的其他部落格：

• 將 Web Component/MFE 與純靜態 HTML 整合
• 破解軟體工程面試
• 我對 Web 元件的第一手經驗 - 學習與限制
• 微前端決策架構
• 使用 Postman 工具測試 SOAP Web 服務

以上是透過 Playwright 和 Cucumber 整合增強您的 ETests的詳細內容。更多資訊請關注PHP中文網其他相關文章！