Automating the Web - An Intro to Selenium

Intro To Selenium
by Jonathan Clarkin
Twitter @_jrwc http://about.me/jclarkin

View Slide

THE FOLLOWING PRESENTATION HAS BEEN RATED
TESTERS STRONGLY
CAUTIONED
PG-13
SOME MATERIAL MAY BE INAPPROPRIATE FOR CHILDREN UNDER 13
CODING SKILLS
WEB AUTOMATION
LEARNING & GROWTH
Twitter @_jrwc http://about.me/jclarkin

View Slide

Introductions

View Slide

- Name
- Current Job Role
- Previous Job Experience
- Experience with Test Automation
- Favorite TV Show
Introductions
Jonathan Clarkin | @_jrwc | #KWSQA

View Slide

- Software Engineer
- Team Leader
- Visual Designer
- Mobile Developer
- Software Architect
Introductions: Me
- Test Engineer
- Automation Tools Researcher
- …

View Slide

Introductions: Me

View Slide

- Setting up Java, Eclipse, JUnit, and Selenium
- Authoring syntax of JUnit scripts
- Using basic Selenium commands
- Peeking under the web via browser tools
- Applying Selenium Selectors
- And more !
Objectives

View Slide

- Objectives at the beginning
- Ask Questions
- Ask for Help
- Answer Questions
- Slides will be available after the workshop
Workshop Fundamentals

View Slide

- Coding Experience Level: Beginner
- Automation Experience Level: Beginner
- It’s OK to leave (and come back)
Minimize disruptions
Setting Expectations

View Slide

Overview

View Slide

Why Automate?

View Slide

To facilitate testing by ...
- detecting changes in a product (via checks)
- reducing effort on repetitive activities
- eliminating human error setting up data
- minimizing time intensive tasks
Why Automate?

View Slide

It only does what we tell it to do
Automation Is not Smart

View Slide

Automation Is not Smart

View Slide

Why Automate?
Testers Need To Code?

View Slide

Nope
But it is another useful skill in our tool-belts
:)
Why Automate?

View Slide

Why Automate?
Areas of Testing
(credit: Brian Marick, Lisa Crispin)

View Slide

Why Automate?
Front-End Automation is Costly

View Slide

- And more: Looping, Windows, Page Objects ...
Objectives

View Slide

A fancy application, like Notepad/TextEdit…
but
Designed to make coding in Java easier
(thank you content assist)
What is Eclipse

View Slide

A Java framework designed for creating and
reporting on checks
- Test runner to execute checks
- Collection of assertion rules
- Results formatter
What is JUnit

View Slide

An automation framework for interacting with
browsers and the web
- Created in 2004 by ThoughtWorks
- Open Source and Popular
- Cross browser and cross platform
What is Selenium WebDriver

View Slide

Setup

View Slide

- Firefox
- Chrome
- Safari
- Internet Explorer 10+
Modern Browser

View Slide

We’ll be using Java 7
Download URL: http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html
Java

View Slide

We’ll be using Java 7
Download URL: http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html
Beware...
“Ask Toolbar”
Java

View Slide

From your console | terminal | shell run:
java -version
TEST IT

View Slide

Download and install Eclipse Standard 4.4
Download URL: https://www.eclipse.org/downloads/packages/eclipse-standard-44/lunar
Eclipse

View Slide

Try to launch Eclipse
TEST IT

View Slide

Get a copy of Selenium WebDriver for Java
(Zip contains JUnit)
Download URL: http://docs.seleniumhq.org/download/
Selenium & JUnit

View Slide

1. Unzip Selenium
2. Launch Eclipse
3. Create a new Project
4. Add External JARs
Done!
Setup Eclipse + Selenium + JUnit

View Slide

1. Unzip Selenium

View Slide

1. Unzip Selenium
2. Launch Eclipse
Done!

View Slide

1. Unzip Selenium
2. Launch Eclipse

View Slide

1. Unzip Selenium
2. Launch Eclipse
Done!

View Slide

1. Unzip Selenium
2. Launch Eclipse

View Slide

1. Unzip Selenium
2. Launch Eclipse
Done!

View Slide

