Responsive Web Design Test Automation

Tweet about this on TwitterShare on LinkedIn1Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

Responsive Web Design Test Automation

Responsive Web Design (RWD) has been around for quite some time. Today, startups would rather invest their time in a RWD website than build a native app. Why? Here is a presentation about RWD. You can take a quick look and come back.

Contents

The present day solution for testing Responsive sites is sort of manual. You would either use tools like screenfly to resize & check the layout of the pages. Or, you would get a lot of actual devices and test your website on each of them, to see if everything is aligned properly. Or the next gen solution is to take an account from products like Browser Stack, which would take a URL and spit out images from all the devices and browsers. Nevertheless, its a manual task again to verify all the images. 

We haven’t actually reached a point where one can completely sit back and see a test script opening up pages in all devices & compare them with a base line wire frame (would be pretty cool eh?).

In this post I will walk you through the raw setup & development, on how you can write an automation script to test your responsive site inside a headless webkit browser.

We would be using Nodejs, Gruntjs (task runner), Phantomjs (headless webkit browser), Casperjs (navigation scripting & testing utility). So lets get started.

We will use a base framework for testing the responsive nature of the pages. I will use this framework as a base for this post. We will use a different Github repository to clone the code from. But the features are exactly the same.

Clone the Boilerplate

Create a new folder and name it ‘rwdAutomation‘, open terminal/prompt here & run

git clone https://github.com/arvindr21/rwdTestAutomationBoilerplate.git

PS: You need to have either github or git tools installed. Else you can navigate Here, and click on the download button on the bottom right hand side to get a copy of the code. Once the code is downloaded, unzip it. This is the same as the above statement. 

Install Dependencies

Now, rename the rwdTestAutomationBoilerplate folder to rwd-test  for simplicity. Using terminal/prompt navigate inside the rwd-test folder. We need Node to continue. You can follow this tutorial to install node, in case you don’t have it setup already. We also need bower package manager. So we need to run npm install -g bower after Node is installed.

Next, lets setup the dependencies. Run  npm install && bower install. This will take 2 – 5 mins to complete.

PS : If you are facing issues with bower install, that may be because you don’t have git installed. You can download git from here. In-case you are facing issues with git ssh & https, then open git bash (after installing git) & execute  git config --global url.https://.insteadOf git:// .

Setup Phantomjs & Casperjs

We would be using Phantomjs & Casperjs to handle the automation part of visual testing. You can read more about Phantomjs here & Casperjs here.

Run

Windows Mac/*nix
npm install phantomjs -g --save-dev     sudo npm install phantomjs -g --save-dev 

to install phantomjs and add this as a dev dependency to our project as well as package.json. Next we need to setup Casperjs, for that run

Windows Mac/*nix
npm install casperjs -g --save-dev      sudo npm install casperjs -g --save-dev 

Do note that we are installing with -g flag, making the setups global.

Now, we will use Grunt to manage our project. You can know more about Grunt here.

Running the app

Now lets run the webpage and see some output. Execute the following in your prompt  grunt server. This will start the server and run the application. A new web page will open in your default browser. Click on ‘App’ link. This is our app folder, where our responsive page resides. You should be redirected to  http://127.0.0.1:9000/app/.

You can resize the browser and check the responsive nature of the page. You can see that the toggle nav bar appears on top when the width < 768px.

Testing Scenario

To keep things simple, we will test the responsive nature of the menu. That is check if menu toggle appears when we are in a device, whose width is < 768px & does not appear when we are in a device whose width is >= 768px.

Navigate to  /test/spec folder. You will find a file named  responsive-Spec.js open it in your favorite editor. This is essentially all the code we need to check the toggle menu.

You can check out the casperjs tester module on how to write test cases. To quickly walk you through, we have set a few default viewports, iterate through them, load the same page via phantomjs. Once the page is loaded, we will check if the toggle menu is visible or not. To run the test,

Windows Mac/*nix
casperjs /test/spec/responsive-Spec.js  casperjs test /test/spec/responsive-Spec.js

On mac/*nix, you might face an error like

This is kind of a known error. To work around this, you need to uninstall the latest phantomjs and install version 1.9.1-0. So, lets run the commands (ctrl + c to return to prompt)

sudo npm uninstall -g phantomjs then  sudo npm uninstall phantomjs

Now, let install Phantomjs version 1.9.1-0

sudo npm install -g phantomjs@1.9.1-0 --save-dev

Now you can try running  casperjs test /test/spec/responsive-Spec.js

Mac/*inx users, if you see an error like

run your casperjs test using  casperjs test /test/spec/responsive-Spec.js

Assuming your website is running, the above command will execute a series of tests and will print the result in the console, which will look something like this

You can checkout the screenshots at the root of our folder  rwd-test/127-0-0-1-9000-app-. As of now, you can see screenshots for all view ports.

This is where I have gotten so far. My next steps is to integrate this code with any image comparison libraries like this or this & automate the complete process by taking wireframes or previous version screenshots as baseline.


Thanks for reading! Do comment.
@arvindr21

Tweet about this on TwitterShare on LinkedIn1Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page
  • chandramuralis

    I’m getting this error

    • / Arvind Ravulavaru

      Thanks Chradmurali. Fixed it. Pushed the fixed code to Github. You can test it again now.

      • chandramuralis

        Thanks Arvind….. that fixed the issue…. one quick question, I don’t see the screenshots getting saved anywhere. do I need to enable/configure something?

        • chandramuralis

          Just realized that my test cases are not actually running…. below is what I see from the console

          # Check for menu

          ⚠ Check for menu: 6 tests planned, 0 tests executed
          width : 320 Height: 480
          width : 320 Height: 568
          width : 600 Height: 1024
          width : 1024 Height: 768
          width : 1280 Height: 800
          width : 1440 Height: 900

          • / Arvind Ravulavaru

            True, did not notice that. Looks like quite a lot has changed in the last year. Let me fix that and get back to you.

          • chandramuralis

            I didn’t realize this post was from last year :-) thought this was last week article

          • Viru

            Hi Arvid, I can still see the same problem mentioned above, tests are not executing..can you please let me know how to fix it?

          • / Arvind Ravulavaru

            Hello Viru, There has been quite a few changes. I may need to re-write this. You can take a look at PhantomCSS if you are looking for something on the same lines as above. Thanks.

  • krishna hvs

    Awesome!! Thanks a lot this is of great help. I am yet to try all these. This would surely give me good head start on responsive design test automation framework.

    • / Arvind Ravulavaru

      Thanks krishna!