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.
If you still have questions, please ask a question and I will try to answer it.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email [email protected].