SlideShare a Scribd company logo
Selenium: Test Automation of
      Web Application
 Weekend Workshop for QA professionals
          Trainer: Dipesh Bhatewara
             Date: 23rd June 2012


                                      trainings@digitalinfobytes.com
Introduction




               trainings@digitalinfobytes.com
                                            2
Why Test Automation




                 trainings@digitalinfobytes.com
                                              3
Advantages of Test Automation
• Frequent and quick regression testing
• Rapid feedback to developers
• Virtually unlimited iterations of test case
  execution
• Support for Agile and extreme development
  methodologies
• Increased test coverage
• Enables QA team to utilize bandwidth in
  exploratory testing.
                                      trainings@digitalinfobytes.com
                                                                   4
When to automate?
• Long projects – regression
• Frequent releases and extreme programming
• Quick feedback to developer – Sanity




                                 trainings@digitalinfobytes.com
                                                              5
Web Testing: Approaches
• GUI Automation
  – locating by coordinates
  – using generic OS mouse/keyboard events
  – suitable for any GUI app
• HTML/DOM Automation
  –   parsing HTML
  –   evaluating HTML elements (forms, input...)
  –   DOM as presentation of application
  –   DOM traversal
  –   interacting with DOM tree (target.dispatchEvent,...)
                                              trainings@digitalinfobytes.com
                                                                           6
Introduction to Selenium
•   Open Source Test Automation Framework
•   Developed by ThoughtWorks and Google
•   Robust set of tools for web-based applications
•   On multiple browsers
•   On multiple Operating Systems
•   Support many languages, including Ruby,
    Python, Java, c# and so on

                                      trainings@digitalinfobytes.com
                                                                   7
Selenium Components
•   Selenium IDE
•   Selenium RC
•   Selenium Grid
•   WebDriver (Selenium 2.0)




                               trainings@digitalinfobytes.com
                                                            8
Selenium IDE
• Firefox plug-in
• Integrated Development Environment for Selenium
  Tests.
• Provides record and playback functionality.
• Provides the ability to debug test scripts.
• Auto complete common selenium commands.
• Export tests in different formats like HTML, Java,
  Ruby, Python and so on.

                                         trainings@digitalinfobytes.com
                                                                      9
Installation
• Download IDE from -
  http://seleniumhq.org/download/
• Add as Add On to Firefox
• Launch it from Tools -> Selenium IDE




                                    trainings@digitalinfobytes.com
                                                                10
IDE explained

          • Record/Play
          • Test Case
          • Test Suite
          • Command -Target –
            Value
          • Export/Import



                 trainings@digitalinfobytes.com
                                             11
DEMO
• Click on Etsy logo and verify title
• Search for Vintage shoe and verify
  first item’s name
• Run as suite

                               trainings@digitalinfobytes.com
                                                           12
Assignment - IDE
•   Etsy.com
•   Navigate to Category – Furniture -> Chair
•   Click on the first item in the result list
•   Verify the item details page is displayed
•   Assert the Price of the product shown on this
    page


                                      trainings@digitalinfobytes.com
                                                                  13
Assignment IDE Test Suite
• Click on Kids section on left, on Kids page click
  on Tweet button, Switch to new window, Sign
  in with wrong username and password to
  twitter and check the Error.
• Click on ‘Accessories’ Category and test the
  pagination functionality
• Save the Test Suite
• Run as Test Suite
                                       trainings@digitalinfobytes.com
                                                                   14
Commonly Used Selenium
                Commands
Action Commands
• Open(Link) – This Command will open the specified page
• click(Locator) – This Command will Click at specified target
• check(Locator) – Toggles the checked value of a checkbox
• type(Locator, value) –Sends text input to an element
• select (Locator, value)– This will select the specified item in a list

Note: most action commands in Selenium IDE also have a duplicate
command with the AndWait suffix. When these are used the action
is performed and a page load is expected and the command will not
complete until the page has loaded or the timeout is reached.



                                                         trainings@digitalinfobytes.com
                                                                                     15
Commonly Used Selenium
               Commands
Store, Check, and Wait
• isElementPreset(locator) – Checks if an element is present on the
   page
