Web UI Testing Checklist Before Release

Prepare stable references

• Confirm the correct design version and content.
• Match viewport width, height, zoom, and device-pixel ratio.
• Use deterministic data where dates, ads, or user content may change.
• Record intentional implementation differences before review.

Review the visible interface

• Typography: family, weight, size, line height, wrapping, and truncation.
• Layout: grid, alignment, spacing, container width, and overflow.
• Color and effects: fills, borders, shadows, gradients, and opacity.
• Assets: image crop, icon size, resolution, and loading fallback.
• States: hover, focus, active, disabled, empty, loading, and error.

Test responsive transitions

Do not check only common device presets. Test just before and after breakpoints, with long labels, enlarged text, and narrow content areas. Visual comparison at matching widths makes layout jumps and accidental overflow easier to isolate.

Define a release decision

• Block defects that hide content, prevent interaction, or break brand-critical layouts.
• Schedule minor cosmetic differences with an owner and rationale.
• Attach comparison evidence to the release ticket.
• Re-test changed regions and one neighboring viewport.

Capture evidence another person can reproduce

For each defect, include the page, component, visible state, viewport, approved reference, implementation capture, expected result, actual result, severity, and the comparison view that best explains the mismatch. Do not rely on a cropped image without its dimensions and context.