1. Unzip Selenium
2. Launch Eclipse
Done!
Add all Selenium Jars
● The two JARs in the root folder
● All in the JARs in the /libs/ subfolder

View Slide

1. Unzip Selenium
2. Launch Eclipse
Done!

View Slide

TEST IT

View Slide

Drag into your project (copy)
BasicScenarioTest.java
Ensure it is in the /src/ folder
TEST IT

View Slide

Right-Click on the file and select
Run As > JUnit Test
(detailed explanation on running tests will be covered later)
TEST IT

View Slide

Objectives

View Slide

Java & JUnit

View Slide

Sample Test Case

View Slide

Classes

View Slide

A class is a block of code used to encapsulate a
bunch of:
- Variables
- Structures
- Methods
Classes

View Slide

Classes: Create New

View Slide

Classes Example

View Slide

Classes Example
Matches the folder
structure

View Slide

Classes Example
Matches the
filename
Matches the folder
structure

View Slide

Classes Example
Matches the folder
structure
Matches the
filename
Everything else is part of
the Java language
conventions

View Slide

Classes Example
Matches the folder
structure
Matches the
filename
the Java language
conventions
Purple signifies
special reserved
words

View Slide

Classes Example
Matches the folder
structure
Matches the
filename
the Java language
conventions
Purple signifies
special reserved
words If there is a // in front
of a line, it is a
comment zone

View Slide

Create a new Class called
MyFirstCheck
TEST IT

View Slide

Methods

View Slide

A method is a function: a small chunk of
executable instructions
Methods

View Slide

Methods

View Slide

Methods
A method !

View Slide

Methods
A method !
It should have
a memorable
unique name

View Slide

Methods
It should have
a memorable
unique name
This specifies whether
other classes can see
the logic
public vs. private
(for us: always public)
A method !

View Slide

Methods
the logic
public vs. private
This specifies whether the logic
gives back an answer
(for our tests, they will all be void)
A method !
It should have
a memorable
unique name

View Slide

Methods
A method !
It should have
a memorable
unique name
the logic
public vs. private
This specifies whether the logic
gives back an answer
(for our tests, they will all be void)
All logic goes here

View Slide

Create a method named
checkForBugs()
TEST IT

View Slide

Test Methods

View Slide

Test Methods
Only real difference
is this:
@Test

View Slide

Test Methods
is this:
@Test
import is a way to get access
to code in other files.
In this case, we’re using the
magic of the Test class

View Slide

Test Methods
is this:
@Test
import is a way to get access
to code in other files.
In this case, we’re using the
magic of the Test class
You can have
multiple tests in the
same file

View Slide

Make your method into a test
@Test
TEST IT

View Slide

Assertions

View Slide

Assertions
This import gets us
access to Asserts

View Slide

Assertions
This import gets us
access to Asserts
This is an assert.
In this example we are
checking that two things are
equal.
The value on the left is our
expected value, the one of
the right is the calculated.

View Slide

Assertions
This import gets us
access to Asserts
This is an assert.
In this example we are
checking that two things are
equal.
The value on the left is our
expected value, the one of
the right is the calculated.
It’s ok if the expected and
actual values don’t match.
This is when our
automation will report to us
something is not right.

View Slide

Add an assertion
assertTrue( 42 > 100 );
TEST IT

View Slide

Running Tests

View Slide

Runs all tests in the Class file
Three possible results
● Pass
● Fail
● Error
Running Tests

View Slide

Three possible results
● Pass No problems found
● Fail Expectation did not happen
● Error Something unexpected occurred
Running Tests

View Slide

State of the set of tests clearly highlighted by
a large colourful bar
Running Tests

View Slide

What do you predict will be the result of
our assertion?
Try running it.
Did the results match your expectations?
TEST IT

View Slide

Strings

View Slide

A String is a bit of text, that can be stored for
later reference.
E.g. Store some data, as type String, using an id name of
‘person’
String person = “Jonathan”;
Strings

View Slide

A String is a bit of text, that can be stored for
later reference.
E.g. Store some data, as type String, using an id name of
‘person’
String person = “Jonathan”;
Strings
Store some data
Using an id name of
person
as type String

View Slide

Add a String to your check
TEST IT

View Slide

JUnit Methods

