FREE

granular-workflow-bundle

e2e-testing

End-to-end testing workflow with Playwright for browser automation, visual regression, cross-browser testing, and CI/CD integration.

Try it — you'd type

“Help me with e2e-testing.”

And you'd get back

End-to-end testing workflow with Playwright for browser automation, visual regression, cross-browser testing, and CI/CD integration.

Formatted for Claude, no fluff, no preamble.

Works the same way every time you ask.

Adding it takes about 30 seconds

Click Get this skill. Grab the .md file, one click, no account needed.

Add it to Claude. Drop it into ~/.claude/skills/. Claude picks it up the next time you open a session.

Ask normally. Type your question. The skill triggers on the right keywords — you don't have to remember anything.

Get this skill Unlock all skills — $25

You might also like

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.

SKILL FILEWhat Claude actually reads

## 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 setup
- `e2e-testing-patterns` - E2E patterns

#### Actions
1. Install Playwright
2. Configure test framework
3. Set up test directory
4. Configure browsers
5. 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 patterns
- `test-automator` - Test automation

#### Actions
1. Identify critical flows
2. Design test scenarios
3. Plan test data
4. Create page objects
5. 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 tests
- `webapp-testing` - Web app testing

#### Actions
1. Write test scripts
2. Add assertions
3. Implement waits
4. Handle dynamic content
5. Add error handling

#### Copy-Paste Prompts
```
Use @playwright-skill to write E2E test scripts
```

### Phase 4: Browser Automation

#### Skills to Invoke
- `browser-automation` - Browser automation
- `playwright-skill` - Playwright features

#### Actions
1. Configure headless mode
2. Set up screenshots
3. Implement video recording
4. Add trace collection
5. Configure mobile emulation

#### Copy-Paste Prompts
```
Use @browser-automation to automate browser interactions
```

### Phase 5: Visual Regression

#### Skills to Invoke
- `playwright-skill` - Visual testing
- `ui-visual-validator` - Visual validation

#### Actions
1. Set up visual testing
2. Create baseline images
3. Add visual assertions
4. Configure thresholds
5. Review differences

#### Copy-Paste Prompts
```
Use @playwright-skill to implement visual regression testing
```

### Phase 6: Cross-Browser Testing

#### Skills to Invoke
- `playwright-skill` - Multi-browser
- `webapp-testing` - Browser testing

#### Actions
1. Configure Chromium
2. Add Firefox tests
3. Add WebKit tests
4. Test mobile browsers
5. 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 Actions
- `cicd-automation-workflow-automate` - CI/CD

#### Actions
1. Create CI workflow
2. Configure parallel execution
3. Set up artifacts
4. Add reporting
5. 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 workflow
- `development` - Development
- `web-performance-optimization` - Performance