webdriverjs session in selenium conf
DESCRIPTION
The slide deck is from a demo presented in SeConf2014.TRANSCRIPT
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 : [email protected]