Agent skill

Webapp Testing

by flonat in flonat/flonat-research

Exercise and verify a local web application through Playwright, including user flows and rendered behaviour.

Apache-2.0Auto-check passedTesting & QA

Install Webapp Testing

skills CLI
$ npx skills add flonat/flonat-research --skill webapp-testing -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install flonat/flonat-research webapp-testing --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/flonat/flonat-research.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/webapp-testing .claude/skills/webapp-testing && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
webapp-testing
GitHub stars
145
Token cost
~1.3k tokens
SKILL.md length
386 words
Files
6 (incl. scripts)
Skills in repo
83
Repo updated
First seen
Licence
Apache-2.0

At a glance

Exercise and verify a local web application through Playwright, including user flows and rendered behaviour.

  • Works in 3 steps: For a one-off page inspection without… → For repeatable assertions or managed… → Re-run the import preflight, then…
  • Testing a running local app rather than issuing an isolated browser command
  • SKILL.md covers Dependency Preflight, Decision Tree: Choosing Your…, Example: Using with_server.py and Reconnaissance-Then-Action…, plus 3 more sections
  • Runs Python scripts from its folder; calls uv and npm

What it does

Webapp Testing is an agent skill from flonat/flonat-research. Exercise and verify a local web application through Playwright, including user flows and rendered behaviour. Use when testing a running local app rather than issuing an isolated browser command. For ad hoc automation, use $playwright-cli.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including scripts (for example `examples/console_logging.py`, `examples/element_discovery.py` and `examples/static_html_automation.py`).

It sits in Testing & QA, covering Browser testing and UX design. It works with Playwright and Python. The repository describes itself as: Shareable Claude Code + Codex infrastructure for PhD researchers — skills, agents, hooks, and rules for academic workflows. The licence is Apache-2.0.

When your agent uses it

  • Testing a running local app rather than issuing an isolated browser command
  • Tasks that involve Browser testing
  • Tasks that involve UX design

Example prompts

  • “/webapp-testing”

Requirements

  • Python 3
  • Pre-approved tools (allowed-tools): Bash(uv*, mkdir*, ls*, kill*), Read, Write

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. For a one-off page inspection without custom assertions, use the declared
  2. For repeatable assertions or managed server testing, ask before installing
  3. Re-run the import preflight, then continue with native Python Playwright.

What it can do on your machine

Read from SKILL.md and the folder at commit da27600. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Bash(uv*
    • mkdir*
    • ls*
    • kill*)
    • Read
    • Write

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (Python), which the agent can run.

    Shell commands in SKILL.md call:

    • uv
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use uv and npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Webapp Testing loads about 1.3k tokens when it runs. Until then it costs about 63 tokens; SKILL.md has 386 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~63
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from flonat/flonat-research at commit da27600, republished under its Apache-2.0 licence (© flonat). 386 words, ~1,307 tokens.

Download SKILL.mdSave it as .claude/skills/webapp-testing/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
webapp-testing
description
Exercise and verify a local web application through Playwright, including user flows and rendered behaviour. Use when testing a running local app rather than issuing an isolated browser command. For ad hoc automation, use $playwright-cli.
allowed-tools
Bash(uv*, mkdir*, ls*, kill*), Read, Write
license
Complete terms in LICENSE.txt
skill-dependencies
playwright-cli

Web Application Testing

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

Use this skill when the task needs local server lifecycle management, custom Python assertions, or a repeatable test script. For ad-hoc browser navigation and interaction that does not need custom Python, use $playwright-cli.

Helper Scripts Available:

  • scripts/with_server.py - Manages server lifecycle (supports multiple servers)

Always run helper scripts with --help first to see usage. DO NOT read the source until you try running the helper and find that a customized solution is absolutely necessary. These scripts can be very large and thus pollute your context window. They exist to be called directly as black-box scripts rather than ingested into your context window.

Dependency Preflight

Before writing a native Playwright script, verify the selected project environment:

bash
uv run python -c "from importlib.metadata import version; print(version('playwright'))"

If the import fails:

  1. For a one-off page inspection without custom assertions, use the declared $playwright-cli fallback.

  2. For repeatable assertions or managed server testing, ask before installing dependencies. After approval, install into the project's development environment rather than adding a browser runtime to production dependencies:

    bash
    uv pip install --python <project>/.venv/bin/python playwright
    uv run python -m playwright install chromium
  3. Re-run the import preflight, then continue with native Python Playwright.

