Playwright 是一個(gè)強(qiáng)大的端到端 (E2E) 測試框架，使開發(fā)人員能夠?yàn)楝F(xiàn)代 Web 應(yīng)用程序編寫健壯且可靠的測試。當(dāng)與 Vue.js 一起使用時(shí)，Playwright 可以幫助確保您的應(yīng)用程序在不同的瀏覽器和設(shè)備上無縫執(zhí)行。以下是有效將 Playwright 與 Vue.js 集成的一些最佳實(shí)踐。

1. 使用 Vue.js 設(shè)置 Playwright

安裝劇作家

在編寫測試之前，請?jiān)谀捻?xiàng)目中安裝 Playwright：

npm install -D @playwright/test

您還可以使用以下命令安裝特定的瀏覽器依賴項(xiàng)：

npx playwright install

配置劇作家

創(chuàng)建 playwright.config.ts 或 .js 文件來自定義瀏覽器類型、超時(shí)和基本 URL 等設(shè)置：

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e',
  use: {
    baseURL: 'http://localhost:3000',
    headless: true,
    screenshot: 'only-on-failure',
    trace: 'on-first-retry',
  },
});

與 Vue CLI 或 Vite 集成

通過添加命令來啟動(dòng)和停止開發(fā)服務(wù)器，確保您的測試框架知道您的 Vue 應(yīng)用程序何時(shí)準(zhǔn)備就緒。

---

2. 組織您的測試

保持測試文件清晰的結(jié)構(gòu)，以提高可讀性和可維護(hù)性。常見的結(jié)構(gòu)是：

project/
├── src/
├── tests/
│   ├── e2e/
│   │   ├── example.spec.ts
│   │   ├── login.spec.ts
│   ├── fixtures/
│   ├── helpers/

• e2e/：包含劇作家測試。
• fixtures/：保存可重復(fù)使用的測試數(shù)據(jù)。
• helpers/：包含實(shí)用函數(shù)以減少重復(fù)代碼。

---

3. 在端到端測試之前使用組件測試

利用 Vue Test Utils 或 Cypress Component Testing 等工具來單獨(dú)測試組件。這有助于確保各個(gè) Vue 組件在使用 Playwright 運(yùn)行更復(fù)雜的 E2E 測試之前正常運(yùn)行。

---

4. 模擬 API 和數(shù)據(jù)

在端到端測試過程中避免依賴真實(shí)的后端系統(tǒng)。使用 Playwright 的路由 API 攔截網(wǎng)絡(luò)請求并模擬響應(yīng)：

test('loads mock data', async ({ page }) => {
  await page.route('**/api/data', route =>
    route.fulfill({
      status: 200,
      body: JSON.stringify({ key: 'value' }),
    })
  );
  await page.goto('/');
  await expect(page.locator('#data-key')).toHaveText('value');
});

這確保了測試結(jié)果的一致性并加快了執(zhí)行速度。

---

5. 利用劇作家的選擇器

Playwright 支持強(qiáng)大的選擇器策略，包括：

• data-testid 屬性：為 Vue 組件添加 data-testid 屬性，以便在測試中更容易定位它們。

  <button data-testid="submit-button">Submit</button>

• Playwright 的內(nèi)置定位器：使用 locator() 等方法進(jìn)行精確的元素定位。

  const button = page.locator('button[data-testid="submit-button"]');

---

6. 優(yōu)化性能和穩(wěn)定性

使用適當(dāng)?shù)牡却?

避免依賴像 page.waitForTimeout(1000) 這樣的固定超時(shí)。相反，使用 Playwright 的 waitFor 實(shí)用程序來等待特定條件：

npm install -D @playwright/test

并行運(yùn)行測試

Playwright 支持并行測試執(zhí)行，這可以大大減少測試時(shí)間：

npx playwright install

---

7. 調(diào)試和故障排除

• 屏幕截圖和跟蹤：在 Playwright 的配置中啟用失敗測試的屏幕截圖和跟蹤。這有助于快速識別問題。

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e',
  use: {
    baseURL: 'http://localhost:3000',
    headless: true,
    screenshot: 'only-on-failure',
    trace: 'on-first-retry',
  },
});

• 調(diào)試模式：在非無頭模式下運(yùn)行 Playwright 測試并使用詳細(xì)日志記錄：

project/
├── src/
├── tests/
│   ├── e2e/
│   │   ├── example.spec.ts
│   │   ├── login.spec.ts
│   ├── fixtures/
│   ├── helpers/

---

8. CI/CD 集成

將 Playwright 與您的 CI/CD 管道集成以盡早發(fā)現(xiàn)問題。確保管道：

• 安裝依賴項(xiàng)。
• 啟動(dòng) Vue.js 開發(fā)服務(wù)器。
• 在干凈的環(huán)境中運(yùn)行 Playwright 測試。

對于 GitHub Actions，示例配置可能如下所示：

test('loads mock data', async ({ page }) => {
  await page.route('**/api/data', route =>
    route.fulfill({
      status: 200,
      body: JSON.stringify({ key: 'value' }),
    })
  );
  await page.goto('/');
  await expect(page.locator('#data-key')).toHaveText('value');
});

---

9. 處理 Vue.js-特定功能

路由器導(dǎo)航

與 Vue Router 交互時(shí)確保等待導(dǎo)航完成：

  <button data-testid="submit-button">Submit</button>

反應(yīng)狀態(tài)

驗(yàn)證 Vue 反應(yīng)系統(tǒng)導(dǎo)致的 DOM 變化：

  const button = page.locator('button[data-testid="submit-button"]');

---

10. 持續(xù)改進(jìn)測試

• 定期更新測試以適應(yīng)應(yīng)用程序中的新功能或更改。
• 監(jiān)控不穩(wěn)定的測試并修復(fù)根本原因，而不是忽略它們。
• 與您的團(tuán)隊(duì)分享劇作家的最佳實(shí)踐，以保持一致性。

以上是使用 Playwright 測試 Vue.js：完美 Web 應(yīng)用程序的有趣旅程的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！