Skip to skills
AI Craft Pad
Home/Skills/Skill Kits/Website Testing Kit
Curated workflows

Website Testing Kit

Check responsive layouts, forms, keyboard access and visual regressions around a real user journey.

AI CRAFT PAD TASK KIT

Your outcome

A reproducible browser test plan with screenshots, observed defects and final acceptance evidence.

Best for: Developers, QA reviewers and designers checking a site before release.

Editorial update: 2026-11-02 · Suggested sequence; components have not been runtime-tested together.

Before you start

  • Use a project, files or media you are authorized to inspect. Start with copies or a staging environment.
  • Check the selected skill source, license, agent support and local dependencies before installing it.
  • Agree on a small acceptance example and preserve the original input before changing anything.

Costs, licenses and data

Browser automation needs compatible local tools and an agent. Remote browser services are optional and may charge. The Vercel guideline entry has Unknown license metadata here; read its source and fetched guideline terms. No full accessibility certification is included.

Follow the workflow

Choose one complete journey, such as finding a product and submitting a test enquiry. Write observable expectations before automating it. Use the browser-testing component to exercise the controls, and the interface-review component to inspect relevant source and interaction patterns. Keep screenshot comparison and functional assertions separate: a picture can miss a broken form, while a passing click can miss clipped content. Review any externally fetched guideline as untrusted reference material. This kit reviews an existing interface and does not authorize a redesign or certify accessibility compliance.

  1. STEP 1

    Define the journey and fixtures

    List the start URL, the intended outcome and permitted actions. Use synthetic form values and an isolated browser session. Record which browser, viewport and platform will supply the baseline so later comparisons mean the same thing.

    Review webapp-testing →
  2. STEP 2

    Exercise controls and error states

    Check the normal path, an empty state and invalid input. Confirm that real visible controls can be reached and activated. Inspect loading and retry behavior without sending live messages or placing orders from a test session.

    Review webapp-testing →
  3. STEP 3

    Review layout and accessibility evidence

    Inspect keyboard focus, readable contrast, text scaling and target sizes. Test narrow and wide viewports with long content. Treat automated accessibility output as a partial check and investigate findings in the actual rendered interface.

    Review web-design-guidelines →
  4. STEP 4

    Compare and report

    Compare screenshots in the same rendering environment. Explain each intentional difference before updating a baseline. Reproduce every reported defect, rerun the relevant check after a correction and identify browsers or assistive technologies that were not tested.

    Review verification-before-completion →

Try a small example

Synthetic planning fixture. The expected result is a target to verify, not a claimed live execution.

Input

A synthetic enquiry form: name and email fields, submit control, success state and validation error. Viewports 375×700, 768×900 and 1440×900. No actual email delivery is permitted.

Expected result

The empty and malformed-email paths show readable errors without a send. Keyboard order reaches every field. The success path is checked using a test endpoint. Screenshots show no clipped page controls; results identify the exact browser and dimensions.

CHECKED LOCAL EXAMPLE

See the example we checked

Empty, invalid, success and server-failure paths checked at three viewport sizes.

  • Measured 375×700, 768×900 and 1440×900; no horizontal overflow.
  • Tab order and visible 3px focus verified; Enter submits to a local test endpoint.
  • Synthetic name retained after failure; email remained nonempty. No email delivery exists.

Check limits: One in-app browser; exact engine version unavailable. Email values are redacted in browser observations. No cross-browser, screen-reader or real delivery certification.

Environment and source evidence

Python 3.13.13 on Windows; ChatGPT in-app browser; standard-library example checker

Checked 2026-11-02. First-party synthetic examples and the stated browser/media checks; not end-to-end execution of the selected external skills.

Fixture source SHA-256: 99bc17994e3e936c09e803c18dec5ccf8d58cb0305f23bb0bd4ae8503ed147f5

ZIP SHA-256: 4211dfc5f44a97fc5e6f32c75d459eb66023bead81e1b77826cbcd89af9bc5ca

Try it on your computer

  1. Download and extract the example into a new disposable folder. Read README.md and the source files.
  2. With Python 3.10 or newer, run the command below from that folder. It uses the standard library; no API key, agent or package installation is needed for this check.
  3. Open example-output/report.html or report.md and inspect result.json. The form and optional video-render instructions are in README.md.
  4. For your own task, review the selected skills below, install one appropriate component through your agent, then adapt the brief to your project.
python check.py website-testing --source . --output example-output

8.2 KB · Original AI Craft Pad fixtures and code under MIT. The ZIP does not install external skills. Read it before running code. Existing files in example-output may be replaced.

Start with this brief

Copy this starting point into your agent, then supply the agreed project or files. Copying does not install a skill or run an external action.

Check the deliverable

  • Actual viewport dimensions are recorded rather than inferred from an emulator setting.
  • Keyboard focus is visible and controls work without a pointer.
  • Normal, empty, invalid and failure states are covered with synthetic data.
  • Visual baselines use the same environment and intentional changes are explained.
  • The final delivered page is checked; an earlier local screenshot is not substituted.

Complete the checks below against the actual deliverable and preserve enough evidence for another person to repeat the important steps. Record the environment, source dates and anything that could not be checked. These components were selected from source documentation; this catalog has not executed them together as an integrated system.

Review the selected skills

Open each source review for installation, license, compatibility and safety signals. Select the components relevant to your task; the kit is not an automatic installer.

Testing & QA86/100

webapp testing

anthropics/skills

A browser-testing workflow with Playwright-oriented examples and server-lifecycle helpers for checking local web application behavior.

First-party sourceComplete terms in LICENSE.txtEditorial review2 matching source records

Repository star change: +478 over 24.12 hours. 2026-11-02

186,432 repo stars2 text flagsReview ↗
Design & UX65/100

web design guidelines

vercel-labs/agent-skills

A lightweight UI review entry point that retrieves Vercel interface rules and reports findings against selected files.

First-party sourceUnknownEditorial review

Repository star change: +53 over 24.12 hours. 2026-11-02

33,367 repo stars1 text flagReview ↗
Testing & QA88/100

verification before completion

obra/superpowers

A completion-check workflow that ties a claim such as fixed, passing or deployed to fresh evidence from the relevant system.

Community sourceMITEditorial review

Repository star change: +587 over 24.12 hours. 2026-11-02

310,731 repo stars0 text flagsReview ↗

Continue with useful tools

Reference material

AI Craft Pad authored this runbook. Source software, skills and media retain their own licenses.