E2E Checkout Flow Tests
Relevant source files
The following files were used as context for generating this wiki page:
The E2E Checkout Flow Tests serve as a demonstration and validation suite for the playwright-page-object library. These tests utilize a minimal React checkout application to showcase various decorator-driven Page Object Model (POM) patterns, including built-in base classes, external controls, and raw Playwright Locator integration.
The scope of these tests covers common e2e scenarios such as applying promotional codes, manipulating cart items (addition/removal), and iterating through collections using typed locators. The architecture emphasizes a typed, composable control graph that replaces repetitive raw locator chains with structured, reusable class members.
Sources: example/README.md:3-5, example/e2e/checkout.spec.ts:1-55
Test Architecture and Composition
The checkout test suite is built upon a hierarchical graph of Page Objects. This structure allows selectors to remain relative to their parent components, improving maintainability and readability.
Page Object Hierarchy
The system utilizes a top-down approach where the CheckoutPage acts as the root, containing various child controls.
This diagram illustrates the composition of the checkout page components.
Sources: example/README.md:14-22, example/e2e/page-objects/CheckoutPage.ts:13-25
Implementation Styles
The checkout flow demonstrates three distinct implementation patterns for interacting with UI elements:
| Pattern | Description | Access Method |
|---|---|---|
| Built-in PageObject | Uses the library's PageObject base class for $ access and waits. | this.Control.$.action() |
| Raw Locator | Direct use of Playwright's Locator via decorators. | this.Control.action() |
| External Controls | Custom user-defined classes that wrap a Locator. | this.Control.locator.action() |
Sources: example/e2e/page-objects/CheckoutPage.ts:15-30, example/e2e/external-controls.spec.ts:1-25
Core Test Scenarios
Promotional Code Application
Tests verify the ability to input strings into the promo field and trigger the application logic. This is implemented both through custom methods and direct property access.
async applyPromoCode(code: string) {
await this.PromoCode.$.fill(code);
await this.ApplyPromoButton.$.click();
}
Sources: example/e2e/page-objects/CheckoutPage.ts:32-35, example/e2e/checkout.spec.ts:21-25
Cart Management and List Iteration
A significant portion of the test suite focuses on ListPageObject functionality, including filtering items and iterating through the cart.
This sequence shows the interaction between the test spec and the ListPageObject API.
Sources: example/e2e/checkout.spec.ts:40-55, example/README.md:65-68
Configuration and Fixtures
The tests utilize Playwright fixtures to automatically instantiate Page Objects, removing the need for manual new calls within test blocks.
Fixture Setup
The createFixtures utility maps class constructors to fixture keys. This allows the Playwright runner to inject initialized instances directly into the test arguments.
export const test = base.extend<{
checkoutPage: CheckoutPage;
externalCheckoutPage: ExternalCheckoutPage;
}>(
createFixtures({
checkoutPage: CheckoutPage,
externalCheckoutPage: ExternalCheckoutPage,
}),
);
Sources: example/e2e/fixtures.ts:6-14, example/README.md:44-50
External Control Integration
The checkout flow also tests "External Controls," which are classes not inheriting from the library's base PageObject. These are integrated using trailing constructor or factory arguments in the decorators.
- Constructor Metadata: The decorator automatically passes the resolved Playwright
Locatorto the class constructor. - Factory Functions: A custom function can be used to instantiate the control with specific logic.
Sources: example/e2e/external-controls.spec.ts:13-35, skills/playwright-page-object/SKILL.md:104-115
Summary of Checkout Page Methods
The CheckoutPage class encapsulates complex UI logic into high-level, repeatable methods:
- applyPromoCode(code): Fills and submits the promo code.
- expectCartEmpty(): Asserts that the item count is zero.
- expectCartHasItemCount(n): Asserts the exact number of items in the cart.
Sources: example/e2e/page-objects/CheckoutPage.ts:32-43, example/README.md:31-41