OpenSkillIndex← back to search
claude-code

Antigravity-kit webapp-testing

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

install
source · Clone the upstream repo
git clone https://github.com/vudovn/antigravity-kit
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/vudovn/antigravity-kit "$T" && mkdir -p ~/.claude/skills && cp -r "$T/.agent/skills/webapp-testing" ~/.claude/skills/vudovn-antigravity-kit-webapp-testing && rm -rf "$T"
manifest: .agent/skills/webapp-testing/SKILL.md
source content

Web App Testing

Discover and test everything. Leave no route untested.

🔧 Runtime Scripts

Execute these for automated browser testing:

ScriptPurposeUsage
scripts/playwright_runner.py
Basic browser test
python scripts/playwright_runner.py https://example.com
With screenshot
python scripts/playwright_runner.py <url> --screenshot
Accessibility check
python 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-based
login.spec.ts
Descriptive
user-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.