agentleFS
Sign inStart free
TheArchitectitTheArchitectit/awesome-cline-skills/skills/webapp-testing/SKILL.md

webapp-testing

Skill8 starsChanged 3 months agoApache-2.0View on GitHub

Toolkit for interacting with and testing local web applications using Playwright. This skill should be used when verifying frontend functionality, debugging UI behavior, capturing browser screenshots, checking page content, or automating browser interactions for testing purposes.

  • Installs packages

We split this skill into the rules it gives an agent

7 rules. 1 is common, 3 are distinctive, and 3 are very specific to this project.

  • 1

    Common

    Most of the 191 edited versions we read keep these.

  • 3

    Distinctive

    This author's own choices. Worth a look.

  • 3

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Always use sync_playwright() for synchronous scripts

    line 165
  2. Distinctive:

    Always launch Chromium in headless mode

    line 166
  3. Common:

    Always close the browser when done

    line 167
  4. Distinctive:

    Use descriptive selectors: text, role, label, or test ID

    line 168
  5. Distinctive:

    Add appropriate waits before interacting with elements

    line 169
  6. Very specific:

    Use full_page=True for comprehensive visual debugging

    line 171
  7. Very specific:

    Progressive loading: Only metadata loads initially.

    line 177

“Common” is measured: kept by at least 6 in 10 of the 191 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Web Application Testing

To test local web applications, write native Python Playwright scripts.

Decision Tree: Choosing Your Approach

User task → Is it static HTML?
    ├─ Yes → Read HTML file directly to identify selectors
    │         ├─ Success → Write Playwright script using selectors
    │         └─ Fails/Incomplete → Treat as dynamic (below)
    │
    └─ No (dynamic webapp) → Is the server already running?
        ├─ No → Start the server, then proceed
        │
        └─ Yes → Reconnaissance-then-action:
            1. Navigate and wait for networkidle
            2. Take screenshot or inspect DOM
            3. Identify selectors from rendered state
            4. Execute actions with discovered selectors

Quick Start

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)  # Always use headless mode
    page = browser.new_page()
    page.goto('http://localhost:3000')
    page.wait_for_load_state('networkidle')  # CRITICAL: Wait for JS to execute
    page.screenshot(path='screenshot.png', full_page=True)
    browser.close()

Prerequisites

Install Playwright:

pip install playwright
playwright install chromium

Reconnaissance-Then-Action Pattern

For dynamic applications, always inspect before acting:

1. Inspect the Rendered DOM

# Take a screenshot to see what's visible
page.screenshot(path='/tmp/inspect.png', full_page=True)

# Get the full HTML content
content = page.content()

# Find all interactive elements
buttons = page.locator('button').all()
links = page.locator('a').all()
inputs = page.locator('input').all()

2. Identify Selectors

From the inspection results, identify reliable selectors:

  • Text-based: page.get_by_text("Submit")
  • Role-based: page.get_by_role("button", name="Save")
  • Label-based: page.get_by_label("Email")
  • Test ID: page.get_by_test_id("login-btn")
  • CSS: page.locator(".submit-button")

3. Execute Actions

# Click
page.get_by_role("button", name="Submit").click()

# Type text
page.get_by_label("Email").fill("user@example.com")

# Select dropdown
page.get_by_label("Country").select_option("US")

# Check checkbox
page.get_by_label("Accept terms").check()

Common Testing Patterns

Testing Page Navigation

page.goto('http://localhost:3000')
page.wait_for_load_state('networkidle')

# Click a link and wait for navigation
with page.expect_navigation():
    page.get_by_text("About").click()

assert page.url == 'http://localhost:3000/about'

Testing Form Submission

page.goto('http://localhost:3000/contact')
page.wait_for_load_state('networkidle')

# Fill form
page.get_by_label("Name").fill("Test User")
page.get_by_label("Email").fill("test@example.com")
page.get_by_label("Message").fill("Hello World")

# Submit and check result
page.get_by_role("button", name="Send").click()
page.wait_for_selector(".success-message")
assert page.get_by_text("Message sent").is_visible()

Capturing Console Logs

logs = []

def handle_console(msg):
    logs.append(f"{msg.type}: {msg.text}")

page.on("console", handle_console)
page.goto('http://localhost:3000')
page.wait_for_load_state('networkidle')

# Check for errors
errors = [log for log in logs if log.startswith("error")]
if errors:
    print(f"Console errors found: {errors}")

Waiting for Dynamic Content

# Wait for specific element
page.wait_for_selector(".data-loaded")

# Wait for network to be idle
page.wait_for_load_state('networkidle')

# Wait with custom timeout
page.wait_for_selector(".result", timeout=10000)

Common Pitfall

❌ Don't inspect the DOM before waiting for networkidle on dynamic apps ✅ Do wait for page.wait_for_load_state('networkidle') before inspection

Best Practices

  • Always use sync_playwright() for synchronous scripts
  • Always launch Chromium in headless mode
  • Always close the browser when done
  • Use descriptive selectors: text, role, label, or test ID
  • Add appropriate waits before interacting with elements
  • Take screenshots to debug unexpected behavior
  • Use full_page=True for comprehensive visual debugging

Cline Workflow Notes

  1. Install location: Copy this skill directory to .cline/skills/webapp-testing/ (project-level) or ~/.cline/skills/webapp-testing/ (global)
  2. Activation: Cline will suggest this skill when you need to test a web app, take browser screenshots, or debug UI behavior
  3. Progressive loading: Only metadata loads initially; full testing patterns activate via use_skill when testing begins

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free