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

Question

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

例如Cypress有官方的Angular原理图。这可以使用以下命令启用运行ning Cypress e2e 测试：

ng e2e

有没有办法在不编写 Angular 原理图的情况下使用 Playwright 运行 Angular e2e 测试？或者有没有我错过的 Angular Playwright 示意图？

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

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

How to run e2e Angular tests with Playwright?

angular

angular-cli

e2e-testing

playwright

angular-schematics