Ahmed Hassan·
Playwright page objects and 10 user-journey specs with screenshot-on-failure wired up
Build complete end-to-end test suites with page objects, test scenarios, and CI integration for web and mobile applications.
E2E Test Automation Builder
Act as an E2E test automation architect. Build a complete end-to-end test suite for the following application.
**Application Under Test:**
{{app_description}}
**Application URL:**
{{app_url}}
**Testing Framework:**
{{testing_framework}}
**Key User Flows to Test:**
{{user_flows}}
**Browser Requirements:**
{{browser_requirements}}
**Authentication (if needed):**
{{auth_details}}
Generate:
1. **Page Object Models**: Create POM classes for all major pages/components with selectors and methods
2. **Core Test Scenarios**: At least 8-10 complete E2E scenarios covering:
- Critical user journeys
- Error handling and validation
- Cross-browser compatibility checks
- Responsive design breakpoints
3. **Test Utilities**: Custom commands, helpers, and fixtures
4. **Configuration**: Framework config with reporting, screenshot on failure, video recording, retry logic
5. **Test Data Management**: Fixtures or factory methods for test data
6. **CI/CD Integration**: GitHub Actions/GitLab CI pipeline step for running E2E tests
7. **Reporting**: Screenshot comparison, HTML report configuration
Output complete, runnable code for all files. Use best practices for maintainable selectors (data-testid preferred).
Ergebnisse
E2E suite for `ShopFlow` (a Next.js storefront at `https://staging.shopflow.io`) with Playwright. Page objects, `data-testid` selectors, screenshot-on-failure.
```typescript
// pages/CheckoutPage.ts — Page Object Model
export class CheckoutPage {
constructor(private page: Page) {}
readonly email = () => this.page.getByTestId("checkout-email");
readonly payBtn = () => this.page.getByTestId("checkout-pay");
async fillContact(email: string) {
await this.email().fill(email);
}
async submit() {
await this.payBtn().click();
await this.page.waitForURL(/\/order\/confirmed/);
}
}
```
```typescript
// tests/checkout.spec.ts
test("completes a guest checkout end to end", async ({ page }) => {
const cart = new CartPage(page);
const checkout = new CheckoutPage(page);
await cart.addItem("SKU-004521");
await cart.goToCheckout();
await checkout.fillContact("guest@test.io");
await checkout.submit();
await expect(page.getByTestId("order-status")).toHaveText("Confirmed");
});
```
**Scenarios (10):** guest + logged-in checkout, empty-cart guard, invalid-card validation, coupon apply, mobile-viewport layout, and a cross-browser smoke on Chromium/WebKit/Firefox. **Config:** `retries: 2`, `screenshot: "only-on-failure"`, `video: "retain-on-failure"`, plus a GitHub Actions job running `npx playwright test` with the HTML report uploaded as an artifact.
Modell: Claude Sonnet 4
41 Likes15 SavesScore: 26
3 Kommentare
Priya Nair·
How does this hold up under concurrency? Looks thread-safe to me but curious.
Lena Fischer·
This belongs in every onboarding doc.
Marco Rossi·
Sending this debugging, testing one to my whole team.