Blog - Abbas ElDeniney

عن هذه المهارة

# Web Application Testing

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

Helper Scripts Available:

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

Always run scripts with --help first to see usage. DO NOT read the source until you try running the script first and find that a customized solution is abslutely 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.

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: 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

Example: Using with_server.py

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

**Single serv

…

حالات الاستخدام

`scripts/with_server.py` - Manages server lifecycle (supports multiple servers)
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()`
**examples/** - Examples showing common patterns:

التثبيت

حمّل ملف ZIP من الزر الموجود على اليسار.
فك ضغط المجلد.
ضع مجلد webapp-testing/ داخل ~/.claude/skills/.
أعد تشغيل Claude Code (أو جلسة Claude Desktop) — تُحمّل المهارة تلقائيًا.

# macOS / Linux
mkdir -p ~/.claude/skills
unzip claude-skill-webapp-testing.zip -d ~/.claude/skills/

ما الذي يتضمنه

LICENSE.txt

SKILL.md

examples/console_logging.py

examples/element_discovery.py

examples/static_html_automation.py

scripts/with_server.py

الأسئلة الشائعة

What does the Webapp Testing skill do?

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

Who should use it?

Anyone working with Claude on development-related tasks — consultants, founders, product teams, operators, and AI users who want repeatable, high-quality outputs from Claude.

How does it work?

Drop the folder into your `~/.claude/skills/` directory. Claude detects the SKILL.md instructions automatically and applies them when relevant.

What problem does it solve?

It removes the need to re-prompt Claude with the same context every time. Once the skill is installed, Claude already knows the rules, conventions, and procedures for this task.

How do I install it?

Download the ZIP, unzip it, and place the `webapp-testing/` folder inside `~/.claude/skills/`. No other setup required.

Is it free?

Yes — free download. We just ask for your name and work email so we can send useful Claude updates.

Can I get a custom version?

Yes. Abbas ElDeniney builds tailored Claude skills for specific business workflows and data sources. Book a consultation to scope your version.

Webapp Testing