If the project already declares a Playwright dev extra, prefer syncing that extra over an ad-hoc environment install. Never use bare pip or a machine-global Python environment.

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 → Run: uv run python scripts/with_server.py --help
        │        Then use the helper + write simplified Playwright script
        │
        └─ 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
Show full SKILL.md (175 more words)Show less

Example: Using with_server.py

To start a server, run --help first, then use the helper:

Single server:

bash
uv run python scripts/with_server.py --server "npm run dev" --port 5173 -- uv run python your_automation.py

Multiple servers (e.g., backend + frontend):

bash
uv run python scripts/with_server.py \
  --server "cd backend && uv run python server.py" --port 3000 \
  --server "cd frontend && npm run dev" --port 5173 \
  -- uv run python your_automation.py

To create an automation script, include only Playwright logic (servers are managed automatically):

python
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True) # Always launch chromium in headless mode
    page = browser.new_page()
    page.goto('http://localhost:5173') # Server already running and ready
    page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute
    # ... your automation logic
    browser.close()

Reconnaissance-Then-Action Pattern

  1. Inspect rendered DOM:

    python
    page.screenshot(path='/tmp/inspect.png', full_page=True)
    content = page.content()
    page.locator('button').all()
  2. Identify selectors from inspection results

  3. Execute actions using discovered selectors

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

  • Use bundled scripts as black boxes - To accomplish a task, consider whether one of the scripts available in scripts/ can help. These scripts handle common, complex workflows reliably without cluttering the context window. Use --help to see usage, then invoke directly.
  • Use sync_playwright() for synchronous scripts
  • Always close the browser when done
  • Use descriptive selectors: text=, role=, CSS selectors, or IDs
  • Add appropriate waits: page.wait_for_selector() or page.wait_for_timeout()

Reference Files

  • examples/ - Examples showing common patterns:
    • element_discovery.py - Discovering buttons, links, and inputs on a page
    • static_html_automation.py - Using file:// URLs for local HTML
    • console_logging.py - Capturing console logs during automation

© flonat, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files (scripts) in skills/webapp-testing of flonat/flonat-research.

  • SKILL.md
  • LICENSE.txt
  • examples/console_logging.py
  • examples/element_discovery.py
  • examples/static_html_automation.py
  • scripts/with_server.py

Open the folder on GitHubat commit da27600

Compare with similar skills

Webapp Testing next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Webapp Testing compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Webapp Testing this skillflonat/flonat-research145—~1.3kAutomated safety check: PassApache-2.0
Web Application Testinganthropics/skills180k51 repos~966Automated safety check: PassApache-2.0
RStudio Selenium to Playwright Migrationrstudio/rstudio5.1k—~3.6kAutomated safety check: PassCustom licence
Brightdata Proxybrightdata/skills264—~5.1kAutomated safety check: PassMIT
JS-in-HTML Testingliaohch3/claude-tap3.3k—~924Automated safety check: PassMIT
Playwright Screen Recordingliaohch3/claude-tap3.3k—~714Automated safety check: PassMIT

