Selenium digitalinfobytes-120829005812-phpapp02

57
[email protected] Selenium: Test Automation of Web Application Weekend Workshop for QA professionals Trainer: Dipesh Bhatewara Date: 23 rd June 2012

Transcript of Selenium digitalinfobytes-120829005812-phpapp02

Page 1: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

Selenium: Test Automation of Web Application

Weekend Workshop for QA professionals

Trainer: Dipesh BhatewaraDate: 23rd June 2012

Page 2: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

2

Introduction

Page 3: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

3

Why Test Automation

Page 4: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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.

Page 5: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

5

When to automate?

• Long projects – regression• Frequent releases and extreme programming• Quick feedback to developer – Sanity

Page 6: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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,...)

Page 7: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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

Page 8: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

8

Selenium Components

• Selenium IDE• Selenium RC• Selenium Grid• WebDriver (Selenium 2.0)

Page 9: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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.

Page 10: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

10

Installation

• Download IDE from - http://seleniumhq.org/download/

• Add as Add On to Firefox• Launch it from Tools -> Selenium IDE

Page 11: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

11

IDE explained

• Record/Play• Test Case• Test Suite• Command -Target –

Value• Export/Import

Page 12: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

12

DEMO

• Click on Etsy logo and verify title• Search for Vintage shoe and verify

first item’s name• Run as suite

Page 13: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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

Page 14: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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

Page 15: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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.

Page 16: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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()

Page 17: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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

Page 18: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

18

Xpath Explained

Page 19: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

19

FireBug installation & DEMO

Page 20: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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

Page 21: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

21

Handy tool for Xpaths

• Fire Path (Lets use this)• Xpather

Page 22: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

22

OOPS Concepts

• Objects• Classes• Data abstraction• Inheritance• Polymorphism

Page 23: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

23

Sample Java Program

Page 24: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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

Page 25: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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.

Page 27: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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.

Page 28: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

28

Change Directory to Selenium Server

Start selenium Server

Page 29: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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

Page 30: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

30

Handling different types of elements & Demo

• Text Box• List• Check Box• Radio Buttons

Page 31: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

31

Assignment

• Create a fresh project in Eclipse• Add a test case to register a new user at

Etsy.com

Page 32: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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

Page 33: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

33

End of Day 1

Page 34: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

34

Day 2

Page 35: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

35

History

2004 2007 2009 2011

Selenium WebDriver

Selenium2

Page 36: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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

Page 37: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

37

Selenium Server in Selenium2

• Replicate Selenium RC functionalities • Remote WebDriver• Selenium Grid 2

Page 38: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

38

WebDriver

WebDriver Interface

Firefox

Driver

Internet Explorer Driver

Chrome

Driver

HTML Unit

Driver

Opera Driver

Andriod

Driver

iPhone

Driver

Page 39: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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

Page 40: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

40

WebDriver

Page 41: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

41

Sample Code for Demonstration

Page 42: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

42

Let’s setup a project

• Download • New Project• Import selenium jar• Add class imported from IDE (as Junit4

Webdriver)• Run the tests

Page 43: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

43

Assignment – Import Class From IDE and Run

Page 44: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

44

Let’s code

• Add a new test class to test Etsy.com• Launch the site

Page 45: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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"));

Page 46: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

46

Page Interactions

• webElement.click() • webElement.sendKeys(...) • webElement.submit() • Actions class -> Mouse Events / Drag and Drop

Page 47: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

47

Demo of Etsy Registration with Firefox

Page 48: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

48

Assignment

Page 49: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

49

Demo: Run Same Test On Different Browser

Page 50: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

50

Assignment: Run earlier assignment on another browser

Page 51: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

51

Pop-up/Alert handling

• Pop up window– driver.switchTo().window(windowHandle);

• Alerts– alert = driver.switchTo().alert();– alert.Accept();– alert.Dismiss();

Page 52: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

52

Sample Code

Page 54: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

54

Assignment

Page 55: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

55

Additional useful commands• Polling the DOM for N seconds

– webDriver.manage().timeouts().implicitlyWait(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”);

Page 56: Selenium digitalinfobytes-120829005812-phpapp02

[email protected]

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();