Define what changes and what stays fixed
For before-and-after work, keep page content, filters, zoom and viewport consistent. For responsive review, deliberately change width and record each value while keeping other conditions similar. Capture each stable state separately.
FullPageShot captures the state you prepare. It does not automatically run a responsive test matrix or calculate pixel differences. A screenshot comparison also does not establish functional accessibility, keyboard behaviour or performance.
Capture a repeatable pair
- Prepare the first state and note the relevant conditions.
- Capture and review the required region.
- Prepare the second state outside the running capture.
- Capture the same region and compare actual saved files at a consistent scale.
Explain differences without overclaiming
Separate intended layout changes from changing content, timestamps or delayed images. Keep an unchanged heading as a reference. If a difference depends on scrolling or interaction, write that condition beside the images.
Choose the next step from the actual result
Capture comparisons close enough in time that changing content is manageable. Advertisements, live counters and personalised recommendations can differ without any layout change. Note those regions as variable instead of claiming a regression from them. For a responsive pair, preserve the same text and interaction state. If a filter or menu changes, record that as another deliberate comparison rather than mixing several variables.
Compare headings, alignment and the relevant component at a consistent display scale. A smaller screenshot may merely be zoomed differently. Inspect warning details if one capture was scaled down. Keep the reviewed files with their conditions in a short note. This makes the comparison useful later, when you no longer remember which width, page version or menu state produced each image.
A worked example
A button wraps at a narrower width. Capture the same form with the same text at the two prepared widths. Keep the dropdown state unchanged and record the widths. If one image has a cookie banner or different zoom, correct the setup before deciding the design regressed.
Add your observations. This template processes no files and sends no report.
Check the result
If something is wrong
| Observation | Next step |
|---|---|
| Different content in each image | Align content and filters before comparing layout. |
| One image scaled differently | Open both at a consistent scale and inspect capture warnings. |
| Resize interrupted capture | Prepare the new width before starting the next capture, not while one runs. |
Common questions
Does this run responsive tests automatically?
No. You prepare and review each page state yourself.
Can images prove keyboard support?
No. Test keyboard interactions directly; images document visible states.