webapp-testing

Files (1)

• SKILL.md

SKILL.md (first lines)

Requires **Browser Use** (Code space; enable in Settings → Automation).

## Look at the structure, not the pixels

`BrowserReadPage` returns an accessibility tree with a `ref_N` for every
interactive element. Prefer clicking a `ref` over coordinates: refs survive
layout changes and tell you whether the element is actually reachable — which
is what you are testing anyway.

Take a screenshot when the QUESTION is visual (spacing, overlap, theme).
Read the page when the question is functional (is the button there, what does
it say, is it disabled).

## Cheap pass first

If you have the HTML on disk, audit the markup before driving the browser:

```
python ../web-design/scripts/audit_html.py page.html
```

Missing labels, alt text, keyboard-unreachable controls and low contrast are all
findable without a browser. Spend the browser session on what only it can show:
layout, overflow, real rendered colour, and whether an interaction works.

## A verification pass

1. `BrowserNavigate` to the page.
2. `BrowserReadPage` — confirm the expected elements exist and are labelled.
3. Interact: `BrowserClick` by ref, `BrowserType` into the field.
4. Read again — confirm the state CHANGED as expected. Never assume a click
   worked.
5. Screenshot for the visual record.

## What to check that people forget

Keyboard reachability: every control must be operable without a mouse. If the
accessibility tree shows a clickable `div` with no role or label, that is a
real bug — report it.

Both colour schemes, and a narrow width. Most layout breaks show up at 320px,
not at desktop size.

The error path, not just the happy path: submit the form empty, type the wrong
format, and confirm the message is specific rather than "Invalid input".

Console errors. A page that looks fine while throwing on every render is broken.

## Reporting a failure

Quote what you did, what you expected, and what you saw — with the screenshot
or the tree excerpt. "It doesn't work" is not a bug report. If you could not
reproduce it, say that explicitly instead of implying it is fixed.

## Do not

Do not enter real credentials, card numbers or personal data into a form. Do not
click through consent or payment dialogs on the user's behalf. If a test needs
signing in, ask the user to do that step.

From iaa2005/monet-directory, MIT.

More from iaa2005/monet-directory