End-to-end testing workflow with Playwright for browser automation, visual regression, cross-browser testing, and CI/CD integration.
✓Works with OpenClaudeOverview
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
Related granular-workflow-bundle Skills
Other Claude Code skills in the same category — free to download.
ai-agent-development
AI agent development workflow for building autonomous agents, multi-agent systems, and agent orchestration with CrewAI, LangGraph, and custom agents.
api-security-testing
API security testing workflow for REST and GraphQL APIs covering authentication, authorization, rate limiting, input validation, and security best practices.
bash-scripting
Bash scripting workflow for creating production-ready shell scripts with defensive patterns, error handling, and testing.
kubernetes-deployment
Kubernetes deployment workflow for container orchestration, Helm charts, service mesh, and production-ready K8s configurations.
linux-troubleshooting
Linux system troubleshooting workflow for diagnosing and resolving system issues, performance problems, and service failures.
postgresql-optimization
PostgreSQL database optimization workflow for query tuning, indexing strategies, performance analysis, and production database management.
python-fastapi-development
Python FastAPI backend development with async patterns, SQLAlchemy, Pydantic, authentication, and production API patterns.
rag-implementation
RAG (Retrieval-Augmented Generation) implementation workflow covering embedding selection, vector database setup, chunking strategies, and retrieval optimization.
Want a granular-workflow-bundle skill personalized to YOUR project?
This is a generic skill that works for everyone. Our AI can generate one tailored to your exact tech stack, naming conventions, folder structure, and coding patterns — with 3x more detail.