End-to-End Browser Testing with Playwright

This skill provides a structured workflow for creating a robust end-to-end testing suite using Playwright.

Core Workflow

1. Setup and Configuration: Start by setting up the Playwright configuration. See

   references/playwright_setup.md

   for a detailed guide and a commented

   playwright.config.ts

   .
2. Structure with Page Object Model (POM): Organize your test code by creating Page Object classes for each page or component. This pattern makes tests more readable and maintainable. For a detailed explanation and examples, read

   references/page_object_model.md

   .
3. Write User Flow Tests: With POMs in place, write end-to-end tests that simulate user journeys. A complete example for a

   signup -> login -> create task

   flow is in

   references/user_flow_testing.md

   .
4. Implement Visual Regression Testing: Catch unintended visual changes by adding screenshot assertions. Guidance on this is available in

   references/visual_regression.md

   .
5. Configure Cross-Browser Testing: Ensure your application works across different browsers by configuring projects in Playwright. See

   references/cross_browser_testing.md

   for how to set up Chromium, Firefox, and WebKit.
6. Integrate with CI: Automate your tests to run on every code change. A sample GitHub Actions workflow and setup instructions are in

   references/ci_integration.md

   .
7. Manage Test Data: Learn strategies for setting up and tearing down test data to ensure reliable and independent tests. See

   references/test_data_management.md

   .

Bundled Resources

This skill includes reference files to guide you through each step. When you need to implement a part of the workflow, read the corresponding reference file.

• references/playwright_setup.md

• references/page_object_model.md

• references/user_flow_testing.md

• references/visual_regression.md

• references/cross_browser_testing.md

• references/ci_integration.md

• references/test_data_management.md