React Revived Web Driver IO for Testers
Abstract
UI testing is always challenging. Some parts of an app you can test through automation, while others you need to test manually. We always try to minimize manual testing, but in order to deliver an awesome user experience, automation testing is equally important.
I will talk about setting up an automation testing environment for React.JS web apps using WebdriverIO and Jasmine which will help the testers to actually act like a SWAT team for 24/7 and will strengthen the emerging bond of a developer and tester. Most importantly WebdriverIO provides a great library which will allow us to execute browser based testing using selenium making it encouraging for automation testers
With this presentation for those who wants to test a react.js app and prefer JavaScript, this may be the way for you. Some of the advantages of using webdriverIO, is that the selectors are really easy to understand, and use. Every WebdriverIO command is chainable and returns a promise, making it incredibly easy to write synchronous code to test the asynchronous browser environment.
What is React JS and WHY?
React is a declarative, efficient, and flexible JavaScript library for building user interfaces.
It forces us to architect apps usingtestable patterns, in part, because it’s got fantastic test tools.
These components can be thought of as widgets or chunks of some HTML Logic
For a given set of parameters, react JS Component only cares about its
parameter properties, no tracking of global variables and config objects required.
As a result, we don’t have to perform complex scaffolding to test a React component
Front End Testing Is Not Just the Unit Testing
Front-end code isn’t about manipulating data. It’s about user events and rendering the right views at the right time. Front-ends are about users.
Here’s what we want to be able to do:
Test user events
Test the response to those events
Make sure the right things render at the right time
Run tests in many browsers
Re-run tests on file changes
Work with continuous integration systems
Testing UI Components with React JS
UI testing is always challenging.
In Today’s time, we are :
Trying to Minimize the manual testing effort
Focusing on providing an awesome test experience, for which automation testing is equally important
In My Opinion there are two types of Unit Testing
Visual Testing
Functional Testing
End to End Testing of React JS apps Using Web driver IO
WebdriverIOcomes with its own test runner
Provides a great library which will allow us to execute browser based testing using selenium.
Comes integrated out of the box with Jasmine,
Plugin called WebdriverCSS that allows you to do cross visual platform/browser tests.
Lets you use your favorite testing framework (Jasmine, Mocha, Cucumber) and assertion library (Chai for Mocha)
Setup Pre-requisites, Installation and Demo
Some Final Thoughts…
For those of you who have to test a react.js app and prefer JavaScript, this may be the way for you
Advantages of using webdriverIO, is that the selectors are really easy to understand, and use.
WebdriverIO command is chainable and returns a promise, making it incredibly easy to write synchronous code to test the asynchronous browser environment.
Last but not the least, first step for a tester like me to become an SDET.
Author Biography
Vikrant Singh is working as Sr. S/w Testing Engineer, Test Automation with QA InfoTech from past 3 Years and 5 Months.
He is a B.Tech of Batch-2014, Computers Science from ITS and completed his Masters in MBA from IMT- Ghaziabad.
THANK YOU!