Skip to content
webapp-testing logo

Web App Testing

webapp-testing

Web application testing principles. E2E, Playwright, deep audit strategies.

lchenrique/politron-ide0installs0stars

SKILL.md

Full skill instructions

Web App Testing

Discover and test everything. Leave no route untested.

🔧 Runtime Scripts

Execute these for automated browser testing:

ScriptPurposeUsage
scripts/​playwright_runner.pyBasic browser testpython scripts/​playwright_runner.py https://example.com
With screenshotpython scripts/​playwright_runner.py <url> --screenshot
Accessibility checkpython scripts/​playwright_runner.py <url> --a11y

Requires: pip install playwright && playwright install chromium


1. Deep Audit Approach

Discovery First

TargetHow to Find
RoutesScan app/, pages/, router files
API endpointsGrep for HTTP methods
ComponentsFind component directories
FeaturesRead documentation

Systematic Testing

  1. Map - List all routes/​APIs
  2. Scan - Verify they respond
  3. Test - Cover critical paths

2. Testing Pyramid for Web

        /\          E2E (Few)
       /  \         Critical user flows
      /​----\
     /      \       Integration (Some)
    /​--------\      API, data flow
   /          \
  /​------------\    Component (Many)
                    Individual UI pieces

3. E2E Test Principles

What to Test

PriorityTests
1Happy path user flows
2Authentication flows
3Critical business actions
4Error handling

E2E Best Practices

PracticeWhy
Use data-testidStable selectors
Wait for elementsAvoid flaky tests
Clean stateIndependent tests
Avoid implementation detailsTest user behavior

4. Playwright Principles

Core Concepts

ConceptUse
Page Object ModelEncapsulate page logic
FixturesReusable test setup
AssertionsBuilt-in auto-wait
Trace ViewerDebug failures

Configuration

SettingRecommendation
Retries2 on CI
Traceon-first-retry
Screenshotson-failure
Videoretain-on-failure

5. Visual Testing

When to Use

ScenarioValue
Design systemHigh
Marketing pagesHigh
Component libraryMedium
Dynamic contentLower

Strategy

  • Baseline screenshots
  • Compare on changes
  • Review visual diffs
  • Update intentional changes

6. API Testing Principles

Coverage Areas

AreaTests
Status codes200, 400, 404, 500
Response shapeMatches schema
Error messagesUser-friendly
Edge casesEmpty, large, special chars

7. Test Organization

File Structure

tests/
├── e2e/           # Full user flows
├── integration/   # API, data
├── component/     # UI units
└── fixtures/      # Shared data

Naming Convention

PatternExample
Feature-basedlogin.spec.ts
Descriptiveuser-can-checkout.spec.ts

8. CI Integration

Pipeline Steps

  1. Install dependencies
  2. Install browsers
  3. Run tests
  4. Upload artifacts (traces, screenshots)

Parallelization

StrategyUse
Per filePlaywright default
ShardingLarge suites
WorkersMultiple browsers

9. Anti-Patterns

❌ Don't✅ Do
Test implementationTest behavior
Hardcode waitsUse auto-wait
Skip cleanupIsolate tests
Ignore flaky testsFix root cause

Remember: E2E tests are expensive. Use them for critical paths only.

More skills from lchenrique

api-patterns logo
lchenrique/politron-ide

api-patterns

API design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning, pagination.

0 0
View
deployment-procedures logo
lchenrique/politron-ide

deployment-procedures

Production deployment principles and decision-making. Safe deployment workflows, rollback strategies, and verification. Teaches thinking, not scripts.

0 0
View
game-design logo
lchenrique/politron-ide

game-design

Game design principles. GDD structure, balancing, player psychology, progression.

0 0
View
game-audio logo
lchenrique/politron-ide

game-audio

Game audio principles. Sound design, music integration, adaptive audio systems.

0 0
View
architecture logo
lchenrique/politron-ide

architecture

Architectural decision-making framework. Requirements analysis, trade-off evaluation, ADR documentation. Use when making architecture decisions or analyzing system design.

0 0
View
mobile-games logo
lchenrique/politron-ide

mobile-games

Mobile game development principles. Touch input, battery, performance, app stores.

0 0
View
parallel-agents logo
lchenrique/politron-ide

parallel-agents

Multi-agent orchestration patterns. Use when multiple independent tasks can run with different domain expertise or when comprehensive analysis requires multiple perspectives.

0 0
View
brainstorming logo
lchenrique/politron-ide

brainstorming

Socratic questioning protocol + user communication. MANDATORY for complex requests, new features, or unclear requirements. Includes progress reporting and error handling.

0 0
View
i18n-localization logo
lchenrique/politron-ide

i18n-localization

Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support.

0 0
View
geo-fundamentals logo
lchenrique/politron-ide

geo-fundamentals

Generative Engine Optimization for AI search engines (ChatGPT, Claude, Perplexity).

0 0
View
tailwind-patterns logo
lchenrique/politron-ide

tailwind-patterns

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

0 0
View
multiplayer logo
lchenrique/politron-ide

multiplayer

Multiplayer game development principles. Architecture, networking, synchronization.

0 0
View

Popular AI tools

Kaiber logo
Video

Kaiber

Generate, edit, and beat-sync AI video with leading models in one workspace.

Paid
View
Vimcal logo
Productivity

Vimcal

The world's fastest calendar for remote work

Free
View

Transform Your Design with AI Designer by ImgCreator.ai

Freemium
View
Akool AI logo
Content & writing

Akool AI

Revolutionizing Video Production with AI-Powered Creativity

Paid
View

Extend an image past the frame and let AI fill the new aspect ratio.

Freemium
View
StarByFace logo
Security

StarByFace

Discover your celebrity doppelgänger with StarByFace!

Free
View
C

ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.

Freemium
View
Opus Clip logo
Coding & apps

Opus Clip

Opus.ai: Revolutionize Your Web Experience

Free
View