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

Question

我想使用 Playwright 为我的 Angular 应用程序运行端到端 (e2e) 浏览器测试。但是，截至 2021 年 11 月，我还没有找到 Playwright 的 Angular Schematic。

例如，Cypress 有一个官方的 Angular Schematic。这可以使用以下命令运行 C​​ypress e2e 测试：

ng e2e

有没有办法在不编写 Angular Schematic 的情况下使用 Playwright 运行 Angular e2e 测试？或者有没有我错过的剧作家 Angular Schematic？

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 命令运行测试。