WebDriver and Cucumber in the JavaScript Land

Surya Sreedevi VedulaRamalingam Sangarasubramanian

About

• Software Testing for 10 Years• Test Frameworks in Java, Python, Ruby and

JavaScript• Associated with Selenium since Selenium 1.0

and RC days• Twitter : @suryasreevedula

Agenda

• What is WebDriverJS?• How is it different from other bindings?• Demo a framework using WebDriverJS• Demo a framework using Protractor• Continuous Integration and Test Reports

Before we get started…

Language Bindings for WebDriver in JavaScript

What is WebDriverJS?

SELENIUM

SERVER

CHROMEDRIVER

FIREFOXDRIVER

JAVA

C# RUBY

JAVASCRIPT (JS) IE DRIVER

Language Bindings

Browser Drivers

WebDriverJS

• NPM module selenium-webdriver

Why WebDriverJS?

• WebDriverJS for testing JS front-end apps– Leverages the app environment setup– Leverages the build and CI processes– Use Common Mock and Test Services across

different layers of tests– Helps use common IDE tools– Better collaboration with the developers– Easier for any one in the team to maintain tests

How is it different?

SELENIUM

SERVER

CHROMEDRIVER

FIREFOXDRIVER

JAVA

SYNC

C# RUBY

JAVASCRIPT (JS) IE DRIVER

Language Bindings

SYNC SYNC

ASYNC

Browser Drivers

What is “Asynchronous” Language Binding?

ASynchronous

quick_call();

ti me_consuming_call();

i_wont_wait();

DOES NOT wait for ti me_consuming_call() to COMPLETE

Synchronous

quick_call();

ti me_consuming_call();

i_have_to_wait();

WAITS for ti me_consuming_call() to COMPLETE

Asynchronous WebDriverJS

• JS is Asynchronous• Node.js centered around JS’s asynchrony• WebDriverJS is a Node.js Application

Getting Started with WebDriverJS

• Create a npm project$ npm init

• Install WebDriverJS$ npm install selenium-webdriver

• Install mocha$ npm install mocha

• Write Spec• Run Spec

$ node_modules/mocha/bin/mocha spec/

Our First Test

A Detour into Asynchronous JavaScript

Asynchronous JavaScript

• Asynchronous functions CANNOT– Return values to the current execution context– Throw errors to the current execution context

Promises

• Promises are a software abstraction that makes working with asynchronous operations easy.

• Promises– Return Values.– Propagate errors.

Promises

• A promise is defined as an object that has a function as the value for the property then

promise.then(fulfillHandler, errorHandler);

Let’s Complete the First Test

WebDriverJS – A Quick View

Major Components

• webdriver.WebDriver• webdriver.WebElement• webdriver.By• webdriver.Options

webdriver.WebDriver

• Manages Browser– get, quit, close, executeScript, getTitle, getCurrentUrl

• Element Finder Functions– findElement, findElements, isElementPresent

• Helper functions– sleep, wait, takeScreenshot

• Gateway to other WebDriver API– manage() helps manage Options interface

webdriver.WebElement

• Provides UI Actions– click, sendKeys, isDisplayed, isSelected,

getAttribute, getText, clear

• Nested Element Finder Functions– findElement, findElements, isElementPresent

webdriver.By

Provides locator strategies1. webdriver.By.id2. webdriver.By.css3. webdriver.By.className4. webdriver.By.linkText5. webdriver.By.js6. webdriver.By.name7. webdriver.By.xpath8. webdriver.By.tagName

webdriver.Options

• Accessible via driver.manage() • Manage Timeouts– implicitlyWait, pageLoadTimeOut

• Manage Current Window– maximize, getPosition

• Manage Cookies– addCookie, deleteCookie

A Special Mention…

webdriver.Promise.ControlFlow

• Responsible for queuing webdriver.promise.Promise calls.

driver.get("http://localhost:8082/community-app"); var element = driver.findElement(webdriver.By.id("uid")); element.sendKeys("mifos"); var value = element.getAttribute("value"); value.then(function(value) {

assert.equal(value, "mifos"); });

Framework Using WebDriverJS

JS Concepts to note…

• Object Inheritance and not class inheritance– prototypal inheritance

• Module Imports – using Node.js CommonJS

• IIFE Blocks– Avoid Global Namespace

Framework Components

• Pages– BasePage– Page Inheritance

• Specs– Using Mocha

• Config Files– DriverConfig– AppConfig

• Test Data– LoginData

Code Walk-through

Protractor

• Framework to test Angular JS Applications.• Provides Angular JS Locators• waitForAngular• webdriver-manager• Cross Browser Testing using Selenium Grid• Multiple Test Framework Support

Setting Up Protractor

• npm install protractor

Leverage Protractor

• Use browser, by global functions• Use element for UI elements.• Leverage element function for getters• Remove waitForLoad and waitForElement

methods• Remove DriverConfig as it is handled by conf file• Leverage Angular JS Locators, by.• Use Jasmine Framework for the Specs

CI and Test Reports

Repos

• Framework– https://github.com/sreedevivedula/wdjs_fw/

• First Test Repo– https://github.com/sreedevivedula/wdjs_first_test

• JsAsync– https://github.com/sreedevivedula/jsasync

References

• WebDriverJS– http://code.google.com/p/selenium/wiki/WebDriv

erJs• You are missing the point of promises– http://domenic.me/2012/10/14/youre-missing-th

e-point-of-promises

Questions

Contact

• Twitter : @suryasreevedula• Email : sreedevi@thoughtworks.com