React Revived Web Driver IO for Testers Vikrant Singh QA Infotech Logo of your organization

  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.

AGENDA What is React JS and Why ? Front End Testing Is Not Just The Unit Testing Testing UI Components with React JS End to End Testing Of ReactJS WebApps Using Web driver IO Setup Pre-requisites, Installation and Demo Some Final Thoughts…

What is React JS and Why? View Of MVC Virtual DOM ReactJS Own Debugger

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.

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

UI Mock up Tool End to End Testing of React Js Using Web driver IO FROM STORY TO TRANSFORMATION WebdriverIO comes 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) UI Mock up Tool

UI Mock up Tool UI Mock up Tool Setup Pre-requisites, Installation and Demo Dependencies Node.JS NPM Chrome $ npm install webdriverio --save-dev $ npm install jasmine --save-dev $ npm install wdio-jasmine-framework --save-dev $ npm install wdio-spec-reporter --save-dev $ npm install selenium-standalone --save-dev Pre-requisites UI Mock up Tool UI Mock up Tool

$node_modules/.bin/wdio tests/wdio.conf.js UI Mock up Tool Setup Pre-requisites, Installation and Demo Webdriver IO Configuration File FROM STORY TO TRANSFORMATION wdio.conf.js page.js homePage.js testSuite.spec.js UI Mock up Tool $node_modules/.bin/wdio tests/wdio.conf.js UI Mock up Tool

UI Mock up Tool UI Mock up Tool 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. FROM STORY TO TRANSFORMATION UI Mock up Tool UI Mock up Tool

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.

Logo of your organization Thank You!!! Logo of your organization