Responsive sites are becoming popular and the conversion of a customer is more in mobile/tablet browsers. It has become mandatory to ensure that the site is functional and looks good in desktop browsers as well as in devices. So, we have to test the application in devices as well as desktops for each release.

When we manually do the compatibility testing in all the devices it consumes a lot resource in terms of time and the money. So, automation testing of the site/application is critical to the success of on time project quality delivery in an agile environment.

Automation testing enhances the efficiency; test coverage of the application, in turn, improves the quality of the application. It comes in handy to do automation testing of responsive design with Node.js,, and Mocha framework.

Automating test cases reduces regression testing time which is helpful during peak season!

Having a planned test strategy with predefined test cases is a key to creating a seamless e-commerce experience.

Installation steps:

  1. Download and Install Java.
  2. Download and Install node.js – – take the stable version and select based on your windows version.
  3. Set up the selenium web driver.  Download the stable version of selenium jar from page.
  4. Create simple test folder.  Webdriver-io-test. Go to that folder.
  5. Run the command – npm install webdriverio
  6. Run ./node_modules/.bin/wdio config
  7. Create folder ./test/specs
  8. Write a test file and put in specs folder.
  9. To run the test suite, run the command:

./node_modules/.bin/wdio wdio.conf.js

The default reporter is the dot. For additional reporters, you can refer Reporters section and install the required reporter and configure in Mocha Node.js

 Sample code:

The scripts are having the extension as .js.

Command line Execution & Report output:

Start selenium server.

Open another command prompt and run the command

wdio <configurationfile.js>

For example, wdio wdio.conf-cchomepage.js


Responsive design Automation testing Node.js Mocha

Junit.xml imported in Excel:

We can import the WDIO.xunit.firefox.0.xml file into excel to get the report in .xls format and present to the stakeholders.


Responsive design Automation testing Node.js, Mocha


We can run the scripts with various resolutions and it will help us to reduce the regression testing time in multiple browsers.  We can even configure multiple browsers like Firefox and chrome and the scripts can be executed in Firefox ,Chrome, iOS, and Android  browsers. We can even execute the scripts in parallel also.

Hope the article was useful.




  • Bhavani

    Bhavani is Certified Software Test Manager and Six Sigma Green Belt. Passionate about testing eCommerce sites. Learning and implementing the latest automation tools. Mentoring.


Ready to drive online revenue

Get In Touch

6 thoughts on “Responsive Design Automation Testing With Node.js, And  Mocha

    1. Hi Guna,

      Thanks for your comments.
      You have to set the node.js in your PATH environment variable. Then run the command with the below syntax: node node test.js This is for running single test. To execute the suite of tests, you have to use the default test runner wdio.
      Please subscribe to our blogs.

    1. Hi Tim,

      Thanks for your query.
      Here is the reply.

      Actually the framework used is Mocha and it is configured in wdio.conf.js configuration file.
      No need to mention in the script.

      The sample block of configuration for Mocha and the reporters is pasted below for your reference.

      // Make sure you have the wdio adapter package for the specific framework installed
      // before running any tests.
      framework: ‘mocha’,
      // Test reporter for stdout.
      // The only one supported by default is ‘dot’
      // see also:
      reporters: [‘dot’,’junit’],
      reporterOptions: {
      outputDir: ‘./’

      Did this answer your query?
      Please let us know.
      Subscribe to our blogs.

  1. Thank you for the useful tutorial , we are using webdriverio and jasmine combination for testing .Please let me know if there is possibility to generate the test report in excel format .

    1. Hi Sasi,

      Thanks for your comments.

      Here is our reply. Please let us know if this works for you. Thansk. Keep reading your blogs and post your comments/feedbacks.


      You cannot get the report directly in excel format.
      You can get the junitreport in .xml format when running jasmine with the below options.

      –junitreport, export tests results as junitreport xml format
      –output FOLDER, defines the output folder for junitreport files

      Reference url :
      Once generated the junitreport.xml, you can directly import into excel.
      Data->From Other Sources->From XML Data import->open the generated .xml file.

Leave a Reply

Your email address will not be published. Required fields are marked *