How to run e2e Angular tests with Playwright?

Question

I would like run end-to-end (e2e) browser tests for my Angular application using Playwright. However, as of November 2021, I have not been able to find an Angular Schematic for Playwright.

For example, there is an official Angular Schematic for Cypress. This enables running Cypress e2e tests using the command:

ng e2e

Is there a way to run Angular e2e tests with Playwright without writing an Angular Schematic? Or is there an Angular Schematic for Playwright that I missed?

Answer 1

To launch a server during the tests, use the webServer option in the configuration file.

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

The port gets then passed over to Playwright as a baseURL when creating the context

// 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');
});

Then just run the tests with the npx playwright test command.