May 3, 2016

Fa i l P ro o f Wa ys t o R u n Be a u t i f u l

Te s t s R e g a rd less o f B ro w se r

C ho i ceK E V I N B E R G , C U S T O M E R A U T O M AT I O N

S P E C I A L I S T

Kevin Berg

May 3, 2016

What I do:

• Help customers transition from running test manually or on local

Selenium grids, to parallel cross-browser testing in the cloud

• Write custom testing frameworks and Selenium scripts

C u s t o m e r A u t o m a t i o n S p e c i a l i s t , S a u c e L a b s

© Sauce Labs, Inc. 2

Agenda

May 3, 2016

• Selenium – Quick Overview

• The Problem Statement

• Why Cross Browser Testing is Important

• The Actual Problem – Timing

• The Solution – Waits!

• Demo

• Questions

• Discussion: Salt Lick vs. Franklin’s (Time Permitting)

B u c k l e u p , f o l k s .

© Sauce Labs, Inc. 3

Selenium – Quick Overview

May 3, 2016

Browser Automation Framework:

• Open source

• Used mainly for testing purposes

• Selenium can replicate nearly any user interaction with the

browser

• Supports all the most popular browsers

• Bindings to all the most commonly use programming languages

• Simple to start writing your first test

© Sauce Labs, Inc. 4

Automat ing wi th Selenium

May 3, 2016

• get(“www.myWebsite.com”)

• findElement()

• browser.findElement(By.id(“myId”));

• click();

• sendKeys();

• isDisplayed();

M O S T C O M M O N LY U S E D C O M M A N D S

© Sauce Labs, Inc. 5

The Problem

May 3, 2016

• The Usual Story

• Selenium tests are written in Firefox

• Tests Pass!

• Run Same tests in Internet Explorer

• Tests Fail!

• Anger

• What is Happening?

© Sauce Labs, Inc. 6

Why Fi refox?

May 3, 2016

• Comes out of the box with Selenium

• WebDriver driver = new FirefoxDriver();

• Selenium IDE Firefox Plugin

• Open Source

Ye a h , w h y ?

© Sauce Labs, Inc. 7

Firefox

Chrome

Browsers

May 3, 2016

Each browser uses a different rendering (or layout) engine:

• WebKit (Safari and iOS)

• Blink (Chrome, Opera)

• Gecko (Firefox)

• Trident (Internet Explorer)

• EdgeHTML (Microsoft Edge)

AJAX Requests

• DOM is accessed with JavaScript to dynamically display the information presented

W h y c r o s s b r o w s e r t e s t i n g i s i m p o r t a n t

© Sauce Labs, Inc. 8

The Actual Problem

May 3, 2016

Locating Elements in Different Browsers

• Page load times can vary

• Elements may not be on the page

• No Such Element Errors

• Elements can be present in the browser DOM before they are

visible

• Element not clickable errors

T h e s t u p i d b u t t o n d o e s n ’ t w o r k !

© Sauce Labs, Inc. 9

The Solut ion!

May 3, 2016

Waits

• Built in mechanisms that will allow for variation in website loading

times

• Two different types that work in different ways

• Implicit Waits

• Explicit Waits

• Sleeps

T h a t w a s e a s y.

© Sauce Labs, Inc. 10

Impl ic i t Wai ts

May 3, 2016

Implicit Wait

• Tells the WebDriver to poll the browser DOM for a certain amount

of time when trying to find an element or elements if they are not

immediately available.

• Applied to the WebDriver instance itself

Yo u a r e p r o b a b l y n o t g o i n g t o w a n t t o u s e t h e s e .

© Sauce Labs, Inc. 11

Expl ic i t Wai ts

May 3, 2016

Explicit Waits

• Code you define to wait for a certain condition to occur before

proceeding further in the code.

• E.g. Poll the DOM until the element I’m looking for is visible

• Used with individual elements as opposed to a blanket timeout on

the WebDriver instance

• Sleeps

E x p e r t s a g r e e , u s e E x p l i c i t w a i t s .

© Sauce Labs, Inc. 12

But wai t… I ’m confused…

May 3, 2016

They sound similar, and a Sleep is also a type of Explicit Wait?

• Never use Sleeps

• Don’t use Implicit Waits

• Can cause problems when the element you are trying to interact

with is not ready

• E.g. Can be found in the browser DOM before it is visible

• Use Explicit Waits that Wait for a Condition (Not Time)

• Element to be Enabled, Visible, Clickable, Selected

• Seriously, Never use Sleeps

S e e w h a t I d i d t h e r e ?

© Sauce Labs, Inc. 13

Using Expl ic i t Wai ts

May 3, 2016

Use them any time an element is not immediately available.

• That is a lot of the time

• Page Loads, Form Submissions, Pop-Ups, etc.

• Example of how to implement in a Page Object:

T h e s l i d e s w i l l b e a v a i l a b l e o n l i n e .

© Sauce Labs, Inc. 14

Prove I t .

May 3, 2016

Challenge Accepted

• http://the-internet.herokuapp.com/dynamic_loading/2

I ’ l l b e l i e v e i t w h e n I s e e i t .

© Sauce Labs, Inc. 15

Resources

May 3, 2016

• SeleniumHQ

• http://www.seleniumhq.org/docs/

• The Selenium Guidebook by Dave Haeffner

• https://seleniumguidebook.com/

• ”Implicit Waits vs Explicit Waits” by Siva Dhanamjay

• http://www.aptuz.com/blog/selenium-implicit-vs-explicit-waits/

• “Difference Between Implicit, Explicit & Fluent Wait” by LakshaySharma

• http://toolsqa.com/selenium-webdriver/implicit-explicit-n-fluent-wait/

• “Why don’t web browsers render the same content identically?” by Aaron Boodman

• https://www.quora.com/Why-dont-web-browsers-render-the-same-content-identically/

S t a n d i n g o n t h e S h o u l d e r s o f G i a n t s

© Sauce Labs, Inc. 16

Ques t i ons?