@aleph-alpha/config-playwright

@aleph-alpha/ 配置游戏作家

Aleph Alpha 前端项目共享 Playwright 配置 。 提供可扩展配置的工厂,基础Page对象模型类,以及认证的测试固定.

什么v1舰

安装

@playwright/test 是一个对等依赖, 您必须同时安装它 :

pnpm add -D @aleph-alpha/config-playwright @playwright/test

使用量

mountPlaywrightConfig

// playwright.config.ts
import { defineConfig } from '@playwright/test'
import { mountPlaywrightConfig } from '@aleph-alpha/config-playwright'

export default defineConfig({
  ...mountPlaywrightConfig({ baseURL: process.env['BASE_URL'] ?? 'http://localhost:4200' }),
  // Add any project-specific options after spreading:
  // webServer: { command: 'pnpm start', url: 'http://localhost:4200' },
})

参数

ci 从中自动检测到 CI 环境变量。 明确通过它只是为了覆盖检测(例如用 CI 语义在本地运行的脚本).

返回配置值

JSON记者写信给 test-results/results.json。 。 。 .

BasePage

页面对象模型模式的基础类. 在您的 POM 文件中扩展它 .

// e2e/pages/login.page.ts
import { BasePage } from '@aleph-alpha/config-playwright'
import type { Page } from '@playwright/test'

export class LoginPage extends BasePage {
  constructor(page: Page) {
    super(page)
  }

  async login(user: string, password: string) {
    await this.navigateTo('/login')
    await this.page.fill('[data-testid="username"]', user)
    await this.page.fill('[data-testid="password"]', password)
    await this.page.click('[type="submit"]')
    await this.waitForLoad()
  }
}

方法

this.page 暴露为 protected 用于子类.

authenticatedTest

Playwright 的倒置替换 test 那个预装 .auth/state.json 作为 storageState。 。 。 .

// e2e/dashboard.spec.ts
import { authenticatedTest, expect } from '@aleph-alpha/config-playwright'

authenticatedTest('shows dashboard', async ({ page }) => {
  await page.goto('/dashboard')
  await expect(page.getByRole('heading')).toContainText('Dashboard')
})

认证合同

authenticatedTest 读取认证状态 .auth/state.json您必须在您的 globalSetup 在测试之前.

// e2e/global-setup.ts  (wire up in your own playwright.config.ts)
import { chromium } from '@playwright/test'

export default async function globalSetup() {
  const browser = await chromium.launch()
  const page = await browser.newPage()

  await page.goto(process.env['BASE_URL'] + '/login')
  await page.fill('[name="username"]', process.env['E2E_USER']!)
  await page.fill('[name="password"]', process.env['E2E_PASSWORD']!)
  await page.click('[type="submit"]')

  await page.context().storageState({ path: '.auth/state.json' })
  await browser.close()
}

从你的参考 playwright.config.ts数字 :

export default defineConfig({
  ...mountPlaywrightConfig({ baseURL: '...' }),
  globalSetup: './e2e/global-setup',
})

环境变量

.gitignore 添加数

在您的应用程序中添加这些 .gitignore数字 :

.auth/
test-results/
playwright-report/

从v. 4.0移出