Playwright Configuration

Relevant source files

The following files were used as context for generating this wiki page:

• example/playwright.config.ts
• package.json
• example/package.json
• README.md
• example/README.md
• src/tests/fixtures.spec.ts
• example/e2e/fixtures.ts

The Playwright configuration within this project establishes the environment for executing end-to-end (E2E) tests using the playwright-page-object framework. It defines how tests are discovered, the browser environments they run in, and the integration with the local development server.

This configuration is designed to support both local development and Continuous Integration (CI) environments, ensuring consistent test execution across different platforms.

Sources: example/playwright.config.ts:3-23, example/README.md:14-25

Core Configuration Parameters

The primary configuration is defined in example/playwright.config.ts using the defineConfig utility. It specifies the directory for test files, execution strategies, and reporting.

Option	Type	Default/Value	Description
testDir	string	./e2e	Directory where E2E tests are located.
fullyParallel	boolean	true	Runs tests in parallel to optimize execution time.
forbidOnly	boolean	!!process.env.CI	Fails the build if test.only is present in CI.
retries	number	CI ? 2 : 0	Number of times to retry failed tests.
workers	number	CI ? 1 : undefined	Limits parallel workers in CI environments.
reporter	string	"html"	Generates an HTML report of test results.
baseURL	string	http://localhost:5173	Base URL used for all page.goto() calls.

Sources: example/playwright.config.ts:4-16

Environment and Projects

The configuration defines specific projects and browser devices to ensure cross-browser compatibility. By default, it focuses on Chromium-based testing.

This diagram illustrates the relationship between the main configuration object and the project-specific settings.

Sources: example/playwright.config.ts:13-17

Web Server Integration

To facilitate automated testing without manual server management, the configuration includes a webServer block. This allows Playwright to start the local React application before running the test suite.

• Command: npm run dev starts the Vite-based development server.
• URL: http://localhost:5173 is monitored to ensure the server is ready.
• Reuse: reuseExistingServer is enabled outside of CI to speed up local testing cycles.

Sources: example/playwright.config.ts:18-22, example/package.json:7

Fixture and Test Setup

The project utilizes a fixture-based approach to inject Page Objects into tests. This eliminates the need for manual instantiation within test blocks.

The diagram shows the lifecycle of a Page Object within the fixture system.

The createFixtures utility map classes to fixture keys, allowing them to be used directly in test arguments.

// example/e2e/fixtures.ts
export const test = base.extend<{
	checkoutPage: CheckoutPage;
}>(
	createFixtures({
		checkoutPage: CheckoutPage,
	}),
);

Sources: example/e2e/fixtures.ts:6-14, src/tests/fixtures.spec.ts:45-55, example/README.md:46-56

Test Execution Scripts

Test execution is managed through NPM scripts defined in both the root and example directories.

• npm run test:e2e: Runs the Playwright test runner.
• npm run test:example: A composite script that builds the core library, packs it, installs it into the example app, and then triggers the E2E tests.

Sources: package.json:17, example/package.json:9

Conclusion

The Playwright configuration provides a robust foundation for the playwright-page-object example, emphasizing parallel execution, CI readiness, and seamless integration with the local development server. By leveraging fixtures and the createFixtures utility, it promotes a clean separation of selector logic and test flow.