This automation created to do visual comparison. In this project, you will find a structured approach to visual testing, which includes capturing screenshots for comparison and reporting discrepancies. The chaining page object design pattern allows for a more fluent and readable test code, enabling seamless transitions between different pages of the application.
On this project I used TestNG framework that combined with playwright, this is the detail of dependencies that I used:
- TestNG 7.10.2
- Playwright 1.47.0
- ExtentReport 5.1.2
- Image comparison 4.4.0
- Clone this project and build make sure all dependencies downloaded correctly
- If you want to run visual comparison you can run testngVisualComparison.xml
- If you want to adjust threshold of visual comparison you can change this image-comparison-threshold on config.properties
this threshold based on percentage of tolerance, 0 meaning there is no tolerance of visual comparison / exactly same. if you set to 50 meaning there is a 50% tolerance different between expected image and current web application
- If you want to run test that implement Chaining page object design pattern you can run testngE2E.xml
More detail you can read this article