Testing Tools
Tools for testing and debugging your web applications.
The QA-focused corner of the toolkit: tools that help you verify how your work actually behaves, from responsive layout checks to integration testing helpers.
7 tools availableBug Report Template Builder
Build a complete, developer-ready bug report from a template
RTM Generator
Build a requirements traceability matrix and catch coverage gaps
Test Estimation Calculator
Estimate test effort with three-point PERT ranges, confidence bands and duration
Test Case Generator
Generate structured test cases from templates and boundary value analysis
Responsive Preview
Test how your website looks on different screen sizes
CSS Selector Tester
Test CSS selectors with live match highlighting and specificity
GraphQL Playground
Test GraphQL queries against any endpoint, no CORS errors
What a layout check can prove, and what needs a contract
A responsive preview answers one question well and several badly. It can show whether content survives a narrow viewport, because that has a published threshold. It cannot show whether the API behind the page returns what the component expects - that is a separate test with a separate source of truth.
Reflow has a number: 320 CSS pixels
WCAG 2.2 success criterion 1.4.10 is measurable, which is what makes it usable as a test: "Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for: Vertical scrolling content at a width equivalent to 320 CSS pixels; Horizontal scrolling content at a height equivalent to 256 CSS pixels." The accompanying note supplies the practical equivalence: "320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom." A layout that needs horizontal scrolling at that width fails, and the failure is reproducible rather than a matter of opinion.
A breakpoint written with a colon means exact match
CSS Media Queries Level 4 draws a line that catches people out. In a range context "A (width >= 600px) media feature is true when the viewport's width is 600px or more. On the other hand, (width: 600px) by itself is only true when the viewport's width is exactly 600px." So a test that resizes to the breakpoint value and passes tells you nothing about the widths either side of it - and a media query written with a colon evaluates as an exact match, not a threshold.
Everything the screenshot cannot see is a contract
The OpenAPI Specification exists precisely because a rendered page cannot describe the behaviour underneath it: it "defines a standard, programming language-agnostic interface description for HTTP APIs, which allows both humans and computers to discover and understand the capabilities of a service without access to source code". A contract test compares the live responses against that description, so the assertion comes from the published interface rather than from whatever the page happened to render. Security cases are catalogued separately again - the OWASP Web Security Testing Guide is the reference list of what to attempt - and neither a layout check nor a contract test substitutes for it.
| Test | What it can prove | What it cannot prove | Source |
|---|---|---|---|
| Responsive layout check | content reflows without two-dimensional scrolling at 320 CSS pixels | that the data on the page is correct | WCAG 2.2, SC 1.4.10 |
| Breakpoint check | the layout at the widths you actually tested | behaviour at every other width, unless the query uses a range | CSS Media Queries Level 4 |
| API contract test | the response shape matches the published description | that the values returned are the right ones | OpenAPI Specification 3.1 |
| Security test cases | the flaw classes you deliberately attempted | anything you did not attempt | OWASP Web Security Testing Guide |
Start with the Responsive Preview for the 1.4.10 check, pick selectors with the CSS Selector Tester, exercise an endpoint in the GraphQL Playground, size the work with the Test Estimation Calculator, write the cases themselves with the Test Case Generator, tie them back to requirements with the RTM Generator, and file what you find with the Bug Report Builder.
Sources: W3C, Understanding Success Criterion 1.4.10 Reflow; CSS Media Queries Level 4; OpenAPI Specification 3.1.0; OWASP Web Security Testing Guide.