Elysia Tools
Navigation
Workflow Playbook
Compare a page before and after a redesign at matched viewports, investigate layout and color changes, and deliver screenshots, reviewed findings and reproducible release evidence.
Hubs
This playbook is for frontend developers and testers deciding whether one page redesign is ready. Deliver a matrix, before/after captures, explained findings and a reviewer decision, not an automatically executed regression suite. Use only authorized public fixtures for these server-side capture tools. Authenticated or sensitive states need an approved external capture method; do not put credentials into a URL.
Keep the baseline build or its original evidence before deployment. Record URL, build, fixture, locale, fonts, viewport width and height, capture mode, color preference and wait settings. Repeat with the same capture tool and environment. If the baseline is missing, a candidate screenshot alone cannot establish that a regression did not occur.
Start with widths such as 375, 768, 1024 and 1440 at one agreed height. These are example test cases, not universal breakpoints. Responsive Breakpoint Visual Diff renders one URL at two to six widths and captures the fixed viewport. Use adjacent mode for this workflow. Its heatmaps compare scaled images at different widths, not baseline and candidate builds or semantically matched components.
Inspect each screenshot for clipped labels, unexpected horizontal overflow, overlaps and missing content. Expected column changes and text wrapping are not defects by themselves. Viewport captures do not cover the whole document; review off-screen areas separately. Preserve the ZIP and report, but do not translate a changed-pixel percentage into a release verdict.
Capture both builds at each selected size with Website Screenshot, then inspect actual dimensions with Image Metadata. Avoid mobile mode when trying to reproduce arbitrary dimensions: the current screenshot implementation uses a fixed 375 by 667 viewport for that option. Prefer lossless PNG with matching opaque background and channel layout. Requested dimensions are not a substitute for inspecting the downloaded file.
Image Difference resizes unequal inputs to a common canvas with fill behavior. That can stretch content and produce misleading evidence. Recapture mismatched inputs rather than using a resized diff to claim equivalence. The tool is a pixel operation, not a semantic layout detector; channel mismatch is another reason to stop and normalize or recapture outside this comparison.
Retain originals. If a reviewer needs a close-up, crop both images using recorded coordinates and dimensions and label the region. A moved element may no longer occupy the same coordinates: inspect the full image before interpreting the crop. Cropping is not secure redaction, and it must not hide a defect.
Recheck changing timestamps, remote images, animation, font loading and fixture data before blaming CSS. A longer wait can help loading but does not guarantee a stable page. Hiding elements with Website Screenshot applies display none and can reflow the layout; document it and avoid excluding content relevant to acceptance.
When color changed, use Image Color Palette Extractor as a sampled overview, not proof of the actual text/background pair. Confirm the relevant rendered values separately and submit that pair to Color Contrast Checker. Antialiasing, gradients and transparency can make screenshot samples misleading. Pair results do not certify the page's accessibility. Record intentional changes, confirmed defects, capture noise and unresolved cases separately; human inspection decides task impact.
For each issue record width, location, original files, optional crop coordinates, expected behavior, actual behavior, severity rationale, owner and retest result. Check long localized text and important off-screen or interactive states through an authorized external browser session. Neither these captures nor a clean difference image prove keyboard, menu, form or touch behavior.
Deliver local copies of baseline/candidate images, responsive reports, differences, the matrix and final accept, fix, defer or block decision. Do not rely only on temporary processing links. Hash final shareable files with SHA-256; hashes identify artifacts, not correctness. Use the related style-inventory workflow for extracting design observations, the accessibility workflow for broader human-reviewed access checks, and the typography workflow for font preparation. This page ends at a bounded visual release decision.
Workflow playbook
Record the matrix and use consistent screenshot settings for baseline and candidate. Verify actual file dimensions rather than trusting requested viewport values.
Run adjacent-breakpoint comparisons and inspect screenshots and overflow metrics. Review expected reflow manually; preserve the report and downloaded ZIP.
Check dimensions and channel compatibility before generating image differences. Make optional paired diagnostic crops while retaining whole-image context.
Use sampled palette changes as clues, then check actual foreground/background values where needed. Distinguish deliberate design changes from defects and external-test gaps.
Use the breakpoint report to inspect one version across widths. Compare baseline and candidate screenshots only at the same dimensions and capture conditions; the breakpoint tool does not load historical baselines.
Preserve full originals. Crop paired regions only with recorded matching coordinates and context; never crop away overflow or a defect to obtain a cleaner comparison.
Check fonts, dynamic content and fixture identity first. Confirm suspected layout defects manually; use palette and contrast tools only when color changes need investigation.
Collect actual retest screenshots, decisions and limitations. Save final artifacts locally and calculate SHA-256 after preparing the shareable package.