View Slide

Other than @Test, the key ones are:
@Before
@After
@BeforeClass
@AfterClass
JUnit Methods

View Slide

@Before Method to run before each test
@After Method to run after each test
@BeforeClass
@AfterClass
JUnit Methods

View Slide

@BeforeClass
@AfterClass
JUnit Methods
Run Class
Before commands
Test A
After commands
Before commands
Test B
After commands
End running Class

View Slide

@BeforeClass
@AfterClass
JUnit Methods
Why ?
To create common commands once
A Selenium Example might be..
- to login a user before each test
- to logout the user after each test

View Slide

@BeforeClass Method to run once before all tests
@AfterClass Method to run once after all tests
JUnit Methods

View Slide

JUnit Methods
Run Class
Before Class commands
Test A
Test B
After Class commands
End running Class

View Slide

JUnit Methods
Why ?
To create common commands once
A Selenium Example might be..
- to open up a browser window once
- to close the browser once complete

View Slide

Add @before and @after
methods to your class
Have them print to the console
System.out.println(“Something”);
TEST IT

View Slide

Objectives

View Slide

Selenium Basics

View Slide

Open a browser
Go somewhere nice (url)
Fill in form fields
Click some things
Assert that our expectations match reality
Close the browser
Our mission...

View Slide

Commands differ based on choice of browser.
Firefox is the Selenium default choice
WebDriver driver = new FirefoxDriver();
After this command executes, Firefox should open
Mission: Open the Browser

View Slide

TEST IT

View Slide

