Automate End-to-End Testing Workflows
A seven-phase workflow for end-to-end testing with Playwright, covering browser automation, visual regression, cross-browser testing, and CI/CD integration.
Why it matters
Implement a comprehensive end-to-end testing workflow that automates browser interactions, visual regression, and cross-browser compatibility, seamlessly integrating with CI/CD pipelines.
Outcomes
What it gets done
Set up Playwright for automated browser testing.
Design and implement test scenarios with page objects.
Configure visual regression and cross-browser testing.
Integrate E2E tests into CI/CD pipelines.
Install
Add it to your toolbox
Run in your project directory:
curl -fsSL https://spark.entire.vc/get/ag-e2e-testing | bash Capabilities
What this skill does
Creates unit, integration, or end-to-end test cases.
Controls a real browser to automate web workflows.
Runs build pipelines, tests, and deploys to environments.
Runs system commands and automates desktop tasks.
Overview
E2E Testing Workflow
What it does
This workflow orchestrates Playwright-based end-to-end testing across seven phases: test setup, test design, test implementation, browser automation, visual regression, cross-browser testing, and CI/CD integration. It covers installing Playwright, configuring test frameworks, designing test scenarios, writing test scripts, implementing visual testing with baseline images, running tests across Chromium, Firefox, and WebKit, and integrating with GitHub Actions for continuous testing.
How it connects
Use this workflow when setting up E2E testing infrastructure, automating browser tests, implementing visual regression testing, testing across multiple browsers, or integrating tests with CI/CD pipelines. It's appropriate for projects that need structured guidance through the complete E2E testing setup and implementation process using Playwright.
Source README
E2E Testing Workflow
Overview
Specialized workflow for end-to-end testing using Playwright including browser automation, visual regression testing, cross-browser testing, and CI/CD integration.
When to Use This Workflow
Use this workflow when:
- Setting up E2E testing
- Automating browser tests
- Implementing visual regression
- Testing across browsers
- Integrating tests with CI/CD
Workflow Phases
Phase 1: Test Setup
Skills to Invoke
playwright-skill- Playwright setupe2e-testing-patterns- E2E patterns
Actions
- Install Playwright
- Configure test framework
- Set up test directory
- Configure browsers
- Create base test setup
Copy-Paste Prompts
Use @playwright-skill to set up Playwright testing
Phase 2: Test Design
Skills to Invoke
e2e-testing-patterns- Test patternstest-automator- Test automation
Actions
- Identify critical flows
- Design test scenarios
- Plan test data
- Create page objects
- Set up fixtures
Copy-Paste Prompts
Use @e2e-testing-patterns to design E2E test strategy
Phase 3: Test Implementation
Skills to Invoke
playwright-skill- Playwright testswebapp-testing- Web app testing
Actions
- Write test scripts
- Add assertions
- Implement waits
- Handle dynamic content
- Add error handling
Copy-Paste Prompts
Use @playwright-skill to write E2E test scripts
Phase 4: Browser Automation
Skills to Invoke
browser-automation- Browser automationplaywright-skill- Playwright features
Actions
- Configure headless mode
- Set up screenshots
- Implement video recording
- Add trace collection
- Configure mobile emulation
Copy-Paste Prompts
Use @browser-automation to automate browser interactions
Phase 5: Visual Regression
Skills to Invoke
playwright-skill- Visual testingui-visual-validator- Visual validation
Actions
- Set up visual testing
- Create baseline images
- Add visual assertions
- Configure thresholds
- Review differences
Copy-Paste Prompts
Use @playwright-skill to implement visual regression testing
Phase 6: Cross-Browser Testing
Skills to Invoke
playwright-skill- Multi-browserwebapp-testing- Browser testing
Actions
- Configure Chromium
- Add Firefox tests
- Add WebKit tests
- Test mobile browsers
- Compare results
Copy-Paste Prompts
Use @playwright-skill to run cross-browser tests
Phase 7: CI/CD Integration
Skills to Invoke
github-actions-templates- GitHub Actionscicd-automation-workflow-automate- CI/CD
Actions
- Create CI workflow
- Configure parallel execution
- Set up artifacts
- Add reporting
- Configure notifications
Copy-Paste Prompts
Use @github-actions-templates to integrate E2E tests with CI
Quality Gates
- Tests passing
- Coverage adequate
- Visual tests stable
- Cross-browser verified
- CI integration working
Related Workflow Bundles
testing-qa- Testing workflowdevelopment- Developmentweb-performance-optimization- Performance
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
Discussion
Questions & comments · 0
Sign In Sign in to leave a comment.