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.Webdriver.io 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 Webdriver.io 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, Webdriver.io Mocha

 

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

 

Be the first to Know

Subscribe to our blog to get the latest articles directly to your inbox.

READY TO DRIVE SALES?

Request a Quote Today

Request a Quote

Leave a Reply

6 Comments on "Responsive Design Automation Testing With Node.js, Webdriver.io And  Mocha"


Guest
Guna
9 months 9 days ago

Thank you for the useful tutorial , i need to know how to run the same on nodejs server. can you please help me.

Bhavani
Author
9 months 3 days ago

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.

Guest
tim
1 year 4 months ago

I’m sorry, but where is mocha here? I see it in the title, but not in the article examples.

Bhavani
Author
1 year 4 months ago

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: http://webdriver.io/guide/testrunner/reporters.html
reporters: [‘dot’,’junit’],
reporterOptions: {
outputDir: ‘./’
},

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

Guest
sasi
2 years 11 days ago

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 .

admin
Admin
2 years 2 days ago

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.

REPLY
—–

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 :https://www.npmjs.com/package/jasmine-node
Once generated the junitreport.xml, you can directly import into excel.
Data->From Other Sources->From XML Data import->open the generated .xml file.