Tell the driver which URL to visit
driver.get( “http://en.wikipedia.org” );
After which, the browser will load to requested page
Mission: Go Somewhere Nice

View Slide

TEST IT

View Slide

Find a form field on the page
WebElement searchfield =
driver.findElement( By.id(“searchInput”) );
We now have access to this bit of the page. We can
interact with it (click, type, etc).
Mission: Fill in Form Fields

View Slide

Find the get button and click it
searchfield.sendKeys( “The Matrix\n” );
Mission: Fill in Form Fields

View Slide

TEST IT

View Slide

Assert the page title is what we expect
String title = driver.getTitle();
assertEquals( title, “The Matrix” );
Mission: Assert Expectations

View Slide

TEST IT

View Slide

driver.quit();
Mission: Close the Browser

View Slide

TEST IT

View Slide

☑ Open a browser
☑ Go somewhere nice
☑ Fill in form fields
☑ Click some things
☑ Assert that our expectations match reality
☑ Close the browser
Our mission...

View Slide

Our mission...

View Slide

Objectives

View Slide

Browser Tools

View Slide

The browser dev-tools are your friend to
finding out how to uniquely identify the
elements on a web page.
Dev Tools

View Slide

Accessing the Dev Tools
Exact menu option
depends on the
browser

View Slide

Element Selector
Click the
selector tool

View Slide

Element Selector
Click on an element of
the page to select it

View Slide

With the HTML shown, we can pick how best
to identify our element:
id
class
xpath
Finding Ids, Class Names, and more

View Slide

Go to wikipedia
Use the Element Selector
See the HTML for the search field
TEST IT

View Slide

Objectives

View Slide

Selectors

View Slide

There are many ways to grab parts of the web page:
- Id
- Class
- Name
- Link Text
- XPath
Selectors

View Slide

321 South St
123 Main St

321 North St
123 West St
321 South Ave

Sample DOM

View Slide

321 South St
123 Main St

321 North St
123 West St
321 South Ave

driver.findElements(By.id( “eric_h_jung” ));
Select By Id

View Slide

On Wikipedia
Using Dev Tools
Go to Console tab and type...
$(‘#’)
(replace with the search field id)
TEST IT

View Slide

321 South St
123 Main St

321 North St
123 West St
321 South Ave

driver.findElements(By.className( “human” ));
Select By Class

View Slide

321 South St
123 Main St

321 North St
123 West St
321 South Ave

driver.findElements(By.className( “youth” ));
Select By Class

View Slide

Using Dev Tools Console, type
$(‘input’)
What happened and why?
TEST IT

View Slide

321 South St
123 Main St

321 North St
123 West St
321 South Ave

driver.findElements(By.name( “address” ));
Select By Name

View Slide

Using Dev Tools
find the name of the wiki search field
TEST IT

View Slide

321 South St
123 Main St

321 North St
123 West St
321 South Ave

driver.findElements(By.partialLinkText( “321 South” ));
Select By Partial Link Text

View Slide

Select By Link Text

321 South St
123 Main St

321 North St
123 West St
321 South Ave

driver.findElements(By.linkText( “321 South Ave” ));

View Slide

321 South St
123 Main St

321 North St
123 West St
321 South Ave

driver.findElements(By.xpath( “/people” ));
Means element
Means top level
Select By XPath

View Slide

321 South St
123 Main St

321 North St
123 West St
321 South Ave

driver.findElements(By.xpath( “/people/person” ));
Means second level
Select By XPath

View Slide

321 South St
123 Main St

321 North St
123 West St
321 South Ave

driver.findElements(By.xpath( “/people/person[1]” ));
Means first match
Select By XPath

View Slide

321 South St
123 Main St

321 North St
123 West St
321 South Ave

driver.findElements(By.xpath( “/people/person[2]” ));
Means second match
Select By XPath

View Slide

Select By XPath

321 South St
123 Main St

321 North St
123 West St
321 South Ave

driver.findElements(By.xpath( “//person[2]” ));
Means any depth

View Slide

Using Dev Tools Console
$x(“”)
retrieve all inputs on the wiki homepage
TEST IT

View Slide

321 South St
123 Main St

321 North St
123 West St
321 South Ave

driver.findElements(By.xpath( “//href[@city=’denver’]” ));
@ means attribute
Select By XPath

View Slide

Select By XPath

321 South St
123 Main St

321 North St
123 West St
321 South Ave

driver.findElements(By.xpath( “//href[@city=’denver’]/..” ));
@ means up one level

View Slide

Review of ways to grab parts of the page
- Id driver.findElement( By.id() );
- Class driver.findElement( By.className() );
- Name driver.findElement( By.name() );
- Link Text driver.findElement( By.linkText() );
driver.findElement( By.partialLinkText() );
- XPath driver.findElement( By.xpath() );
Selectors

View Slide

Least to most brittle selectors
(likely to be broken as software evolves)
- Id
- Class
- Name
- Link Text
- XPath
Selectors

View Slide

Objectives

View Slide

Checking with Asserts

View Slide

Here is a list of common asserts you can use to
verify your expectations against the actual
webpage results
Asserts

View Slide

Asserts
Statement Description
fail( message ) Cause the test to immediately fail, reporting the
provided String as message
assertTrue( message, condition ) Checks that the condition is true, and reports the
message if instead it is false.
assertFalse ( message, condition ) Checks that the condition is false, and reports the
message if instead it is true.
assertEquals( message, expected,
actual )
Checks that the expected value matches the actual, or
reports the message otherwise
Be sure to provide a useful message for when checks fail.
This will be the first source of information for diagnostics

View Slide

TEST IT

View Slide

Looping

View Slide

Sometimes we need to perform some logic on
a collections of possible elements
driver.findElements(By.className(“div”));
This command gets more than one element
Looping a little

View Slide

Using a ‘for-loop’ we can investigate each one
for(WebElement elem : driver.findElements(By.className(“div”)) )
{
// Do something with the specific ‘elem’ element
}
Looping a little

View Slide

We can check aspects of each one
for(WebElement elem : driver.findElements(By.className(“div”)) )
{
if(elem.getText().equals( “Neo” ) break;
}
The ‘break’ command quits the loop early
Looping a little

View Slide

TEST IT

View Slide

Multiple Windows

View Slide

Each window has a ‘handle’ to access it
String currentWindow =
driver.getWindowHandle();
Popups - How to Swap Windows

View Slide

The driver has a list of all window handles
driver.getWindowHandles();

View Slide

We can loop over all window handles and
change the current window
for( String handle : driver.getWindowHandles()) {
driver.switchTo().window( handle );
}

View Slide

As we loop, we can check the window title and
stop looping once we find the right one
if( driver.getTitle().equals( “The Matrix” ) ) {
break; // This means stop looping immediately
}

View Slide

Once looping is done, it is wise to confirm that
we are on the desired page
assertTrue( driver.getTitle().equals( "The Matrix" ) );

View Slide

Popups - All Together

View Slide

TEST IT

View Slide

Page Objects

View Slide

A Page Object is pattern used to create more
maintainable Selenium tests
Page Objects

View Slide

A Page Object is a model of a single page of a
website.
● It exposes the page interactions
● It hides the volatile selectors
Page Objects

View Slide

public class LandingPage {
private WebDriver driver;
public LandingPage(WebDriver aDriver) {
this.driver = aDriver;
}
}
Page Objects
- Create a class for the page
- It will need a constructor
(special type of method)
- Let the Page Object access the WebDriver

View Slide

// Top Bar
private By HOME = By.xpath("//*[@id='gn-apple']/a");
private By STORE = By.xpath("//*[@id='gn-store']/a");
private By MAC = By.xpath("//*[@id='gn-mac']/a");
private By IPHONE = By.xpath("//*[@id='gn-iphone']/a");
…[Constructor code]…
}
Page Objects
Define selectors for
each bit of the page

View Slide

…[Selectors, Constructor code]…
public void goToStore() {
driver.findElement(STORE).click();
}
public void searchFor(String something) {
driver.findElement(SEARCH).sendKeys(something + "\n");
}
}
Page Objects
Add methods for each interaction
Use the defined selectors

View Slide

Now we have a reusable Page Object !
Page Objects

View Slide

To use it in a test…
● import LandingPage;
● LandingPage page = new LandingPage( driver );
● page.searchFor( “Apple Juice” ); // Use it
Page Objects

View Slide

Creating Page Objects as a complementary
activity to creating new web pages can be a
great way to determine if it was written with
testing in mind.
Page Objects

View Slide

TEST IT

View Slide

Page Factory

View Slide

PageFactory is a special tool that helps further
encapsulate Page Object patterns.
LoginPage page
= PageFactory.initElements(driver, LoginPage.class);
PageFactory

View Slide

Pros
- Simplifies Selectors in the PageObject
- Simplifies the constructors of PageObjects
Cons
- Does not work well with dynamic pages
- Slow if PageObject has lots of selectors
PageFactory

View Slide

Sample PageObject for use with PageFactory:
PageFactory

View Slide

The test case is nearly identical
PageFactory

View Slide

TEST IT

View Slide

Mobile Automation

View Slide

What if Selenium WebDriver could drive mobile
apps as well ?
Mobile App Automation

View Slide

It can with a friend called...

View Slide

Appium is an open source tool that helps
Selenium WebDriver scripts talk to iOS and
Android apps

View Slide


View Slide

We write our Selenium tests in the same style
as before, but now they interact with our apps

View Slide

WebDriver driver = new AppiumDriver(
new URL("http://127.0.0.1:4723/wd/hub"));
WebElement loginUsername =
driver.findElements(By.className("UIATextField"));
loginUsername.sendkeys(“jclarkin”);

View Slide

You choose the level of fidelity:
- Check against simulated app
- Check against emulated app
- Check against physically wired app
- Robotics !

View Slide


View Slide

https://www.youtube.com/watch?v=DShxaaTb_rg

View Slide

More info at:
- Appium: appium.io
- Robots: tapsterbot.com

View Slide

Review

View Slide

- Grab a pen & some sticky notes
- Write down :
- What new insights have you gained ?
- How you feel about the workshop ?
- Which questions do you still have ?
- How did someone on your team help you?
- Place them on the communal wall
Activity: Feedback

View Slide

THANK YOU
This is not a work of fiction. Names, characters, places and
incidents are products of the author’s memory. Any resemblance to
actual events or locales or persons, living or dead, is not entirely
coincidental.
All copyright belong to their respective owners.
Images and text owned by other copyright holders are used here under the guidelines of the Fair
Use provisions of Copyright Law.
Special thanks to the Wachoskis and 20th Century Fox for creating The Matrix

View Slide

View Slide

Automating the Web - An Intro to Selenium

Automating the Web - An Intro to Selenium

jclarkin

More Decks by jclarkin

Other Decks in Technology

Featured

Transcript