{"id":155315,"date":"2018-12-29T13:37:52","date_gmt":"2018-12-29T13:37:52","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=155315"},"modified":"2025-01-07T14:16:10","modified_gmt":"2025-01-07T14:16:10","slug":"check-responsive-layout-casperjs","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/","title":{"rendered":"Check Responsive Layout – CasperJS"},"content":{"rendered":"

Hello Designers, I am going to discuss the fastest way to cross-check your layout on different size of devices using the browser for responsive layouts.<\/p>\n

Before I used to create different sizes of devices in my browser to check the layout. It’s fine with the small website but when the count of pages increased it really hard to manage.<\/p>\n

Then I come to know about Casper.js, it’s really awesome. It is a smart way to check the layout at various viewports.<\/p>\n

You have to install Casper on your machine. Read Installation guide from Casper<\/a>.<\/p>\n

Once your setup is completed, Now you are ready to see the magic of Casper<\/p>\n

To test or run Casper script, you need a .js file having Casper script and a terminal to run this .js file.<\/p>\n

Let’s start with a simple example. Fetching website title<\/p>\n

To create a Casper instance, use the function\u00a0create()<\/p>\n

var casper = require('casper').create();<\/pre>\n
It starts Casper and performs the action on given URL<\/p>\n
start(String<\/span>\u00a0url[,<\/span>\u00a0Function<\/span>\u00a0then])\n<\/span><\/pre>\n
Run Script<\/p>\n
casper.run();<\/pre>\n
Here is a command to get the website title.<\/p>\n
var casper = require('casper').create();\n\ncasper.start('https:\/\/mobikul.com\/');\n\ncasper.then(function() {\nthis.echo('Title of Page: ' + this.getTitle());\n});\ncasper.run();\n\n<\/pre>\n
Save the above file as<\/p>\n
simple.js<\/pre>\n
Open the terminal and navigate to the path where you save the file and run the command.<\/p>\n
casperjs simple.js<\/pre>\n
and in a result you get.<\/p>\n
Mobikul - Open Code Mobile application for your eCommerce Store & Marketplace<\/pre>\n
It’s really cool,\u00a0Let’s move to capture a screenshot. To define port use this function.<\/p>\n
view<\/span>port<\/span>(<\/span>number width<\/span>,<\/span> number height<\/span>);<\/span><\/pre>\n
Function to capture the screenshot and define the path to save is:<\/p>\n
capture(String targetFilepath)<\/pre>\n
Update your file with the code below<\/p>\n
\n
var casper = require('casper').create();\n\ncasper.start('https:\/\/mobikul.com\/');\n\ncasper.then(function() {\n\nvarname=this.getTitle();\n\nthis.viewport(1024,640);\n\nthis.capture('screenshots\/1024-'+name+'.png');\n\nthis.echo('Capturing done');\n\n});\n\ncasper.run();<\/pre>\n<\/div>\n
You will find a folder in the same directory where you saved the script. Find a screenshot of your site with size 1024.<\/p>\n
\"Single<\/p>\n
Now, if\u00a0 we want multiple size screenshot then we have to use this code of syntax<\/p>\n
\n
var casper = require('casper').create();\n\ncasper.start('https:\/\/mobikul.com\/');\n\n\ncasper.then(function() {\n\nvarname=this.getTitle();\n\nthis.viewport(1024,640);\n\nthis.capture('screenshots\/1024-'+name+'.png');\n\n\nthis.viewport(1366,765);\n\nthis.capture('screenshots\/1366-'+name+'.png');\n\n\nthis.viewport(1920,1080);\n\nthis.capture('screenshots\/1920-'+name+'.png');\n\n\nthis.viewport(960,540);\n\nthis.capture('screenshots\/960-'+name+'.png');\n\n\nthis.viewport(320,549);\n\nthis.capture('screenshots\/320-'+name+'.png');\n\n\nthis.viewport(360,640);\n\nthis.capture('screenshots\/360-'+name+'.png');\n\n\nthis.viewport(480,854);\n\nthis.capture('screenshots\/480-'+name+'.png');\n\n\nthis.echo('Capturing done');\n\n});\n\ncasper.run();\n\n<\/pre>\n
Now you can view all your screenshot check at one place,<\/p>\n
\"multiple<\/p>\n
Share or update your layout where you find the issue and fixed it.<\/p>\n
Know more about CasperJS<\/a>\u00a0 and you find anything more interesting let me know,<\/p>\n<\/div>\n
Thanks for reading.<\/p>\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Hello Designers, I am going to discuss the fastest way to cross-check your layout on different size of devices using the browser for responsive layouts. Before I used to create different sizes of devices in my browser to check the layout. It’s fine with the small website but when the count of pages increased it […]<\/a><\/p>\n","protected":false},"author":162,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1202],"tags":[],"class_list":["post-155315","post","type-post","status-publish","format-standard","hentry","category-design-trends"],"yoast_head":"\nCheck Responsive Layout - CasperJS - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Check Responsive Layout - CasperJS - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Hello Designers, I am going to discuss the fastest way to cross-check your layout on different size of devices using the browser for responsive layouts. Before I used to create different sizes of devices in my browser to check the layout. It’s fine with the small website but when the count of pages increased it [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-12-29T13:37:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-07T14:16:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/12\/screenshot-1.png\" \/>\n<meta name=\"author\" content=\"Kunj Bihari\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/Kunj4uS4?s=08\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kunj Bihari\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/\"},\"author\":{\"name\":\"Kunj Bihari\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/8108d3ba90ec52566f1a5ac42f15e67f\"},\"headline\":\"Check Responsive Layout – CasperJS\",\"datePublished\":\"2018-12-29T13:37:52+00:00\",\"dateModified\":\"2025-01-07T14:16:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/\"},\"wordCount\":316,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/12\/screenshot-1.png\",\"articleSection\":[\"Design Trends\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/\",\"url\":\"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/\",\"name\":\"Check Responsive Layout - CasperJS - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/12\/screenshot-1.png\",\"datePublished\":\"2018-12-29T13:37:52+00:00\",\"dateModified\":\"2025-01-07T14:16:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/12\/screenshot-1.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/12\/screenshot-1.png\",\"width\":709,\"height\":556},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Check Responsive Layout – CasperJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/8108d3ba90ec52566f1a5ac42f15e67f\",\"name\":\"Kunj Bihari\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1ac55e9feea587a83d579df303cf808fb1c609d6c106ad7ed51ba4ebd6af2296?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1ac55e9feea587a83d579df303cf808fb1c609d6c106ad7ed51ba4ebd6af2296?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Kunj Bihari\"},\"sameAs\":[\"https:\/\/x.com\/https:\/\/twitter.com\/Kunj4uS4?s=08\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/kunj-bihari671\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Check Responsive Layout - CasperJS - Webkul Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/","og_locale":"en_US","og_type":"article","og_title":"Check Responsive Layout - CasperJS - Webkul Blog","og_description":"Hello Designers, I am going to discuss the fastest way to cross-check your layout on different size of devices using the browser for responsive layouts. Before I used to create different sizes of devices in my browser to check the layout. It’s fine with the small website but when the count of pages increased it [...]","og_url":"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2018-12-29T13:37:52+00:00","article_modified_time":"2025-01-07T14:16:10+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/12\/screenshot-1.png","type":"","width":"","height":""}],"author":"Kunj Bihari","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/Kunj4uS4?s=08","twitter_site":"@webkul","twitter_misc":{"Written by":"Kunj Bihari","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/"},"author":{"name":"Kunj Bihari","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/8108d3ba90ec52566f1a5ac42f15e67f"},"headline":"Check Responsive Layout – CasperJS","datePublished":"2018-12-29T13:37:52+00:00","dateModified":"2025-01-07T14:16:10+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/"},"wordCount":316,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/12\/screenshot-1.png","articleSection":["Design Trends"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/","url":"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/","name":"Check Responsive Layout - CasperJS - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/12\/screenshot-1.png","datePublished":"2018-12-29T13:37:52+00:00","dateModified":"2025-01-07T14:16:10+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/12\/screenshot-1.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/12\/screenshot-1.png","width":709,"height":556},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/check-responsive-layout-casperjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Check Responsive Layout – CasperJS"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/8108d3ba90ec52566f1a5ac42f15e67f","name":"Kunj Bihari","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1ac55e9feea587a83d579df303cf808fb1c609d6c106ad7ed51ba4ebd6af2296?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1ac55e9feea587a83d579df303cf808fb1c609d6c106ad7ed51ba4ebd6af2296?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Kunj Bihari"},"sameAs":["https:\/\/x.com\/https:\/\/twitter.com\/Kunj4uS4?s=08"],"url":"https:\/\/webkul.com\/blog\/author\/kunj-bihari671\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/155315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/162"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=155315"}],"version-history":[{"count":43,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/155315\/revisions"}],"predecessor-version":[{"id":479802,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/155315\/revisions\/479802"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=155315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=155315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=155315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}