• store(expression, variableName) – Allows you to temporarily store
   a value
• verify(pattern) – performs verification and skip execution, if fails.
• assert(pattern) – performs verification and stop execution, if fails.
• waitFor(pattern) – Waits until the value matches the specified
   value or the timeout.

Note: These Commands are heart of Selenium ,as these deal with
verifiacation and validation part. There are variations available in
these commands eg. waitForPageToLoad(), waitForPopUp()

                                                      trainings@digitalinfobytes.com
                                                                                  16
Object Identification
• Using HTML properties of the Object
  – Name
  – Id
  – Class
• Using Xpaths (DOM address)
  – XPath is a language for finding information in an
    XML document


                                         trainings@digitalinfobytes.com
                                                                     17
Xpath Explained




                  trainings@digitalinfobytes.com
                                              18
FireBug installation & DEMO




                     trainings@digitalinfobytes.com
                                                 19
Assignment
• Etsy.com
• Find Unique HTML Ids as well as Xpaths for
  below
  – Regsiter Button
  – Search text box
  – Fashion link
  – 3rd Item in second row on home page


                                      trainings@digitalinfobytes.com
                                                                  20
Handy tool for Xpaths
• Fire Path (Lets use this)
• Xpather




                              trainings@digitalinfobytes.com
                                                          21
OOPS Concepts
•   Objects
•   Classes
•   Data abstraction
•   Inheritance
•   Polymorphism



                              trainings@digitalinfobytes.com
                                                          22
Sample Java Program




                 trainings@digitalinfobytes.com
                                             23
Selenium RC
• A server, written in Java and so available on all
  the platforms.
• Acts as a proxy for web requests from tests.
• Client libraries for many popular languages.
• Bundles Selenium Core and automatically
  loads into the browser


                                      trainings@digitalinfobytes.com
                                                                  24
Selenium RC components
• Selenium Server: launches and kills browsers,
  interprets and runs the Selenese commands
  passed from the test program, and acts as an
  HTTP proxy, intercepting and verifying HTTP
  messages passed between the browser and
  the AUT.
• Client Libraries: provide the interface
  between each programming language and the
  Selenium RC Server.
                                    trainings@digitalinfobytes.com
                                                                25
trainings@digitalinfobytes.com
                            26
Install & Start
• Ensure that JDK is present on the machine and
  is in the class path.
• Downloaded Selenium RC from
  http://seleniumhq.org/download/
• Unzip to any directory on your file system.
• Change directory to the Selenium Server on
  the command line or terminal.
• Start Selenium Server.
                                   trainings@digitalinfobytes.com
                                                               27
Change Directory to Selenium Server




                    Start selenium Server



                                trainings@digitalinfobytes.com
                                                            28
Eclipse and Project setup
• Launch Eclipse
• Create Java project
• Import selenium-client library
• Add JUnit plugin to eclipse
• Export the code of your Selenium IDE
  assignment as Selenium RC Junit4 code
• Add the exported java file to the project and
  run
                                     trainings@digitalinfobytes.com
                                                                 29
Handling different types of elements
              & Demo
•   Text Box
•   List
•   Check Box
•   Radio Buttons




                           trainings@digitalinfobytes.com
                                                       30
Assignment
• Create a fresh project in Eclipse
• Add a test case to register a new user at
  Etsy.com




                                     trainings@digitalinfobytes.com
                                                                 31
More Assignments
• Test User Sign In – Valid & Error
• Test Add To Cart and verify the country can be
  changed on the cart page.
• Run them as suite from Eclipse




                                    trainings@digitalinfobytes.com
                                                                32
End of Day 1




               trainings@digitalinfobytes.com
                                           33
Day 2




        trainings@digitalinfobytes.com
                                    34
History

 2004        2007      2009    2011



Selenium   WebDriver

                          Selenium2



                                  trainings@digitalinfobytes.com
                                                              35
WebDriver
• Is a Self Contained Library
• Uses browser capabilities over injected javascripts
• “Best fit” technology
• Clean & Object Oriented API
• Easy to maintain
• Faster than Selenium 1
• Tightly bound to the browser, no need of Selenium
  Server
