Home >Software >TestNet 2016 - Improving Your Selenium WebDriver Tests

TestNet 2016 - Improving Your Selenium WebDriver Tests

Date post:26-Jan-2017
Category:
View:128 times
Download:3 times
Share this document with a friend
Transcript:

Introductie Informatie Beveiliging

Improving Your Selenium WebDriver TestsRoy de KleijnTechnical Test ConsultantEmail: [email protected]: @TheWebTesterWebsite: http://www.rdekleijn.nlGithub: https://github.com/roydekleijn

2016 The Future Group - http://bit.ly/2eDaWio

Selenium WebDriver is a popular tool for driving the browsers for test automation. Many companies with browser-based applications have taken steps towards including Selenium WebDriver in their repertoire. Theres also a lot of reports on challenges: brittleness of tests with tests passing and failing randomly, trouble with maintenance as the test suites get bigger and difficulties working with Angular or Ajax enriched applications. If you cant trust your tests, maintaining them takes a lot of time or your application feels to disagree with being easy to test, your tests might not be adding value.In this workshop, we focus on Selenium WebDriver tests as code, and look into practices to overcome these common problems. We start with existing tests on an open source application, and we change them through refactoring to improve them. Join this session to improve your ability to create more maintainable and valuable tests with Selenium WebDriver.

1

Question #1What makes your Selenium WebDriver tests suck? 2016 The Future Group - http://bit.ly/2eDaWio

Let me start with a question..

2

Answer #1Depending on third-party dataSynchronization issuesCross-browser issuesHard to locate elementstestdataSlow feedback cycleFlaky testsHigh maintenance costs 2016 The Future Group - http://bit.ly/2eDaWio

In this workshop we are going to cover some of these topics

- Some of these answers are highly related to each other and can be resolved in one go..3

Lack of confidenceResults in 2016 The Future Group - http://bit.ly/2eDaWio

Contents19:00 - 20:00 Part 1IntroductionElement locator tips & tricksSpeed-up and stabilize your tests (demo)Implementing the Page Object ModelUtilize Data ObjectsHandle synchronization20:00 - 20:15 Coffee 20:15 - 21:15 Part 2Handle synchronizationPlay with objectsWhat we have learned

We will start with an actual Page Object Model implementation today

2016 The Future Group - http://bit.ly/2eDaWio

5

Maintenance testMaintenance effortTime

Start with record and playbackConvert recorded tests into codeAwesome, it works! Lets create more UI testsReality: code ends up into unmaintainable spaghettiDesign patterns appliedImplement features to make tests robustwish 2016 The Future Group - http://bit.ly/2eDaWio

Some time ago I have drawn a graph of how a project evolves over time.6

Testing Pyramid

unitUIAPI

feedback-cycleExtremely fastSmallest units of the application / isolates failureExecuted during build timeNo dependency on data

Extremely slowRequires running applicationWill change frequentlyDependency on data

FastCovering boundary conditionsStart early in SD process Requires running application(some) dependency on data 2016 The Future Group - http://bit.ly/2eDaWio

Mock External InterfacesapplicationInterface 1Interface 2Interface 3

applicationInterface 1Interface 2Interface 3mock

2016 The Future Group - http://bit.ly/2eDaWio

Contents19:00 - 20:00 Part 1IntroductionElement locator tips & tricksSpeed-up and stabilize your tests (demo)Implementing the Page Object ModelUtilize Data Objects20:00 - 20:15 Coffee 20:15 - 21:15 Part 2Handle synchronizationPlay with objectsWhat we have learned

We will start with an actual Page Object Model implementation today

2016 The Future Group - http://bit.ly/2eDaWio

9

Question #2What is wrong with these locators?

#1.//*[@id='wx-header-wrap']/div/div/div/div[2]/div[2]/div/section/div/form/input

#2.//*[@id='gnav-header-inner']/div/ul/li[2]/a 2016 The Future Group - http://bit.ly/2eDaWio

Answer #2

They contain too much information about the location 2016 The Future Group - http://bit.ly/2eDaWio

Closer look #1

2016 The Future Group - http://bit.ly/2eDaWio

Closer look #1.//*[@id='wx-header-wrap']/div/div/div/div[2]/div[2]/div/section/div/form/input

What if the location of this element will change over time?

