hjemmesidekongen/e2e-testing-patterns
plugins/smedjen/skills/e2e-testing-patterns/SKILL.md
End-to-end testing patterns with Playwright and Cypress. Page object model, test fixtures, assertions, waiting strategies, and CI integration.
testing
Updated Apr 5, 2026
$ install --global
skillsauthnpx skillsauth add hjemmesidekongen/ai e2e-testing-patternsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 5, 2026, 5:28 PM18.3s3 files scanned
SKILL.md
- name:
- e2e-testing-patterns
- description:
- >
- user_invocable:
- false
- interactive:
- false
- model_tier:
- senior
- depends_on:
- []
- reads:
- []
- writes:
- []
- type:
- data_validation
- - name:
- test_isolation
- verify:
- Each test can run independently without depending on other test state
- fail_action:
- Add proper setup/teardown for test isolation
- on_fail:
- E2E tests have structural issues — fix before merging
- on_pass:
- E2E tests follow best practices
- origin:
- smedjen
- inspired_by:
- original
- ported_date:
- 2026-03-10
- iteration:
- 2
- changes:
- Replaced tutorial content with E2E architecture patterns and flaky test diagnosis
E2E Testing Patterns
When E2E Adds Value vs Wasted Effort
Worth the cost: cross-service workflows, auth flows spanning redirects/OAuth, payment/checkout (real payment gateway integration), multi-step wizards with server-side validation, features where the integration surface is the risk.
Wasted effort: CRUD forms with client-only validation, component rendering (use component tests), business logic testable in isolation, anything where test setup exceeds 3x the test body.
Test Data Management
Seeded database: snapshot a known-good DB state, restore before each suite. Fast but brittle when schema changes. API-driven setup: create test data via API calls in beforeAll. Slower but always matches current schema. Factory pattern: test-scoped data factories that create minimal required state — each test owns its data. Never share mutable data across tests. If two tests need the same user, create two users.
Parallel Execution
Shard by file, not by test — file-level sharding avoids shared-state conflicts. Playwright: --shard=1/4. CI: run shards as parallel jobs, merge reports with merge-reports. Each worker gets its own DB schema or tenant via WORKER_INDEX env var.
Visual Regression Testing
Snapshot comparison catches CSS regressions unit tests miss. Use toHaveScreenshot() with maxDiffPixelRatio: 0.01. Store baselines in git. Update with --update-snapshots only on intentional changes.
Mask dynamic content (timestamps, avatars, ads) with mask: [locator] to prevent false positives. Run visual tests in a single browser (Chromium) — cross-browser rendering diffs create noise.
Network Interception Decision
Mock API (route.fulfill): deterministic, fast, no backend dependency. Use for: error state testing, edge cases, offline behavior, rate limiting simulation.
Real backend: catches integration bugs mocks hide. Use for: critical happy paths, data integrity flows, auth token lifecycle.
Hybrid: mock third-party APIs, use real internal APIs. Best balance for most teams.
Flaky Test Diagnosis
- Timing? → Add explicit
waitForconditions, never arbitrary delays - Data dependency? → Test creates its own data, doesn't rely on seed state
- Animation/transition? → Disable CSS animations in test config
- Network race? → Wait for specific network response before asserting
- Viewport-dependent? → Set explicit viewport size in test config
- Third-party widget? → Mock the external script entirely
If a test fails >2% of runs after fixing, delete it. A flaky E2E test has negative value.
See references/process.md for page object implementation, fixture patterns, CI setup, and anti-patterns.
Related Skills
hjemmesidekongen/brand-strategy
development
VerifiedTrustedCommunity
Creates a brand from scratch through market research and interactive sparring. Runs competitive research via Perplexity, then guides the user through positioning, audience, voice, values, and content pillars. Produces the full brand guideline set at .ai/brand/{name}/. Use when building a new brand, defining brand strategy for a product, or when /våbenskjold:create is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-loader
testing
VerifiedTrustedCommunity
Loads brand guidelines from .ai/brand/{name}/ and makes them available to the current context. Progressive disclosure: L1 confirms brand exists, L2 loads summary, L3 loads specific files on demand. Use when a downstream skill or user needs brand context, or when /våbenskjold:apply is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-evolve
documentation
VerifiedTrustedCommunity
Guided reinvention of an existing brand guideline. Loads current brand from .ai/brand/{name}/, identifies what to keep vs change, and walks the user through targeted evolution. Preserves brand equity while updating positioning, voice, or values. Use when refreshing a brand or when /våbenskjold:evolve is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-audit
development
VerifiedTrustedCommunity
Codifies an existing brand from materials, samples, and references. Analyzes provided content to extract voice patterns, values, and positioning. Produces the same guideline format as brand-strategy. Use when a brand already exists but isn't documented, or when /våbenskjold:audit is invoked.
SKILL.mdUpdated Apr 5, 2026