• Bindings : Java, C#, Python, Ruby
• Android and iPhone support
                                           trainings@digitalinfobytes.com
                                                                       36
Selenium Server in Selenium2
• Replicate Selenium RC functionalities
• Remote WebDriver
• Selenium Grid 2




                                    trainings@digitalinfobytes.com
                                                                37
WebDriver

WebDriver Interface

          Internet             HTML
Firefox              Chrome             Opera    Andriod       iPhone
          Explorer              Unit
Driver                Driver            Driver    Driver        Driver
           Driver              Driver




                                                     trainings@digitalinfobytes.com
                                                                                 38
“BestFit”s
• Internet Explorer Driver accesses the browser via the COM
  layer using some automation hooks that Microsoft have put
  there and maintain. The core code is written in C++.

• FirefoxDriver is a Firefox addon that accesses items at the
  Chrome layer

• ChromeDriver is a Chrome Extension that allows drive
  Chrome.

• The Android driver is an APK that allows us to drive the
  Web View and the same with iPhone

                                                trainings@digitalinfobytes.com
                                                                            39
WebDriver




            trainings@digitalinfobytes.com
                                        40
Sample Code for Demonstration




                      trainings@digitalinfobytes.com
                                                  41
Let’s setup a project
• Download
• New Project
• Import selenium jar
• Add class imported from IDE (as Junit4
  Webdriver)
• Run the tests



                                    trainings@digitalinfobytes.com
                                                                42
Assignment – Import Class From IDE
             and Run




                         trainings@digitalinfobytes.com
                                                     43
Let’s code
• Add a new test class to test Etsy.com
• Launch the site




                                     trainings@digitalinfobytes.com
                                                                 44
Locator Strategies
• ID
    – webDriver.findElement(By.id("logo"));
• Name
    – webDriver.findElement(By.name("q"));
• Tag Name
    – webDriver.findElement(By.tagName("H1"));
• Class name
    – webDriver.findElements(By.className("sponsor_logos"));
• XPath
    – webDriver.findElement(By.xpath("//section*@id=‘miniconfs’+/a*2+"));
• Link Text
    – webDriver.findElements(By.linkText("About"));
• Partial Link Text
    – webDriver.findElement(By.partialLinkText("visitcanberra"));

                                                           trainings@digitalinfobytes.com
                                                                                       45
Page Interactions
•   webElement.click()
•   webElement.sendKeys(...)
•   webElement.submit()
•   Actions class -> Mouse Events / Drag and Drop




                                     trainings@digitalinfobytes.com
                                                                 46
Demo of Etsy Registration with
           Firefox




                        trainings@digitalinfobytes.com
                                                    47
Assignment




             trainings@digitalinfobytes.com
                                         48
Demo: Run Same Test On Different
           Browser




                        trainings@digitalinfobytes.com
                                                    49
Assignment: Run earlier assignment
       on another browser




                         trainings@digitalinfobytes.com
                                                     50
Pop-up/Alert handling
• Pop up window
  – driver.switchTo().window(windowHan
    dle);
• Alerts
  – alert = driver.switchTo().alert();
  – alert.Accept();
  – alert.Dismiss();


                             trainings@digitalinfobytes.com
                                                         51
Sample Code




              trainings@digitalinfobytes.com
                                          52
Demo
• http://www.blazonry.com/javascript/windows
  .php




                                 trainings@digitalinfobytes.com
                                                             53
Assignment




             trainings@digitalinfobytes.com
                                         54
Additional useful commands
• Polling the DOM for N seconds
   – webDriver.manage().timeouts().implicitlyWai
     t(30, TimeUnit.SECONDS);
• Testing CSS properties
   – webElement.getCssValue(“height”);
• Javascript execution
   – JavascriptExecutor js =
     (JavascriptExecutor) webDriver;
   – Long value = (Long)
     js.executeScript("return window.scrollY");
• Navigation
   – Navigation nav = webDriver.navigate();
   – nav.back(); / nav.forward(); nav.to(“url”);


                                         trainings@digitalinfobytes.com
                                                                     55
