介紹
在這篇文章中，我將向您介紹為什麼 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中文網其他相關文章！
