In Quality Assurance testing your website on diffrent screen resoultion is important task, by doing that you can ensure that your site is responsive on most devices customers are used.
In this artical we will learn how to code simple tool to do this task for us with few lines of code based on playwright, so what is playwright ?? Built by Microsoft, Playwright is a Node.js library that, with a single API, automates Chromium, Firefox, and WebKit. These APIs can be used by developers writing JavaScript code to create new browser pages, navigate to URLs and then interact with elements on a page. In addition, since Microsoft Edge is built on the open-source Chromium web platform, Playwright can also automate Microsoft Edge. lambdatest
Now we will develop out tool
1- Open your vscode and create new folder
2- Open terminal and run -> npm init
3- Install Playwright and we will use it as lib -> npm i -D playwright
4- Create new *.js file
Playwright support many devices that we will use all of them you can see them from this link Devices
5- lets import webkit browser and devices from playwright
6- lets create async function
7- So devices hold all devices that we can use , let’s loop it to access all devices
8- let’s launch webkit browser in non headless mode then let console print out current device
9- let’s creat new context with current device then navigate to website and stay for 5 seconds before open new browser with new context device
10- Final step save your script and go to terminal and execute it with -> node *.js
Output :
Conclusion
With this simple script you can test your sites on many devices screen resoultion also you can custom it,
you can add more fetures for your script like
– Save screen shot for every tested device
– Let user add custom view port
– Select only spacific devices