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