To test a website it’s really very hard to open every page, resize them and then take a look on the complete page by scrolling them. We need to make it an automation process so that it can save our time and can remove this restless process.<\/p>\n
Casperjs itself has so many predefined methods and by using them you can achieve it. You can follow the following code steps to write your own scripts-<\/p>\n
var casper = require('casper').create(),\r\nsiteUrl = \"https:\/\/store.webkul.com\/\",\/\/your website's base URL\r\nurls = [\r\n '',\r\n 'Magento-2.html',\r\n 'Magento-Extensions.html'\r\n], \/\/sub urls of your website\r\nscreenWidth = [\r\n 400, \r\n 600, \r\n 800, \r\n 1200\r\n]; \/\/your required width\r\nscreenshotNow = new Date(),\r\nscreenshotDateTime = (screenshotNow.getHours()) + ':' + (screenshotNow.getMinutes()) + ':' + (screenshotNow.getSeconds()),\r\n\r\ncasper.start(siteUrl, function(){\r\nthis.echo('Opening the site URL...', 'COMMENT');\r\n});\r\n\r\nurls.forEach(function(url) {\r\ncasper.thenOpen(siteUrl + url, function() {\r\n var pageTitle = this.getTitle();\r\n screenWidth.forEach(function(currentWidth) {\r\n casper.viewport(currentWidth, 1000).capture('screenshots\/' + pageTitle + \":\" + screenshotDateTime + '\/' + pageTitle + '_' + currentWidth + '.png', {\r\n top: 0,\r\n left: 0,\r\n width: currentWidth,\r\n height: casper.evaluate(function() {\r\n return document.body.scrollHeight;\r\n })\r\n });\r\n });\r\n this.echo('Screenshots successfully captured for- ' + this.getCurrentUrl(), 'COMMENT');\r\n});\r\n});\r\n\r\ncasper.run();<\/pre>\nLet me explain each step one by one-<\/p>\n
siteUrl = \"https:\/\/store.webkul.com\/\",\/\/your website's base URL\r\nurls = [\r\n '',\r\n 'Magento-2.html',\r\n 'Magento-Extensions.html'\r\n], \/\/sub urls of your website\r\nscreenWidth = [\r\n 400, \r\n 600, \r\n 800, \r\n 1200\r\n]; \/\/your required width<\/pre>\nHere, I have taken a variable and siteUrl and assigned my website’s Url to it. Make sure you assign your website’s base URL. Then we have taken an array of all the sub URL’s for which I need to check the responsiveness. I have written everything\u00a0in the script but you can give the URL’s\u00a0from command line also using “casper.cli.get(0)”.<\/p>\n
screenshotNow = new Date(),\r\nscreenshotDateTime = (screenshotNow.getHours()) + ':' + (screenshotNow.getMinutes()) + ':' + (screenshotNow.getSeconds()),<\/pre>\nI am using this piece of code just to take the screenshot with the current date and time name.<\/p>\n
urls.forEach(function(url) {\r\ncasper.thenOpen(siteUrl + url, function() {\r\n var pageTitle = this.getTitle();\r\n screenWidth.forEach(function(currentWidth) {\r\n casper.viewport(currentWidth, 1000).capture('screenshots\/' + pageTitle + \":\" + screenshotDateTime + '\/' + pageTitle + '_' + currentWidth + '.png', {\r\n top: 0,\r\n left: 0,\r\n width: currentWidth,\r\n height: casper.evaluate(function() {\r\n return document.body.scrollHeight;\r\n })\r\n });\r\n });\r\n this.echo('Screenshots successfully captured for- ' + this.getCurrentUrl(), 'COMMENT');\r\n});\r\n});<\/pre>\nNow, I am opening each Url one by one using “forEach” and “casper.thenOpen”.<\/p>\n
“var pageTitle = this.getTitle();” is used just to take screenshot with the current page title.<\/p>\n
“casper.viewport();” allows to change the current view port size.<\/p>\n
“casper.capture();” allows you to capture the current page.<\/p>\n
Hope, this blog will help you. If you have any doubt then please\u00a0leave a comment here.<\/p>\n
Thank you\u00a0\ud83d\ude42<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"