New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

JS-in-HTML Testing

by liaohch3 in 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.

MITAuto-check passedTesting & QA

Install JS-in-HTML Testing

skills CLI
$ npx skills add liaohch3/claude-tap --skill js-in-html-testing -a claude-code

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

GitHub CLI
$ gh skill install liaohch3/claude-tap js-in-html-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/liaohch3/claude-tap.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/js-in-html-testing .claude/skills/js-in-html-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
js-in-html-testing
GitHub stars
3.3k
Token cost
~924 tokens
SKILL.md length
167 words
Files
1
Skills in repo
11
Repo updated
First seen
Licence
MIT

At a glance

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.

  • Adding tests for JavaScript that is inlined in a single HTML page
  • SKILL.md covers Layer 1: Python Unit Tests…, Layer 2: Playwright Browser…, Notes and Running
  • Calls uv
  • Checking button states, overlays and keyboard navigation in a generated HTML viewer

What it does

For logic that lives inside an HTML file, such as the diff navigation in a trace viewer page, this skill splits testing into two layers. The first copies the core algorithms into Python and checks them with pytest, which is quick and needs no browser; it suits pure computation, state decisions and matching logic that does not touch the DOM.

The second layer builds a test HTML file with the data embedded, opens it in Chromium through Playwright and inspects the DOM after simulated clicks and key presses. That covers things like disabled buttons and overlays that show and hide. Notes warn that `</script>` text inside test data breaks script parsing and must be escaped, that test data has to match the viewer's JSONL format, and that Playwright is installed with `uv pip install playwright`.

When your agent uses it

  • Adding tests for JavaScript that is inlined in a single HTML page
  • Checking button states, overlays and keyboard navigation in a generated HTML viewer
  • Verifying a pure JavaScript algorithm quickly without launching a browser

Example prompts

  • “Write tests for the next and previous diff navigation in viewer.html.”
  • “The overlay logic in report.html has no tests; cover the matching algorithm in pytest first.”
  • “Add a Playwright test that clicks the next button and checks it is disabled on the last item.”

Requirements

  • Python with pytest
  • Playwright for Python and Chromium
  • uv

What it can do on your machine

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

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • uv

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

  • Network

    No URLs in SKILL.md. Its commands use uv, 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

JS-in-HTML Testing loads about 924 tokens when it runs. Until then it costs about 33 tokens; SKILL.md has 167 words of instructions outside code blocks.

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

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); files beside SKILL.md are not scanned.

SKILL.md

The full file from liaohch3/claude-tap at commit 4cc867d, republished under its MIT licence (© liaohch3). 167 words, ~924 tokens.

