如何使用Playwright运行e2e角度测试？

Question

我希望使用Playwright为我的Angular应用程序运行端到端(e2e)浏览器测试。然而，截至2021年11月，我还没有找到剧作家的角度示意图。

例如，Cypress有一个官方的Angular示意图。这样就可以使用以下命令运行Cypress e2e测试：

ng e2e

有没有一种方法可以在不编写Angular示意图的情况下使用Playwright运行Angular e2e测试？或者，有没有我错过的剧作家的角度示意图？

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