4

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?

Christopher Peisert
  • 21,862
  • 3
  • 86
  • 117

1 Answers1

9

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.

Yevhen Laichenkov
  • 7,746
  • 2
  • 27
  • 33
  • 1
    Thank you @yevhen-laichenkov for pointing out the `webServer` config option! Playwright almost makes it *too* easy. :) – Christopher Peisert Nov 10 '21 at 14:16
  • Hi @YevhenLaichenkov could you give any hint regarding to this: https://stackoverflow.com/questions/70942914/cannot-run-e2e-tests-with-playwright-on-angular-12-app – johannesMatevosyan Feb 01 '22 at 15:39