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?
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.