It can be written like this: input[class = input--search]Orinput.inputsearchOrinput[name = search] 2016 The Future Group - http://bit.ly/2eDaWio

Closer look #2

2016 The Future Group - http://bit.ly/2eDaWio

Closer look #2.//*[@id='gnav-header-inner']/div/ul/li[2]/a

What if the order of the links will change over time ?

It can be written like this: a[id=register]Ora#register

2016 The Future Group - http://bit.ly/2eDaWio

Attribute selectorscssxpathEqualse[a=v]//e[@a=v]Containse[a*=v]//e[contains(@a, v)]Starts-withe[a^=v]//e[starts-with(@a, v)]

Ends-withe[a$=v]//e[ends-with(@a, v)]

2016 The Future Group - http://bit.ly/2eDaWio

Tip: only use Xpath

If you need to walk up the DOM

Demofile://localhost/Users/roydekleijn/Documents/whenXpath.html 2016 The Future Group - http://bit.ly/2eDaWio

AngularJS - elementsDifferent way of locating elementsBindingModelRepeatngWebDriver library (create by Paul Hammant)https://github.com/paul-hammant/ngWebDriverLogic from Protractor project 2016 The Future Group - http://bit.ly/2eDaWio

Enable debug infoCall angular.reloadWithDebugInfo(); in your browser debug console

Execute the following snippet to reveal all the elements:

2016 The Future Group - http://bit.ly/2eDaWio

Contents19:00 - 20:00 Part 1IntroductionElement locator tips & tricksSpeed-up and stabilize your tests (demo)Implementing the Page Object ModelUtilize Data Objects20:00 - 20:15 Coffee 20:15 - 21:15 Part 2Handle synchronizationPlay with objectsWhat we have learned

We will start with an actual Page Object Model implementation today

2016 The Future Group - http://bit.ly/2eDaWio

20

Speed-up and stabilize your tests Windows 7IEFFChromeWindows vistaIEFFUbuntuFFOpera Mac OSFFChromeOperaNodesHubSpecificationHUBTest Scripts 2016 The Future Group - http://bit.ly/2eDaWio

Why we do this ??

To speed up testing, to be able to run more tests in parallel

We need to do this carefully, because data can change the state of the application and will influence other tests21

Docker SeleniumDisposable Selenium Grid (in seconds)Autoscaling features

https://hub.docker.com/r/selenium/

2016 The Future Group - http://bit.ly/2eDaWio

Docker-composeseleniumhub: image: selenium/hub ports: - 4444:4444firefoxnode: image: selenium/node-firefox environment: SCREEN_WIDTH: 2880 SCREEN_HEIGHT: 1800 ports: - 5900 links: - seleniumhub:hubchromenode: image: selenium/node-chrome environment: SCREEN_WIDTH: 2880 SCREEN_HEIGHT: 1800 ports: - 5900 links: - seleniumhub:hub 2016 The Future Group - http://bit.ly/2eDaWio

Docker commandsStart containers:docker-compose up d-d: Run containers in the background--force-recreate: Recreate containers entirely

IP of docker engine:docker-machine ip

Autoscaling:docker-compose scale firefoxnode=5 chromenode=1 2016 The Future Group - http://bit.ly/2eDaWio

In practiceImplement or extend the Page Object Model

Websiteurl: http://demo.technisch-testen.nl

SourceGithub: https://github.com/roydekleijn/webdriver-workshop 2016 The Future Group - http://bit.ly/2eDaWio

Contents19:00 - 20:00 Part 1IntroductionElement locator tips & tricksSpeed-up and stabilize your tests (demo)Implementing the Page Object ModelUtilize Data Objects20:00 - 20:15 Coffee 20:15 - 21:15 Part 2Handle synchronizationPlay with objectsWhat we have learned

We will start with an actual Page Object Model implementation today

2016 The Future Group - http://bit.ly/2eDaWio

26

Problems that ariseUnmaintainableUnreadable test scriptsCreation of test scripts is time consumingCode duplication

2016 The Future Group - http://bit.ly/2eDaWio

Tests bevatten veel driver specieke syntax, waardoor je onleesbare scripts krijgt.

Het maken van scripts duurt vrij lang en wordt als lastig ervaren27

From problem to solution

2016 The Future Group - http://bit.ly/2eDaWio

SolutionEach page contains only a part of the total functionality available on the website