Download SKILL.mdSave it as .claude/skills/js-in-html-testing/SKILL.md (or your agent's skills folder).
name
js-in-html-testing
description
Test JS logic embedded in HTML using two-layer strategy - Python unit tests + Playwright browser integration tests
user_invocable
false

JS-in-HTML Two-Layer Testing Strategy

For JavaScript logic embedded in HTML files (e.g., diff navigation in viewer.html), use a two-layer testing approach.

Layer 1: Python Unit Tests (fast algorithm verification)

Replicate core JS algorithms in Python and verify correctness via pytest.

Best for: pure computation logic, state decisions, matching algorithms — anything that doesn't depend on the DOM.

Example: tests/test_diff_matching.py

python
# Replicate JS findPrevSameModel / findNextSameModel
def find_diff_parent_by_prefix(entries, idx): ...


def find_next_by_prefix(entries, idx): ...


# Replicate JS updateNavButtons state computation
def compute_nav_button_states(entries, cur_idx):
    prev_idx = find_diff_parent_by_prefix(entries, cur_idx)
    ...
    return (prev_enabled, next_enabled)

Advantages: fast (0.02s), no browser dependency, integrates with existing pytest setup.

Layer 2: Playwright Browser Integration Tests (DOM interaction verification)

Generate HTML with test data embedded, open it in real Chromium via Playwright, and verify DOM state and user interactions.

Best for: button disabled states, overlay show/hide, keyboard events, click navigation, etc.

Example: tests/test_nav_browser.py

Building test HTML
python
def _build_test_html():
    from claude_tap.viewer import VIEWER_SCRIPT_ANCHOR, _read_viewer_template

    template = _read_viewer_template()
    records = [json.dumps(e) for e in TEST_ENTRIES]
    data_js = "const EMBEDDED_TRACE_DATA = [\n" + ",\n".join(records) + "\n];\n"
    # Inject data into template
    return template.replace(
        VIEWER_SCRIPT_ANCHOR,
        f"<script>\n{data_js}</script>\n{VIEWER_SCRIPT_ANCHOR}",
        1,
    )
Playwright fixture
python
@pytest.fixture(scope="module")
def browser_page(html_file):
    from playwright.sync_api import sync_playwright

    pw = sync_playwright().start()
    browser = pw.chromium.launch(headless=True)
    page = browser.new_page()
    page.goto(f"file://{html_file}")
    page.wait_for_selector(".sidebar-item", timeout=5000)
    yield page
    browser.close()
    pw.stop()
Verifying DOM state
python
def _get_nav_state(page):
    return page.evaluate("""() => {
        const overlay = document.querySelector('.diff-overlay');
        if (!overlay) return { overlayExists: false };
        return {
            overlayExists: true,
            prevDisabled: overlay.querySelector('.diff-nav-prev')?.disabled,
            nextDisabled: overlay.querySelector('.diff-nav-next')?.disabled,
            title: overlay.querySelector('.diff-title')?.textContent,
        };
    }""")
Simulating user interaction
python
# Click buttons
page.click(".diff-nav-next")
# Keyboard navigation
page.keyboard.press("ArrowRight")
# Call internal JS functions
page.evaluate("selectEntry(2)")
page.evaluate("showDiff()")

Notes

  • Trace data may contain </script> text (e.g., when Claude discusses code), which breaks <script> block parsing. Escape it: line.replace("</script>", '</scr" + "ipt>')
  • Test data must match the viewer's expected JSONL format (including turn, duration_ms, request_id, request.path, etc.)
  • Playwright requires uv pip install playwright

Running

bash
# Fast unit tests
uv run pytest tests/test_diff_matching.py -v

# Browser integration tests
uv run pytest tests/test_nav_browser.py -v

# All (excluding slow e2e)
uv run pytest tests/ --ignore=tests/test_e2e.py -v

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

Files

Just SKILL.md in .agents/skills/js-in-html-testing of liaohch3/claude-tap.

Open the folder on GitHubat commit 4cc867d

Compare with similar skills

JS-in-HTML 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.

JS-in-HTML Testing compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
JS-in-HTML Testing this skillliaohch3/claude-tap3.3k—~924Automated safety check: PassMIT
Python Testingmacalbert/envilder138—~3.1kAutomated safety check: PassMIT
Temporal Python Testingwshobson/agents40k12 repos~1.2kAutomated safety check: PassMIT
E2E TestingOpentrons/opentrons521—~3kAutomated safety check: NotesApache-2.0
Dotnet Testingnovotnyllc/dotnet-artisan233—~972Automated safety check: PassMIT
Dotnet Testingmacalbert/envilder138—~1.6kAutomated safety check: PassMIT

Similar skills

  • Python Testing

    macalbert/envilder

    Mandatory testing conventions including AAA pattern, test naming, assertions, and mocks.

    138 GitHub stars~3.1k tokensUpdated 3 days ago
    Testing & QAAuto-check passed

  • Temporal Python Testing

    wshobson/agents

    Test Temporal workflows with pytest, time-skipping, and mocking strategies.

    40k GitHub starsUsed in 12 repos~1.2k tokens
    Testing & QAAuto-check passed

  • E2E Testing

    Opentrons/opentrons

    E2E testing conventions for Protocol Designer and Labware Library using Playwright + pytest in e2e-testing/.

    521 GitHub stars~3k tokensUpdated today
    Testing & QAAuto-check: notes

  • Dotnet Testing

    novotnyllc/dotnet-artisan

    Defines .NET test strategy and implementation patterns across xUnit v3 (Facts, Theories, fixtures, IAsyncLifetime), integration testing (WebApplicationFactory, Testcontainers), Aspire testing…

    233 GitHub stars~972 tokensUpdated today
    Testing & QAAuto-check passed

  • Dotnet Testing

    macalbert/envilder

    Mandatory testing conventions for .NET (xUnit, AwesomeAssertions).

    138 GitHub stars~1.6k tokensUpdated 3 days ago
    Testing & QAAuto-check passed

  • Claude Code QA

    PramodDutta/qaskills

    The complete QA skill for Claude Code — turn Claude into an expert QA engineer that picks the right test type, writes reliable Playwright, Cypress, and pytest tests, eliminates flaky tests, enforces…

    232 GitHub stars~2.3k tokensUpdated 4 days ago
    Testing & QAAuto-check passed

More from liaohch3/claude-tap

All 11 skills in this repo

  • Codex E2E Trace Validation

    liaohch3/claude-tap

    Runs a real Codex CLI session through claude-tap and produces trace evidence and viewer screenshots for pull requests that touch capture, proxying or the viewer.

    3.3k GitHub stars~3k tokensUpdated 16 days ago
    Auto-check passed

  • Terminal Demo Video Recorder

    liaohch3/claude-tap

    Records a real tmux end-to-end run with asciinema, converts it to a GIF and MP4, and captures trace viewer screenshots with Playwright.

    3.3k GitHub stars~545 tokensUpdated 16 days ago
    Auto-check passed

  • Maintainer Docs Legibility Check

    liaohch3/claude-tap

    Runs local checks on maintainer docs for stale review dates, missing manifest paths and plan state drift, matching what the CI workflow enforces.

    3.3k GitHub stars~561 tokensUpdated 16 days ago
    Auto-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
    Auto-check passed

  • PR Preflight Check

    liaohch3/claude-tap

    Runs a single merge-readiness check on a pull request: metadata, GitHub Actions status, local lint, format and test gates, and PR body rules, ending in READY or NOT_READY.

    3.3k GitHub stars~615 tokensUpdated 16 days ago
    Auto-check passed

  • Push and PyPI Release

    liaohch3/claude-tap

    Pushes the current work to GitHub and, when pending commits change code, bumps the version in pyproject.toml so CI publishes a new PyPI release.

    3.3k GitHub stars~509 tokensUpdated 16 days ago
    Auto-check passed

Works with

Categories

Questions about JS-in-HTML Testing

What does JS-in-HTML Testing do?

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. For logic that lives inside an HTML file, such as the diff navigation in a trace viewer page, this skill splits testing into two layers. The first copies the core algorithms into Python and checks them with pytest, which is quick and needs no browser; it suits pure computation, state decisions and matching logic that does not touch the DOM.

When should I use JS-in-HTML Testing?

JS-in-HTML Testing fits situations like: adding tests for JavaScript that is inlined in a single HTML page; checking button states, overlays and keyboard navigation in a generated HTML viewer; verifying a pure JavaScript algorithm quickly without launching a browser.

How do I install JS-in-HTML Testing in Claude Code?

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

How do I install JS-in-HTML Testing in Codex?

Run `npx skills add liaohch3/claude-tap --skill js-in-html-testing -a codex`. Or copy the skill folder (.agents/skills/js-in-html-testing in liaohch3/claude-tap) into .agents/skills/js-in-html-testing in your project. Codex loads it when a task matches its description.

Can I use JS-in-HTML 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 liaohch3/claude-tap --skill js-in-html-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/js-in-html-testing, .gemini/skills/js-in-html-testing, .github/skills/js-in-html-testing and .opencode/skills/js-in-html-testing in your project.

What does JS-in-HTML Testing need to run?

Going by SKILL.md and its folder, JS-in-HTML Testing needs the command-line tools its instructions call (uv). Our summary lists: Python with pytest; Playwright for Python and Chromium; uv.

Does JS-in-HTML Testing access the network?

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

Is JS-in-HTML 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. Review the folder before installing.

What licence does JS-in-HTML Testing use?

JS-in-HTML Testing is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does JS-in-HTML Testing use?

About 924 tokens (SKILL.md is roughly 3.7k 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 JS-in-HTML Testing?

Skills that share tags, products or a category with JS-in-HTML Testing: Python Testing (macalbert/envilder, 138 stars), Temporal Python Testing (wshobson/agents, 40k stars), E2E Testing (Opentrons/opentrons, 521 stars) and Dotnet Testing (novotnyllc/dotnet-artisan, 233 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains JS-in-HTML Testing?

liaohch3 (a GitHub user) maintains it in liaohch3/claude-tap, which has 3,268 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on September 22, 2026.

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