Similar skills

  • Web Application Testing

    anthropics/skills

    Official

    Tests local web applications with Python Playwright scripts, checking frontend behavior, capturing screenshots and reading browser console logs.

    180k GitHub starsUsed in 51 repos~966 tokens
    Testing & QAAuto-check passed
  • Converts RStudio Python Selenium electron tests into TypeScript Playwright tests, checking each against a live RStudio before counting it as migrated.

    5.1k GitHub stars~3.6k tokensUpdated today
    Testing & QAAuto-check passed
  • Brightdata Proxy

    brightdata/skills

    Generate working code that routes HTTP requests through Bright Data proxy networks (Datacenter, ISP, Residential, Mobile) and help users decide which network and IP pool type to use (shared pool…

    264 GitHub stars~5.1k tokensUpdated yesterday
    Testing & QAAuto-check passed
  • JS-in-HTML Testing

    liaohch3/claude-tap

    Tests JavaScript embedded in an HTML file in two layers: pytest checks of the logic ported to Python, and Playwright runs in a real browser for the DOM.

    3.3k GitHub stars~924 tokensUpdated 16 days ago
    Testing & QAAuto-check passed
  • Playwright Screen Recording

    liaohch3/claude-tap

    Records headless Playwright sessions as .webm videos to show a bug fix working or to give pull request reviewers visual evidence.

    3.3k GitHub stars~714 tokensUpdated 16 days ago
    Testing & QAAuto-check passed
  • Xhs Auto Publisher

    DjangoPeng/agentic-ai

    面向云服务器的小红书图文自动发布 Skill。适用于需要在 Linux 云服务器上,通过 Playwright/CDP、二维码人工接管、登录缓存、龙虾代发飞书群图片消息、截图留痕与审计日志来完成小红书草稿或发布流程的场景。

    152 GitHub stars~570 tokensUpdated 3 mo ago
    Testing & QAAuto-check passed

More from flonat/flonat-research

All 83 skills in this repo
  • Latex Posters

    flonat/flonat-research

    Create a large-format academic poster in LaTeX using beamerposter, tikzposter, or baposter.

    145 GitHub stars~1.5k tokensUpdated 9 days ago
    Auto-check: notes
  • Skill Creator

    flonat/flonat-research

    Create, revise, and evaluate reusable AI workflow skills, including trigger-quality tests.

    145 GitHub stars~4.4k tokensUpdated 9 days ago
    Auto-check passed
  • DOCX

    flonat/flonat-research

    Create, read, edit, or convert Microsoft Word documents while preserving professional document structure.

    145 GitHub stars~1.2k tokensUpdated 9 days ago
    Auto-check passed
  • PDF

    flonat/flonat-research

    Read, create, combine, split, rotate, OCR, watermark, secure, or extract content from PDF files.

    145 GitHub stars~488 tokensUpdated 9 days ago
    Auto-check passed
  • Init Project Orchestration

    flonat/flonat-research

    Create or migrate project-level agents, repeatable project workflows, and planning state from one client-neutral contract, then render repository-scoped adapters for both Claude Code and Codex.

    145 GitHub stars~1.6k tokensUpdated 9 days ago
    Auto-check passed
  • Pre Commit Audit

    flonat/flonat-research

    Deliver a fast pre-commit safety scan: file size, anonymity (author / affiliation strings in tex/bib), hardcoded secrets, and invisible-Unicode carriers.

    145 GitHub stars~2.8k tokensUpdated 9 days ago
    Auto-check: notes

Categories

Questions about Webapp Testing

What does Webapp Testing do?

Exercise and verify a local web application through Playwright, including user flows and rendered behaviour. Webapp Testing is an agent skill from flonat/flonat-research. Exercise and verify a local web application through Playwright, including user flows and rendered behaviour.

When should I use Webapp Testing?

Webapp Testing fits situations like: testing a running local app rather than issuing an isolated browser command; tasks that involve Browser testing; tasks that involve UX design.

How do I install Webapp Testing in Claude Code?

Run `npx skills add flonat/flonat-research --skill webapp-testing -a claude-code`. Or copy the skill folder (skills/webapp-testing in flonat/flonat-research) into .claude/skills/webapp-testing in your project. Claude Code loads it when a task matches its description.

How do I install Webapp Testing in Codex?

Run `npx skills add flonat/flonat-research --skill webapp-testing -a codex`. Or copy the skill folder (skills/webapp-testing in flonat/flonat-research) into .agents/skills/webapp-testing in your project. Codex loads it when a task matches its description.

Can I use Webapp Testing in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add flonat/flonat-research --skill webapp-testing -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/webapp-testing, .gemini/skills/webapp-testing, .github/skills/webapp-testing and .opencode/skills/webapp-testing in your project.

What does Webapp Testing need to run?

Going by SKILL.md and its folder, Webapp Testing needs Python for the scripts in its folder and the command-line tools its instructions call (uv and npm). Our summary lists: Python 3. Its frontmatter pre-approves these tools: Bash(uv*, mkdir*, ls*, kill*), Read, Write.

Does Webapp Testing access the network?

SKILL.md contains no URLs. Its commands use uv and npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Webapp Testing safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Webapp Testing use?

Webapp Testing is published under the Apache-2.0 licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Webapp Testing use?

About 1.3k tokens (SKILL.md is roughly 5.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Webapp Testing?

Skills that share tags, products or a category with Webapp Testing: Web Application Testing (anthropics/skills, 180k stars), RStudio Selenium to Playwright Migration (rstudio/rstudio, 5.1k stars), Brightdata Proxy (brightdata/skills, 264 stars) and JS-in-HTML Testing (liaohch3/claude-tap, 3.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Webapp Testing?

flonat (a GitHub user) maintains it in flonat/flonat-research, which has 145 GitHub stars. The repository holds 83 skills in this directory. The repository was last updated on September 29, 2026.

Source: flonat/flonat-research on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.