一、環境準備
在開始創建 Playwright 項目之前，確保你的電腦上已經安裝了以下工具：
-
Node.js：Playwright 依賴于 Node.js 環境，確保你已經安裝了最新版本的 Node.js。可以通過以下命令檢查是否安裝成功：
node -v npm -v -
VS Code 編輯器：雖然你可以使用任何代碼編輯器，但 VS Code 提供了豐富的插件支持，特別是 Playwright 插件，可以極大提高開發效率。
二、通過 npm 創建 Playwright 項目
-
創建項目文件夾：在桌面或其他你想要創建項目的目錄下，創建一個新的文件夾。例如：
mkdir my-playwright-project cd my-playwright-project -
執行初始化命令：使用 npm 提供的命令來創建 Playwright 項目。執行以下命令：
npm create playwright@latest這個命令會引導你完成項目的初始化，包括選擇編程語言（TypeScript 或 JavaScript）、是否安裝瀏覽器等。
-
選擇編程語言：根據你的需求選擇 TypeScript 或 JavaScript。如果你是初學者，建議選擇 JavaScript，因為它的語法相對簡單。
? Select language TypeScript -
選擇是否安裝瀏覽器：Playwright 支持多種瀏覽器，但你可以選擇是否在項目初始化時安裝瀏覽器。如果你不確定，可以選擇不安裝，稍后可以手動安裝。
? Select browsers to install (Use arrow keys) -
項目初始化完成：命令執行完成后，Playwright 會自動生成?
package.json?文件，并安裝必要的依賴。你可以通過以下命令檢查項目是否創建成功：npm run test
如果你也遇到了這個報錯↓
PS E:\autostudy_main\visual\my_projectplw01> npm run test npm error Missing script: "test" npm error npm error To see a list of scripts, run: npm error npm run
你的錯誤是因為 package.json 文件中缺少 test 腳本。以下是解決方案：
1. 檢查 package.json 中的 scripts 字段?
打開項目根目錄下的 package.json，確認是否存在類似配置：
json
Copy Code
"scripts": {
? "test": "playwright test" ?// 或其他測試命令（如 jest、mocha）
}
如果沒有 test 腳本，需手動添加并保存文件?。
2. 使用正確的測試命令?
Playwright 項目?：應配置為 "test": "playwright test"?。
Vue/React 項目?：可能需改為 "test": "vue-cli-service test" 或 "test:unit"?。
3. 重新安裝依賴（可選）?
若修改后仍報錯，嘗試：
bash
Copy Code
npm install ?# 確保依賴完整安裝
4. 其他注意事項?
確保項目根目錄下有 playwright.config.ts（Playwright 項目）或對應的測試配置文件?。
若使用第三方測試工具（如 Jest），需先安裝對應包：
bash
Copy Code
npm install jest --save-dev
總結步驟?
編輯 package.json → 添加/修正 test 腳本。
保存文件后重新運行 npm run test。
若問題持續，檢查測試工具是否安裝正確?。
遇到具體工具報錯時，可提供 package.json 內容進一步分析。
就可以繼續進行了
三、通過 VS Code 插件創建 Playwright 項目
-
安裝 Playwright 插件：打開 VS Code，點擊左側的擴展圖標，搜索?
Playwright，安裝?Playwright Test for VS Code?插件。 -
創建項目：安裝完成后，打開命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），搜索?
Playwright: Install，選擇?Install Playwright。 -
選擇編程語言：插件會提示你選擇編程語言，選擇 JavaScript 或 TypeScript。
-
選擇是否安裝瀏覽器：同 npm 創建項目時的選擇，你可以選擇是否安裝瀏覽器。
-
項目初始化完成：插件會自動創建項目文件夾，并安裝必要的依賴。你可以通過以下命令檢查項目是否創建成功：
npm run test
四、項目文件結構
創建 Playwright 項目后，項目文件夾中會包含以下文件和目錄：
package.json：項目的配置文件，包含依賴和腳本。package-lock.json：鎖定依賴版本的文件。node_modules：存放項目依賴的文件夾。tests：存放測試文件的文件夾。playwright.config.js：Playwright 的配置文件。
五、常見問題及解答（FAQ）
| 問題 | 答案 |
|---|---|
| Q1: 什么是 Playwright？ | Playwright 是一個 Node.js 庫，用于自動化瀏覽器操作。它支持多種瀏覽器（如 Chromium、Firefox 和 WebKit），并提供了強大的 API 用于編寫端到端測試。 |
| Q2: 為什么選擇 Playwright？ | Playwright 提供了跨瀏覽器支持、自動等待、截屏等功能，使得編寫和維護自動化測試更加簡單。此外，Playwright 的 API 設計簡潔，易于上手。 |
| Q3: 如何選擇 TypeScript 或 JavaScript？ | 如果你熟悉 TypeScript，建議選擇 TypeScript，它提供了更好的類型檢查和代碼提示。如果你是初學者，可以選擇 JavaScript，它的語法相對簡單。 |
| Q4: 是否必須安裝瀏覽器？ | 不是必須的。如果你不選擇安裝瀏覽器，Playwright 會使用默認的瀏覽器進行測試。你可以在需要時手動安裝特定的瀏覽器。 |
| Q5: 如何運行測試？ | 你可以通過?npm run test?命令來運行測試。如果你使用 VS Code 插件，也可以通過插件提供的命令面板來運行測試。 |
六、相似概念對比
| 概念 | Playwright | Selenium |
|---|---|---|
| 支持的瀏覽器 | Chromium, Firefox, WebKit | Chrome, Firefox, Safari, Edge |
| 自動化類型 | 端到端測試 | 端到端測試、單元測試 |
| 語言支持 | JavaScript, TypeScript | 多種語言（Java, Python, C#, JavaScript 等） |
| 安裝復雜度 | 簡單，使用 npm 或 VS Code 插件 | 較復雜，需要配置驅動程序 |
| API 設計 | 簡潔，易于上手 | 較復雜，需要更多配置 |
七、代碼示例
-
創建一個簡單的測試文件：
// tests/example.spec.js const { test, expect } = require('@playwright/test');test('測試頁面標題', async ({ page }) => {await page.goto('https://playwright.dev');await expect(page).toHaveTitle('Fast and reliable end-to-end testing for modern web apps | Playwright'); }); -
配置 Playwright：
// playwright.config.js const { PlaywrightTestConfig } = require('@playwright/test');const config: PlaywrightTestConfig = {use: {headless: false,viewport: { width: 1280, height: 720 },},projects: [{name: 'chromium',use: { browserName: 'chromium' },},{name: 'firefox',use: { browserName: 'firefox' },},{name: 'webkit',use: { browserName: 'webkit' },},], };module.exports = config; -
運行測試：
npm run test
通過以上步驟，你已經成功創建了一個 Playwright 項目，并編寫了一個簡單的測試用例。接下來，你可以根據項目需求，進一步擴展和優化你的自動化測試。