Put page specific functionality in a class with a corresponding name

2016 The Future Group - http://bit.ly/2eDaWio

Step-by-step planIdentify necessary WebElementsCreate a classDefine WebElements in corresponding classesModel the functionality of a page into methodsModel the page flow by setting returntypes 2016 The Future Group - http://bit.ly/2eDaWio

Hoe kom je nu tot deze oplossing. Ik heb een 4 stappenplan bedacht om tot een werkbare abstractie te komen. In sommige gevallen kan het wenselijk zijn om voor een hoger abstractie niveau te kiezen. (als bijvoorbeeld veel functionaliteit op de website hetzelfde is en de paginas erg op elkaar lijken). Je kan dan parent classes maken en deze laten erfen.

OF

Maken van veel voorkomende componenten en deze gebruiken op de specifieke paginas.30

Identify necessary WebElements

2016 The Future Group - http://bit.ly/2eDaWio

Voorbeeld van een loginscript van Wehkamp.nl31

Create a classA class with the name of the page extending from LoadableComponent

public class HomePage extends LoadableComponent { private WebDriver driver; public HomePage(WebDriver driver) { this.driver = driver; PageFactory.initElements(driver, this); } 2016 The Future Group - http://bit.ly/2eDaWio

Define WebElementsOn class level (above the methods)

@FindBy(css = "a.login")private WebElement loginLink; 2016 The Future Group - http://bit.ly/2eDaWio

Zoals we eerder hebben gezien kunnen we webelementen benaderen aan de hand van een locator. Het is aan te raden om deze 1x boven in de class te definieren.

De logische naam (tweede regel) kun je dan gebruiken in alle onderliggende methodes.

Dit bevorderd de onderhoudbaarheid, omdat je de naam van de locator maar op 1 plek hoeft aan te passen bij een wijziging.33

Model the functionality

public LoginPage clickOnLoginLink() { loginLink.click(); return new LoginPage(driver); } 2016 The Future Group - http://bit.ly/2eDaWio

Het idee is om methoded te maken die de functionaliteit van de pagine representeren.

Er kan voor gekozen worden om meerdere acties te groeperen in 1 functie. Dit hangt samen met het soort test cases dat gemaakt gaat worden.34

Model the page flowPrerequisite:Multiple pages are modelled

Modify returntypeThe returntype is the name of the page (class) where you are navigating towardsUse the current class name, if you stay on the same page 2016 The Future Group - http://bit.ly/2eDaWio

Zie vorige sheet.35

Model the page flow

public LoginPage clickOnLoginLink() { loginLink.click(); return new LoginPage(driver); }Returning page 2016 The Future Group - http://bit.ly/2eDaWio

Contents19:00 - 20:00 Part 1IntroductionElement locator tips & tricksSpeed-up and stabilize your tests (demo)Implementing the Page Object ModelUtilize Data Objects20:00 - 20:15 Coffee 20:15 - 21:15 Part 2Handle synchronizationPlay with objectsWhat we have learned

We will start with an actual Page Object Model implementation today

2016 The Future Group - http://bit.ly/2eDaWio

37

Data Objects final CustomerAccount account = new CustomerAccount.CustomerAccountBuilder("[email protected]","1qazxsw2").build();

Access data:account.getEmail()account.getPassword() 2016 The Future Group - http://bit.ly/2eDaWio

Data Objects - Complex final Order order = new Order.OrderBuilder()//.withInvoiceAddress(new Address.AddressBuilder("abc street", "1234ab").build())//.withShippingAddress(new Address.AddressBuilder("shipstreet, "4321ab").withCountry("The Netherlands").build())//.build();

// Retrieve data from the objectSystem.out.println(order.getInvoiceAddress().getStreet());

System.out.println(order.getShippingAddress().getCountry()); 2016 The Future Group - http://bit.ly/2eDaWio

Contents19:00 - 20:00 Part 1IntroductionElement locator tips & tricksSpeed-up and stabilize your tests (demo)Implementing the Page Object ModelUtilize Data Objects20:00 - 20:15 Coffee 20:15 - 21:15 Part 2Handle synchronizationPlay with objectsWhat we have learned

We will start with an actual Page Object Model implementation today

2016 The Future Group - http://bit.ly/2eDaWio

40

Synchronization issuesBrowser has to startPage has to loadAJAX request need to be finishedOr, loader should be gone before we can continue 2016 The Future Group - http://bit.ly/2eDaWio

What NOT to do NEVER, use Thread.sleep();

It will probably make your test unnecessary slowYou never know if you wait exactly long enough 2016 The Future Group - http://bit.ly/2eDaWio

What to doWebDriver build in wait mechanismsimplicitlyWait: poll till element is presentIs not inline with fail-fast principlesetScriptTimeout: time to wait for an asynchronous script to finishpageLoadTimeout: time to wait for a page load to complete

ngWebDriverwaitForAngularRequestsToFinish wait for outstanding angular requests

Custom (gist)checkPendingRequests wait for all HTTP requests to be finished 2016 The Future Group - http://bit.ly/2eDaWio

Example 1Wait for element to be clickable

@Testpublic void waitForElementToBeClickable() {new WebDriverWait(driver, 20,100) //.until(ExpectedConditions.elementToBeClickable(By.cssSelector("a.login")));} 2016 The Future Group - http://bit.ly/2eDaWio

Example 2Wait for loader to be invisible

@Testpublic void waitForElementNotToBeVisable() {new WebDriverWait(driver, 20, 100) //.until(ExpectedConditions.invisibilityOfElementLocated( By.cssSelector("loader")));} 2016 The Future Group - http://bit.ly/2eDaWio

Contents19:00 - 20:00 Part 1IntroductionElement locator tips & tricksSpeed-up and stabilize your tests (demo)Implementing the Page Object ModelUtilize Data Objects20:00 - 20:15 Coffee 20:15 - 21:15 Part 2Handle synchronizationPlay with objectsWhat we have learned

We will start with an actual Page Object Model implementation today

2016 The Future Group - http://bit.ly/2eDaWio

46

Play with ObjectsDownload sources from: https://github.com/roydekleijn/webdriver-workshop Orhttp://bit.ly/2eDaWio

Website under test: http://demo.rdekleijn.nl

Create Register test (model is in place)Implement Search test (model not in place)Implement Order test (if there is time left..) 2016 The Future Group - http://bit.ly/2eDaWio

47

Contents19:00 - 20:00 Part 1IntroductionElement locator tips & tricksSpeed-up and stabilize your tests (demo)Implementing the Page Object ModelUtilize Data Objects20:00 - 20:15 Coffee 20:15 - 21:15 Part 2Handle synchronizationPlay with objectsWhat we have learned

We will start with an actual Page Object Model implementation today

2016 The Future Group - http://bit.ly/2eDaWio

48

What we have learned todayDepending on third-party dataCross-browser issuesHard to locate elementstestdataSlow feedback cycleFlaky testsHigh maintenance costsSynchronization issuesAvoid Thread.sleep() or other hardcoded waitsUtilize Page Object Modelid > name > css > xpath > angularMock interfacesRun tests in parallelMock interfacesMock interfaces, setup clean environments, implement page object model 2016 The Future Group - http://bit.ly/2eDaWio

Thank youRoy de KleijnTechnical Test ConsultantEmail: [email protected]: @TheWebTesterWebsite: http://www.rdekleijn.nlGithub: https://github.com/roydekleijn 2016 The Future Group - http://bit.ly/2eDaWio

Selenium WebDriver is a popular tool for driving the browsers for test automation. Many companies with browser-based applications have taken steps towards including Selenium WebDriver in their repertoire. Theres also a lot of reports on challenges: brittleness of tests with tests passing and failing randomly, trouble with maintenance as the test suites get bigger and difficulties working with Angular or Ajax enriched applications. If you cant trust your tests, maintaining them takes a lot of time or your application feels to disagree with being easy to test, your tests might not be adding value.In this workshop, we focus on Selenium WebDriver tests as code, and look into practices to overcome these common problems. We start with existing tests on an open source application, and we change them through refactoring to improve them. Join this session to improve your ability to create more maintainable and valuable tests with Selenium WebDriver.

50

of 49/49
Improving Your Selenium WebDriver Tests Roy de Kleijn Technical Test Consultant Email: [email protected] Twitter: @TheWebTester Website: http://www.rdekleijn.nl Github: https:// github.com/roydekleijn © 2016 The Future Group - http://bit.ly/2eDaWio
Embed Size (px)
Recommended