What is the relationship between Playwright's webserver and Angular webserver when running tests?

Answer

Playwright and Angular Webservers

When running tests with @playwright/test, you might wonder about the relationship between Playwright's webserver and Angular webserver. Let's clarify this for you.

Playwright's webserver is a built-in feature that allows you to serve your application during test execution. It's useful for testing static files or running a local development server. You can configure it in your playwright.config.ts file like this:

import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  webServer: {
    command: 'npm run start',
    port: 8080,
    timeout: 120 * 1000,
  },
};

export default config;

On the other hand, Angular webserver is part of the Angular development environment and is used to serve your Angular application during development. It's typically started using the ng serve command.

Now, if you're testing an Angular application with Playwright, you don't need to run two webservers simultaneously. You can choose to use either Playwright's webserver or Angular webserver. If you decide to use Playwright's webserver, you can configure it to run the Angular webserver command (ng serve) instead of the default command.

Here's an example of how to configure Playwright's webserver to use Angular webserver:

import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  webServer: {
    command: 'ng serve',
    port: 4200,
    timeout: 120 * 1000,
  },
};

export default config;

In this configuration, Playwright will start the Angular webserver on port 4200 before running the tests and stop it after the tests are completed. This way, you don't need to worry about running two webservers at the same time.