Layout testing

Learn how layout testing works in Percy

Layout testing is a process to check the arrangement and positioning of UI elements to confirm they match the expected design or layout guidelines. It helps identify issues such as misaligned elements, incorrect spacing, or any discrepancies in the visual presentation. This is particularly effective for cross-environment testing providing a reliable validation of page structure.

Percy’s layout testing focuses on validating the structure of page layout. It identifies page elements from baseline such as text, images, buttons, divs and columns, ensuring their relative positions remain consistent. The visual comparison is executed by providing a meticulous examination of layout changes without verifying content alterations.

It’s a powerful tool for cross-environment testing, providing reassurance that the page structure remains intact across different operating systems, browsers, and devices.

To enable layout testing in Percy, follow these steps:

Things to keep in mind

• Base snapshots must exist, and any base snapshots dated before November 1, 2023, will not be considered. In such scenarios, we will have standard Percy behaviour.
• Layout testing will not function with commands such as npx percy snapshot or if utilized within a configuration file (e.g. ‘xyz.yml’ file).
• iframes with the same domain or subdomain which is accessible JavaScript will be considered along with its content.
• iframes from different domains are verified for their existence, not their content.
• The difference in text layout wouldn’t be emphasized if the text is present but remains unseen due to its color blending into the background.
• Only differences are highlighted within the head image (or the image currently compared to the base/image on the right side of the review screen). For example, if a specific region is removed from the base image, the difference will only be highlighted within the head image.

Limitations

• Only works for percySnapshot command.
• If you have set “enableJS” to true while testing dynamic websites to capture dynamic animations, images, etc., it may cause inconsistent layout testing in such scenarios.
• Snapshots through percy upload will not work for layout testing.
• Pop-ups differences may not be accurate.
• Shadow DOM elements are not supported.