---

1。安裝劇作家

要設置playwright，運行以下命令：

NPM初始化劇作@最新

npm init playwright@latest

您將通過終端中的設置嚮導引導。當提示使用

“將端到端測試放在哪裡？” ，您可以將其設置為src/tests（如較早的教程中的建議）。 [2 將腳本添加到package.json

在您的軟件包中。 [2 這使您可以在開發和CI環境中運行測試。

劇作家配置

playwright.config.ts文件應配置如下：

[2

配置的關鍵更改：

：這設置了開發服務器的基本URL，因此您無需在每個測試中編寫它。

Weberver

：此塊描述瞭如何啟動開發服務器。除非您在CI環境中，否則它將重複使用已運行的服務器。

testdir

：劇作家應該查找您的e2e tests的目錄（在這種情況下，src/tests/e2e）。

2。為瀏覽器測試配置MSW
• 到目前為止，MSW已設置為在Node.js環境中嘲笑API響應。但是，由於劇作家使用真正的瀏覽器進行測試，因此您需要配置MSW以在瀏覽器環境中工作。 創建一個新的JavaScript模塊，該模塊將在基於瀏覽器的測試中註冊MSW服務工作者：
[2
• 3。在開發模式下註冊工人 在開發模式下運行應用程序時啟動MSW Worker，將以下內容添加到您的應用程序的root模塊（例如SRC/Main.tsx）：
確保在.env文件中設置Vite_api_mock環境變量：
• vite_api_mock =“ true”

4。編寫E2E測試

現在您可以為應用程序中的流程編寫E2E測試。這是一個示例劇作家測試：

[2

5。進行測試

運行E2E測試，使用以下命令：

NPM運行測試：E2E：CI

這將在CI模式下執行測試，這對於自動化管道很有用。