Visual Testing


Why Do We Need Visual Testing When We Have End-to-End (e2e) Tests?

While end-to-end and functional testing assesses the underlying functionality, flow, and integration of an application or website, they may overlook the visual presentation. The visual appearance of a website plays a critical role in user experience, and small visual discrepancies can lead to user confusion or mistrust. This is where visual testing becomes vital.

Visual testing focuses on verifying that the graphical user interface (GUI) of a website appears correctly to users. Unlike e2e or functional testing, which concentrates on the underlying code’s behavior, visual testing ensures that the UI appears consistent across different browsers and screen sizes. It helps detect unintended changes in the rendering of your application, capturing issues like misalignment, wrong colors, or unexpected element sizes.

In essence, e2e and functional tests ensure that the engine of a website is running smoothly, while visual tests confirm that it looks appealing and aligned with the brand’s identity. Both aspects are essential for a comprehensive quality assurance process, guaranteeing that Thomann.de delivers an optimal user experience.

Visual Testing

Visual tests powered by CodeceptJS with the Playwright helper have been designed to ensure the graphical user interface appears correctly to users. This type of testing is vital to detect unintended changes in the rendering of your application, ensuring that UI appears consistent across different browsers and screen sizes. For the visual comparison, pixelmatch library can be employed to check for discrepancies between baseline and current screenshots.


vincentwyh Avatar


More Articles & Posts

Leave a Reply

Your email address will not be published. Required fields are marked *