Responsive Design Automation Testing With Node.js, Webdriver.io And  Mocha

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, Webdriver.io, 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 – https://nodejs.org/en/ – 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 http://seleniumhq.org/ 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 wdio.conf.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

For example, wdio wdio.conf-cchomepage.js

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.

We can run the webdriver.io 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.

References