Backward Compatibility with
             Selenium 1
Selenium selenium = new
WebDriverBackedSelenium(webDriver,
“http://osdc.com.au”);

selenium.open("http://osdc.com.au");

selenium.click("id=follow_twitter");

selenium.waitForPageToLoad("10000");

WebDriver webDriver =
((WebDriverBackedSelenium)
selenium).getUnderlyingWebDriver();
                                     trainings@digitalinfobytes.com
                                                                 56
Reference Sites
• Xpath
  – http://hedleyproctor.com/2011/05/tutorial-
    writing-xpath-selectors-for-selenium-tests/




                                        trainings@digitalinfobytes.com
                                                                    57

More Related Content

Basic Selenium Training

  • 1. Selenium: Test Automation of Web Application Weekend Workshop for QA professionals Trainer: Dipesh Bhatewara Date: 23rd June 2012 trainings@digitalinfobytes.com
  • 2. Introduction trainings@digitalinfobytes.com 2
  • 3. Why Test Automation trainings@digitalinfobytes.com 3
  • 4. Advantages of Test Automation • Frequent and quick regression testing • Rapid feedback to developers • Virtually unlimited iterations of test case execution • Support for Agile and extreme development methodologies • Increased test coverage • Enables QA team to utilize bandwidth in exploratory testing. trainings@digitalinfobytes.com 4
  • 5. When to automate? • Long projects – regression • Frequent releases and extreme programming • Quick feedback to developer – Sanity trainings@digitalinfobytes.com 5
  • 6. Web Testing: Approaches • GUI Automation – locating by coordinates – using generic OS mouse/keyboard events – suitable for any GUI app • HTML/DOM Automation – parsing HTML – evaluating HTML elements (forms, input...) – DOM as presentation of application – DOM traversal – interacting with DOM tree (target.dispatchEvent,...) trainings@digitalinfobytes.com 6
  • 7. Introduction to Selenium • Open Source Test Automation Framework • Developed by ThoughtWorks and Google • Robust set of tools for web-based applications • On multiple browsers • On multiple Operating Systems • Support many languages, including Ruby, Python, Java, c# and so on trainings@digitalinfobytes.com 7
  • 8. Selenium Components • Selenium IDE • Selenium RC • Selenium Grid • WebDriver (Selenium 2.0) trainings@digitalinfobytes.com 8
  • 9. Selenium IDE • Firefox plug-in • Integrated Development Environment for Selenium Tests. • Provides record and playback functionality. • Provides the ability to debug test scripts. • Auto complete common selenium commands. • Export tests in different formats like HTML, Java, Ruby, Python and so on. trainings@digitalinfobytes.com 9
  • 10. Installation • Download IDE from - http://seleniumhq.org/download/ • Add as Add On to Firefox • Launch it from Tools -> Selenium IDE trainings@digitalinfobytes.com 10
  • 11. IDE explained • Record/Play • Test Case • Test Suite • Command -Target – Value • Export/Import trainings@digitalinfobytes.com 11
  • 12. DEMO • Click on Etsy logo and verify title • Search for Vintage shoe and verify first item’s name • Run as suite trainings@digitalinfobytes.com 12
  • 13. Assignment - IDE • Etsy.com • Navigate to Category – Furniture -> Chair • Click on the first item in the result list • Verify the item details page is displayed • Assert the Price of the product shown on this page trainings@digitalinfobytes.com 13
  • 14. Assignment IDE Test Suite • Click on Kids section on left, on Kids page click on Tweet button, Switch to new window, Sign in with wrong username and password to twitter and check the Error. • Click on ‘Accessories’ Category and test the pagination functionality • Save the Test Suite • Run as Test Suite trainings@digitalinfobytes.com 14
  • 15. Commonly Used Selenium Commands Action Commands • Open(Link) – This Command will open the specified page • click(Locator) – This Command will Click at specified target • check(Locator) – Toggles the checked value of a checkbox • type(Locator, value) –Sends text input to an element • select (Locator, value)– This will select the specified item in a list Note: most action commands in Selenium IDE also have a duplicate command with the AndWait suffix. When these are used the action is performed and a page load is expected and the command will not complete until the page has loaded or the timeout is reached. trainings@digitalinfobytes.com 15
  • 16. Commonly Used Selenium Commands Store, Check, and Wait • isElementPreset(locator) – Checks if an element is present on the page • store(expression, variableName) – Allows you to temporarily store a value • verify(pattern) – performs verification and skip execution, if fails. • assert(pattern) – performs verification and stop execution, if fails. • waitFor(pattern) – Waits until the value matches the specified value or the timeout. Note: These Commands are heart of Selenium ,as these deal with verifiacation and validation part. There are variations available in these commands eg. waitForPageToLoad(), waitForPopUp() trainings@digitalinfobytes.com 16
  • 17. Object Identification • Using HTML properties of the Object – Name – Id – Class • Using Xpaths (DOM address) – XPath is a language for finding information in an XML document trainings@digitalinfobytes.com 17
  • 18. Xpath Explained trainings@digitalinfobytes.com 18
  • 19. FireBug installation & DEMO trainings@digitalinfobytes.com 19
  • 20. Assignment • Etsy.com • Find Unique HTML Ids as well as Xpaths for below – Regsiter Button – Search text box – Fashion link – 3rd Item in second row on home page trainings@digitalinfobytes.com 20
  • 21. Handy tool for Xpaths • Fire Path (Lets use this) • Xpather trainings@digitalinfobytes.com 21
  • 22. OOPS Concepts • Objects • Classes • Data abstraction • Inheritance • Polymorphism trainings@digitalinfobytes.com 22
  • 23. Sample Java Program trainings@digitalinfobytes.com 23
  • 24. Selenium RC • A server, written in Java and so available on all the platforms. • Acts as a proxy for web requests from tests. • Client libraries for many popular languages. • Bundles Selenium Core and automatically loads into the browser trainings@digitalinfobytes.com 24
  • 25. Selenium RC components • Selenium Server: launches and kills browsers, interprets and runs the Selenese commands passed from the test program, and acts as an HTTP proxy, intercepting and verifying HTTP messages passed between the browser and the AUT. • Client Libraries: provide the interface between each programming language and the Selenium RC Server. trainings@digitalinfobytes.com 25
  • 27. Install & Start • Ensure that JDK is present on the machine and is in the class path. • Downloaded Selenium RC from http://seleniumhq.org/download/ • Unzip to any directory on your file system. • Change directory to the Selenium Server on the command line or terminal. • Start Selenium Server. trainings@digitalinfobytes.com 27
  • 28. Change Directory to Selenium Server Start selenium Server trainings@digitalinfobytes.com 28
  • 29. Eclipse and Project setup • Launch Eclipse • Create Java project • Import selenium-client library • Add JUnit plugin to eclipse • Export the code of your Selenium IDE assignment as Selenium RC Junit4 code • Add the exported java file to the project and run trainings@digitalinfobytes.com 29
  • 30. Handling different types of elements & Demo • Text Box • List • Check Box • Radio Buttons trainings@digitalinfobytes.com 30
  • 31. Assignment • Create a fresh project in Eclipse • Add a test case to register a new user at Etsy.com trainings@digitalinfobytes.com 31
  • 32. More Assignments • Test User Sign In – Valid & Error • Test Add To Cart and verify the country can be changed on the cart page. • Run them as suite from Eclipse trainings@digitalinfobytes.com 32
  • 33. End of Day 1 trainings@digitalinfobytes.com 33
  • 34. Day 2 trainings@digitalinfobytes.com 34
  • 35. History 2004 2007 2009 2011 Selenium WebDriver Selenium2 trainings@digitalinfobytes.com 35
  • 36. WebDriver • Is a Self Contained Library • Uses browser capabilities over injected javascripts • “Best fit” technology • Clean & Object Oriented API • Easy to maintain • Faster than Selenium 1 • Tightly bound to the browser, no need of Selenium Server • Bindings : Java, C#, Python, Ruby • Android and iPhone support trainings@digitalinfobytes.com 36
  • 37. Selenium Server in Selenium2 • Replicate Selenium RC functionalities • Remote WebDriver • Selenium Grid 2 trainings@digitalinfobytes.com 37
  • 38. WebDriver WebDriver Interface Internet HTML Firefox Chrome Opera Andriod iPhone Explorer Unit Driver Driver Driver Driver Driver Driver Driver trainings@digitalinfobytes.com 38
  • 39. “BestFit”s • Internet Explorer Driver accesses the browser via the COM layer using some automation hooks that Microsoft have put there and maintain. The core code is written in C++. • FirefoxDriver is a Firefox addon that accesses items at the Chrome layer • ChromeDriver is a Chrome Extension that allows drive Chrome. • The Android driver is an APK that allows us to drive the Web View and the same with iPhone trainings@digitalinfobytes.com 39
  • 40. WebDriver trainings@digitalinfobytes.com 40
  • 41. Sample Code for Demonstration trainings@digitalinfobytes.com 41
  • 42. Let’s setup a project • Download • New Project • Import selenium jar • Add class imported from IDE (as Junit4 Webdriver) • Run the tests trainings@digitalinfobytes.com 42
  • 43. Assignment – Import Class From IDE and Run trainings@digitalinfobytes.com 43
  • 44. Let’s code • Add a new test class to test Etsy.com • Launch the site trainings@digitalinfobytes.com 44
  • 45. Locator Strategies • ID – webDriver.findElement(By.id("logo")); • Name – webDriver.findElement(By.name("q")); • Tag Name – webDriver.findElement(By.tagName("H1")); • Class name – webDriver.findElements(By.className("sponsor_logos")); • XPath – webDriver.findElement(By.xpath("//section*@id=‘miniconfs’+/a*2+")); • Link Text – webDriver.findElements(By.linkText("About")); • Partial Link Text – webDriver.findElement(By.partialLinkText("visitcanberra")); trainings@digitalinfobytes.com 45
  • 46. Page Interactions • webElement.click() • webElement.sendKeys(...) • webElement.submit() • Actions class -> Mouse Events / Drag and Drop trainings@digitalinfobytes.com 46
  • 47. Demo of Etsy Registration with Firefox trainings@digitalinfobytes.com 47
  • 48. Assignment trainings@digitalinfobytes.com 48
  • 49. Demo: Run Same Test On Different Browser trainings@digitalinfobytes.com 49
  • 50. Assignment: Run earlier assignment on another browser trainings@digitalinfobytes.com 50
  • 51. Pop-up/Alert handling • Pop up window – driver.switchTo().window(windowHan dle); • Alerts – alert = driver.switchTo().alert(); – alert.Accept(); – alert.Dismiss(); trainings@digitalinfobytes.com 51
  • 52. Sample Code trainings@digitalinfobytes.com 52
  • 53. Demo • http://www.blazonry.com/javascript/windows .php trainings@digitalinfobytes.com 53
  • 54. Assignment trainings@digitalinfobytes.com 54
  • 55. Additional useful commands • Polling the DOM for N seconds – webDriver.manage().timeouts().implicitlyWai t(30, TimeUnit.SECONDS); • Testing CSS properties – webElement.getCssValue(“height”); • Javascript execution – JavascriptExecutor js = (JavascriptExecutor) webDriver; – Long value = (Long) js.executeScript("return window.scrollY"); • Navigation – Navigation nav = webDriver.navigate(); – nav.back(); / nav.forward(); nav.to(“url”); trainings@digitalinfobytes.com 55
  • 56. Backward Compatibility with Selenium 1 Selenium selenium = new WebDriverBackedSelenium(webDriver, “http://osdc.com.au”); selenium.open("http://osdc.com.au"); selenium.click("id=follow_twitter"); selenium.waitForPageToLoad("10000"); WebDriver webDriver = ((WebDriverBackedSelenium) selenium).getUnderlyingWebDriver(); trainings@digitalinfobytes.com 56
  • 57. Reference Sites • Xpath – http://hedleyproctor.com/2011/05/tutorial- writing-xpath-selectors-for-selenium-tests/ trainings@digitalinfobytes.com 57