如何使用 Playwright 运行 e2e Angular 测试？

Question

我想使用Playwright为我的 Angular 应用程序运行端到端 (e2e) 浏览器测试。然而，截至 2021 年 11 月，我尚未找到 Playwright 的 Angular 示意图。

例如， Cypress有一个官方的 Angular Schematic 。这使得可以使用以下命令运行赛普拉斯 e2e 测试：

ng e2e

有没有一种方法可以在不编写 Angular 原理图的情况下使用 Playwright 运行 Angular e2e 测试？或者我错过了 Playwright 的 Angular 示意图吗？

Answer 1

要在测试期间启动服务器，请使用webServer配置文件中的选项。

// playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
  webServer: {
    command: 'npx ng serve',
    port: 4200,
    timeout: 120 * 1000,
  },
};
export default config;

baseURL然后在创建上下文时将端口传递给 Playwright

// test.spec.ts
import { test } from '@playwright/test';
test('test', async ({ page, baseURL }) => {
  // baseURL is taken directly from your web server,
  // e.g. http://localhost:4200
  await page.goto(baseURL + '/bar');
  // Alternatively, just use relative path, because baseURL is already
  // set for the default context and page.
  // For example, this will result in http://localhost:4200/foo
  await page.goto('/foo');
});

然后只需使用命令运行测试即可npx playwright test。