$30 off During Our Annual Pro Sale. View Details »

Automating the Web - An Intro to Selenium

jclarkin
October 10, 2014

Automating the Web - An Intro to Selenium

Automation is a valuable tool that can assist with testing activities. It cannot learn and evaluate the state of software, but it can gather data and reduce effort on repetitive or time intensive tasks.

In this workshop, participants will learn how to create automation for navigating the web. We will cover:
* Setting up your environment with Java, Eclipse, JUnit, and Selenium WebDriver
* Using basic WebDriver commands
* Applying WebDriver Selectors
* Exposing web pages via modern browser dev tools
* Authoring syntax of JUnit scripts
* Implementing the Page Object pattern

Sample code available at: https://github.com/jclarkin/intro2selenium

jclarkin

October 10, 2014
Tweet

More Decks by jclarkin

Other Decks in Technology

Transcript

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

    View Slide

  2. 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

  3. Introductions

    View Slide

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

    View Slide

  5. - Software Engineer
    - Team Leader
    - Visual Designer
    - Mobile Developer
    - Software Architect
    Introductions: Me
    Jonathan Clarkin | @_jrwc | #KWSQA
    - Test Engineer
    - Automation Tools Researcher
    - …

    View Slide

  6. Introductions: Me
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  7. - 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 !
    Jonathan Clarkin | @_jrwc | #KWSQA
    Objectives

    View Slide

  8. - Objectives at the beginning
    - Ask Questions
    - Ask for Help
    - Answer Questions
    - Slides will be available after the workshop
    Workshop Fundamentals
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  9. - Coding Experience Level: Beginner
    - Automation Experience Level: Beginner
    - It’s OK to leave (and come back)
    Minimize disruptions
    Setting Expectations
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  10. Overview

    View Slide

  11. Why Automate?
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  12. 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?
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  13. It only does what we tell it to do
    Automation Is not Smart
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  14. Automation Is not Smart
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  15. Why Automate?
    Testers Need To Code?
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  16. Nope
    But it is another useful skill in our tool-belts
    :)
    Why Automate?
    Testers Need To Code?
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  17. Why Automate?
    Areas of Testing
    Jonathan Clarkin | @_jrwc | #KWSQA
    (credit: Brian Marick, Lisa Crispin)

    View Slide

  18. Why Automate?
    Front-End Automation is Costly
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  19. - 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: Looping, Windows, Page Objects ...
    Testers Need To Code?
    Objectives
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  20. A fancy application, like Notepad/TextEdit…
    but
    Designed to make coding in Java easier
    (thank you content assist)
    What is Eclipse
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  21. A Java framework designed for creating and
    reporting on checks
    - Test runner to execute checks
    - Collection of assertion rules
    - Results formatter
    What is JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  22. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  23. Setup

    View Slide

  24. - Firefox
    - Chrome
    - Safari
    - Internet Explorer 10+
    Modern Browser
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

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

    View Slide

  26. We’ll be using Java 7
    Download URL: http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html
    Beware...
    “Ask Toolbar”
    Java
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

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

    View Slide

  28. Download and install Eclipse Standard 4.4
    Download URL: https://www.eclipse.org/downloads/packages/eclipse-standard-44/lunar
    Eclipse
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  29. Try to launch Eclipse
    TEST IT

    View Slide

  30. Get a copy of Selenium WebDriver for Java
    (Zip contains JUnit)
    Download URL: http://docs.seleniumhq.org/download/
    Selenium & JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  31. 1. Unzip Selenium
    2. Launch Eclipse
    3. Create a new Project
    4. Add External JARs
    Done!
    Setup Eclipse + Selenium + JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  32. 1. Unzip Selenium
    2. Launch Eclipse
    3. Create a new Project
    4. Add External JARs
    Done!
    Setup Eclipse + Selenium + JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  33. 1. Unzip Selenium
    Setup Eclipse + Selenium + JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  34. 1. Unzip Selenium
    2. Launch Eclipse
    3. Create a new Project
    4. Add External JARs
    Done!
    Setup Eclipse + Selenium + JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  35. 1. Unzip Selenium
    2. Launch Eclipse
    Setup Eclipse + Selenium + JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  36. 1. Unzip Selenium
    2. Launch Eclipse
    Setup Eclipse + Selenium + JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  37. 1. Unzip Selenium
    2. Launch Eclipse
    Setup Eclipse + Selenium + JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  38. 1. Unzip Selenium
    2. Launch Eclipse
    3. Create a new Project
    4. Add External JARs
    Done!
    Setup Eclipse + Selenium + JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  39. 1. Unzip Selenium
    2. Launch Eclipse
    3. Create a new Project
    Setup Eclipse + Selenium + JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  40. 1. Unzip Selenium
    2. Launch Eclipse
    3. Create a new Project
    Setup Eclipse + Selenium + JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  41. 1. Unzip Selenium
    2. Launch Eclipse
    3. Create a new Project
    Setup Eclipse + Selenium + JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  42. 1. Unzip Selenium
    2. Launch Eclipse
    3. Create a new Project
    4. Add External JARs
    Done!
    Setup Eclipse + Selenium + JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  43. 1. Unzip Selenium
    2. Launch Eclipse
    3. Create a new Project
    4. Add External JARs
    Done!
    Setup Eclipse + Selenium + JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  44. 1. Unzip Selenium
    2. Launch Eclipse
    3. Create a new Project
    4. Add External JARs
    Done!
    Setup Eclipse + Selenium + JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  45. 1. Unzip Selenium
    2. Launch Eclipse
    3. Create a new Project
    4. Add External JARs
    Done!
    Add all Selenium Jars
    ● The two JARs in the root folder
    ● All in the JARs in the /libs/ subfolder
    Setup Eclipse + Selenium + JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  46. 1. Unzip Selenium
    2. Launch Eclipse
    3. Create a new Project
    4. Add External JARs
    Done!
    Setup Eclipse + Selenium + JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  47. 1. Unzip Selenium
    2. Launch Eclipse
    3. Create a new Project
    4. Add External JARs
    Done!
    Setup Eclipse + Selenium + JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  48. 1. Unzip Selenium
    2. Launch Eclipse
    3. Create a new Project
    4. Add External JARs
    Done!
    Setup Eclipse + Selenium + JUnit
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  49. TEST IT

    View Slide

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

    View Slide

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

    View Slide

  52. - 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: Looping, Windows, Page Objects ...
    Jonathan Clarkin | @_jrwc | #KWSQA
    Objectives

    View Slide

  53. Java & JUnit

    View Slide

  54. Sample Test Case
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  55. Classes

    View Slide

  56. A class is a block of code used to encapsulate a
    bunch of:
    - Variables
    - Structures
    - Methods
    Classes
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  57. Classes: Create New
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  58. Classes Example
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  59. Classes Example
    Matches the folder
    structure
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  60. Classes Example
    Matches the
    filename
    Matches the folder
    structure
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  61. Classes Example
    Matches the folder
    structure
    Matches the
    filename
    Everything else is part of
    the Java language
    conventions
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  62. Classes Example
    Matches the folder
    structure
    Matches the
    filename
    Everything else is part of
    the Java language
    conventions
    Purple signifies
    special reserved
    words
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  63. Classes Example
    Matches the folder
    structure
    Matches the
    filename
    Everything else is part of
    the Java language
    conventions
    Purple signifies
    special reserved
    words If there is a // in front
    of a line, it is a
    comment zone
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  64. Create a new Class called
    MyFirstCheck
    TEST IT

    View Slide

  65. Methods

    View Slide

  66. A method is a function: a small chunk of
    executable instructions
    Methods
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  67. Methods
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  68. Methods
    A method !
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  69. Methods
    A method !
    It should have
    a memorable
    unique name
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  70. 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 !
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  71. Methods
    This specifies whether
    other classes can see
    the logic
    public vs. private
    (for us: always public)
    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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  72. Methods
    A method !
    It should have
    a memorable
    unique name
    This specifies whether
    other classes can see
    the logic
    public vs. private
    (for us: always public)
    This specifies whether the logic
    gives back an answer
    (for our tests, they will all be void)
    All logic goes here
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  73. Create a method named
    checkForBugs()
    TEST IT

    View Slide

  74. Test Methods

    View Slide

  75. Test Methods
    Only real difference
    is this:
    @Test
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  76. Test Methods
    Only real difference
    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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  77. Test Methods
    Only real difference
    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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  78. Make your method into a test
    @Test
    TEST IT

    View Slide

  79. Assertions

    View Slide

  80. Assertions
    This import gets us
    access to Asserts
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  81. 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.
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  82. 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.
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

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

    View Slide

  84. Running Tests

    View Slide

  85. Running Tests
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  86. Running Tests
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  87. Runs all tests in the Class file
    Three possible results
    ● Pass
    ● Fail
    ● Error
    Running Tests
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  88. Three possible results
    ● Pass No problems found
    ● Fail Expectation did not happen
    ● Error Something unexpected occurred
    Running Tests
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  89. State of the set of tests clearly highlighted by
    a large colourful bar
    Running Tests
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

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

    View Slide

  91. Strings

    View Slide

  92. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  93. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  94. Add a String to your check
    TEST IT

    View Slide

  95. JUnit Methods

    View Slide

  96. Other than @Test, the key ones are:
    @Before
    @After
    @BeforeClass
    @AfterClass
    JUnit Methods
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  97. Other than @Test, the key ones are:
    @Before Method to run before each test
    @After Method to run after each test
    @BeforeClass
    @AfterClass
    JUnit Methods
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  98. Other than @Test, the key ones are:
    @Before Method to run before each test
    @After Method to run after each test
    @BeforeClass
    @AfterClass
    JUnit Methods
    Run Class
    Before commands
    Test A
    After commands
    Before commands
    Test B
    After commands
    End running Class
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  99. Other than @Test, the key ones are:
    @Before Method to run before each test
    @After Method to run after each test
    @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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  100. Other than @Test, the key ones are:
    @Before Method to run before each test
    @After Method to run after each test
    @BeforeClass Method to run once before all tests
    @AfterClass Method to run once after all tests
    JUnit Methods
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  101. Other than @Test, the key ones are:
    @Before Method to run before each test
    @After Method to run after each test
    @BeforeClass Method to run once before all tests
    @AfterClass Method to run once after all tests
    JUnit Methods
    Run Class
    Before Class commands
    Test A
    Test B
    After Class commands
    End running Class
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  102. Other than @Test, the key ones are:
    @Before Method to run before each test
    @After Method to run after each test
    @BeforeClass Method to run once before all tests
    @AfterClass Method to run once after all tests
    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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

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

    View Slide

  104. - 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: Looping, Windows, Page Objects ...
    Jonathan Clarkin | @_jrwc | #KWSQA
    Objectives

    View Slide

  105. Selenium Basics

    View Slide

  106. 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...
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  107. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  108. TEST IT

    View Slide

  109. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  110. TEST IT

    View Slide

  111. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  112. Find the get button and click it
    searchfield.sendKeys( “The Matrix\n” );
    Mission: Fill in Form Fields
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  113. TEST IT

    View Slide

  114. Assert the page title is what we expect
    String title = driver.getTitle();
    assertEquals( title, “The Matrix” );
    Mission: Assert Expectations
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  115. TEST IT

    View Slide

  116. driver.quit();
    Mission: Close the Browser
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  117. TEST IT

    View Slide

  118. ☑ Open a browser
    ☑ Go somewhere nice
    ☑ Fill in form fields
    ☑ Click some things
    ☑ Assert that our expectations match reality
    ☑ Close the browser
    Our mission...
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  119. Jonathan Clarkin | @_jrwc | #KWSQA
    Our mission...

    View Slide

  120. - 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: Looping, Windows, Page Objects ...
    Jonathan Clarkin | @_jrwc | #KWSQA
    Objectives

    View Slide

  121. Browser Tools

    View Slide

  122. The browser dev-tools are your friend to
    finding out how to uniquely identify the
    elements on a web page.
    Dev Tools
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  123. Accessing the Dev Tools
    Exact menu option
    depends on the
    browser
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  124. Element Selector
    Click the
    selector tool
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  125. Element Selector
    Click on an element of
    the page to select it
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  126. With the HTML shown, we can pick how best
    to identify our element:
    id
    class
    xpath
    Finding Ids, Class Names, and more
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

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

    View Slide

  128. - 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: Looping, Windows, Page Objects ...
    Jonathan Clarkin | @_jrwc | #KWSQA
    Objectives

    View Slide

  129. Selectors

    View Slide

  130. There are many ways to grab parts of the web page:
    - Id
    - Class
    - Name
    - Link Text
    - XPath
    Selectors
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide



  131. 321 South St
    123 Main St


    321 North St
    123 West St
    321 South Ave


    Sample DOM
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide



  132. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

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

    View Slide



  134. 321 South St
    123 Main St


    321 North St
    123 West St
    321 South Ave


    driver.findElements(By.className( “human” ));
    Select By Class
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide



  135. 321 South St
    123 Main St


    321 North St
    123 West St
    321 South Ave


    driver.findElements(By.className( “youth” ));
    Select By Class
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

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

    View Slide



  137. 321 South St
    123 Main St


    321 North St
    123 West St
    321 South Ave


    driver.findElements(By.name( “address” ));
    Select By Name
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

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

    View Slide



  139. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  140. 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” ));
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide



  141. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide



  142. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide



  143. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide



  144. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  145. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

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

    View Slide



  147. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  148. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  149. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  150. Least to most brittle selectors
    (likely to be broken as software evolves)
    - Id
    - Class
    - Name
    - Link Text
    - XPath
    Selectors
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  151. - 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: Looping, Windows, Page Objects ...
    Jonathan Clarkin | @_jrwc | #KWSQA
    Objectives

    View Slide

  152. Checking with Asserts

    View Slide

  153. Here is a list of common asserts you can use to
    verify your expectations against the actual
    webpage results
    Asserts
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  154. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  155. TEST IT

    View Slide

  156. Looping

    View Slide

  157. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  158. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  159. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  160. TEST IT

    View Slide

  161. Multiple Windows

    View Slide

  162. Each window has a ‘handle’ to access it
    String currentWindow =
    driver.getWindowHandle();
    Popups - How to Swap Windows
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  163. The driver has a list of all window handles
    driver.getWindowHandles();
    Popups - How to Swap Windows
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  164. We can loop over all window handles and
    change the current window
    for( String handle : driver.getWindowHandles()) {
    driver.switchTo().window( handle );
    }
    Popups - How to Swap Windows
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  165. 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
    }
    Popups - How to Swap Windows
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  166. Once looping is done, it is wise to confirm that
    we are on the desired page
    assertTrue( driver.getTitle().equals( "The Matrix" ) );
    Popups - How to Swap Windows
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  167. Popups - All Together
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  168. TEST IT

    View Slide

  169. Page Objects

    View Slide

  170. A Page Object is pattern used to create more
    maintainable Selenium tests
    Page Objects
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  171. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

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

    View Slide

  173. public class LandingPage {
    // 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
    Jonathan Clarkin | @_jrwc | #KWSQA
    Define selectors for
    each bit of the page

    View Slide

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

    View Slide

  175. Now we have a reusable Page Object !
    Page Objects
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  176. To use it in a test…
    ● import LandingPage;
    ● LandingPage page = new LandingPage( driver );
    ● page.searchFor( “Apple Juice” ); // Use it
    Page Objects
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  177. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  178. TEST IT

    View Slide

  179. Page Factory

    View Slide

  180. PageFactory is a special tool that helps further
    encapsulate Page Object patterns.
    LoginPage page
    = PageFactory.initElements(driver, LoginPage.class);
    PageFactory
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  181. 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  182. Sample PageObject for use with PageFactory:
    PageFactory
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  183. The test case is nearly identical
    PageFactory
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  184. TEST IT

    View Slide

  185. Mobile Automation

    View Slide

  186. What if Selenium WebDriver could drive mobile
    apps as well ?
    Mobile App Automation
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  187. It can with a friend called...
    Mobile App Automation
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  188. Appium is an open source tool that helps
    Selenium WebDriver scripts talk to iOS and
    Android apps
    Mobile App Automation
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  189. Mobile App Automation
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  190. We write our Selenium tests in the same style
    as before, but now they interact with our apps
    Mobile App Automation
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  191. WebDriver driver = new AppiumDriver(
    new URL("http://127.0.0.1:4723/wd/hub"));
    WebElement loginUsername =
    driver.findElements(By.className("UIATextField"));
    loginUsername.sendkeys(“jclarkin”);
    Mobile App Automation
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  192. You choose the level of fidelity:
    - Check against simulated app
    - Check against emulated app
    - Check against physically wired app
    - Robotics !
    Mobile App Automation
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  193. Mobile App Automation
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  194. Mobile App Automation
    Jonathan Clarkin | @_jrwc | #KWSQA
    https://www.youtube.com/watch?v=DShxaaTb_rg

    View Slide

  195. Mobile App Automation
    Jonathan Clarkin | @_jrwc | #KWSQA
    More info at:
    - Appium: appium.io
    - Robots: tapsterbot.com

    View Slide

  196. Review

    View Slide

  197. - 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: Looping, Windows, Page Objects ...
    Review
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  198. - 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
    Jonathan Clarkin | @_jrwc | #KWSQA

    View Slide

  199. 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

  200. View Slide