The way users view and interact with web browsers has undergone a considerable transformation. It is based entirely on various websites, devices, and user interests. It also depends widely on the screen size, screen resolutions, and type of devices. This wide range of online viewing leads to an increase in the complexity of the development of the web and its testing.
While there are so many variations, the similar display of the videos and the pictures should be taken care of in every device. Hence, to maintain this discipline, there is a constant strive to develop a website that uniforms the view in every screen device.
On the other hand, Screenshot Comparison is crucial to avoid manual testing as there are many possibilities of getting variations in the results as the perception of each change. There is another challenge as this operation is time-consuming, and it is practically impossible to encounter every small change occurring in the visuals.
To overcome this error, a functional testing app helps to provide even-out visual results based on the actual design displayed. It speeds up the process, giving accurate results for the visuals on the web apps.
Key Features Of Playwright
- It is compatible with using multiple browsers at one time
- The test results are reliable
- The execution is fast, with complete lightning and isolation
- It consists of advanced tools for easy execution.
Now tell us how the Playwright automation testing should be configured.
- It is very flexible and user-friendly as it allows to work with different languages such as Python, Java, NET, NodeJs, Javascript, and Typescript.
- Now, let us see the Playwright setup with Typescript API.
- It has its advantages like it can be installed in two ways, as given below,
- Using NodeJs package manager
- Using Playwright VS code
Use Visual Studio Code to set up Playwright testing by doing the following steps:
- Go to the extension manager in Visual Studio Code after opening it.
- The official Playwright extension can be found by searching for and installing “Playwright Test for VS Code”.
- Launch Visual Studio Code and navigate to the command panel after installing the extension.
- To begin the Playwright testing setup process in your project, use the “Install Playwright” action from the command panel.
Now let us know the actual working of the Playwright Screenshot comparison.
A pixel match library is used by the Playwright, along with a pixel match comparison library. It generates a baseline or reference screenshot while the primary testing is conducted for the first time.
As a result of the primary testing, it always fails as the first image is itself a reference image.
This reference file should be saved as the following images will be analyzed based on this reference test image. For all the continuous integration setups, this reference image is beneficial. Based on this image, the further screenshots are compared and analyzed.
Now, let us learn how to capture screenshots using the Playwright testing tool
Here, we initially need to understand how to take screenshots using Playwright. The main API is the page. Screenshot () to capture screenshots.
Parameters
Type – this is for the saved file’s file extension.
Path – The path has to be provided for the image to be saved on the disk. The current working directly can be resolved if the path is relative.
A mask highlights the locators that must be masked while taking the screenshot. The default color is pink, but the same can be customized.
Mask color – this is used for quickly identifying the masked locators.
Clip – this is an object which is used to clip the resulting screenshot
Comparing Full-Page Screenshots with Playwright
Let’s now examine how to use Playwright to compare a full-page screenshot.
Step 1: Go to theAutomationQAdemo using a URL.
Step 2: Once there, snap a screenshot of the entire page. Decide where to store it and how.
Element Screenshot Comparison using Playwright
When parts of a website change, we can use Playwright to take screenshots before and after those changes. For example, let’s say we want to capture the search field on an e-commerce site before and after a search.
Steps:
- Find the search field using Playwright’s method.
- Take a screenshot of that field.
- Capture Screenshot into Buffer using Playwright:
- Instead of saving a screenshot, we can save the image data into a buffer for other tools to use.
How to Allow Acceptable Pixel Difference?
We can set rules for how much difference is okay between screenshots when using Playwright. We can do this for each test or set a default rule.
Customizing Playwright Screenshot Comparison
There are more settings available to customize screenshot comparisons. Check the official documents for details. We mainly use the Chromium browser for tests, but other browsers can be used too.
Using LambdaTest’s Cloud Grid
Instead of installing lots of browsers, we can use LambdaTest’s cloud grid for testing. It helps compare screenshots across different browsers and devices without needing to set up everything locally.
Test Scenario
Take a screenshot of the LambdaTest demo website.
Take another screenshot after searching for Apple products.
Implementation
- The test method is from AutomationQA instead of Playwright.
- Go to the demo website’s homepage.
- Use functions to take screenshots and mark the test successful.
Bottom Line
Playwright makes it easy to automate browser tasks and capture screenshots. LambdaTest’s cloud grid helps compare screenshots across different browsers and versions.
AutomationQA