![Page 1: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/1.jpg)
Applying Modern Software Development Techniques to
Automating the Web UI
![Page 2: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/2.jpg)
Ultimate Software: Mission Statement
To provide United States and Canadian businesses with 200 or more employees the highest quality, most complete, and well-integrated suite of strategic human resources, payroll, and talent management solutions.
![Page 3: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/3.jpg)
Who we Are
Michael Longin – Ultimate Software
Software Engineer
Certified Scrum MasterProject Lead - SWAT
Christopher Taylor – Ultimate Software
Lead Process Engineer
Software Test Engineer
Certified Scrum Master
![Page 4: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/4.jpg)
Goals For This Session
Attendees will gain a better understanding of how to apply modern software development techniques for UI testing in an effort to create more agile and resilient tests, as well as improve overall quality.
“Automated testing done right is Software Development”– Elfriede Dustin and Marcus Borch @ GTAC 2008
![Page 5: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/5.jpg)
Tools You Will See Today
SWAT– Simple Web Automation Toolkit– C# library for writing tests against a web UI– http://ulti-swat.wikispaces.com/
Fitnesse– Wiki based requirements test tool– www.fitnesse.org
Both are open source and can be used either
together or stand alone
![Page 6: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/6.jpg)
Outline
What is wrong with the record\playback technique
Applying Acceptance Test Driven Design
Refactoring
Pair testing
Comparing new methods to record\playback
![Page 7: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/7.jpg)
Record-Playback Technique Weaknesses
Brittle» Easily broken when features change, even when the feature is
not part of the test
Very hard to update without re-recording Not Agile
» Can only be done when code is complete
Only tests what you record and not what you expect Requires cleanup post recording Time consuming Hard to read and understand
![Page 8: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/8.jpg)
Acceptance Test Driven Design
A way of writing software where the test is written before coding has commenced
Not just for testing below the UI
A passing test demonstrates satisfaction of requirements
Allows both positive and negative test case scenarios
![Page 9: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/9.jpg)
ATDD as part of UI development
Test defines the user experience
Programmers can code the user interface to a prewritten test
Automated tests are written alongside the test cases and coding effort
Turns vertical slicing into completed automation
![Page 10: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/10.jpg)
How to use ATDD with the UI
Starts with well written conditions of satisfaction
Automation script is developed alongside test case creation
Consistent naming standards are key*• txb -> Textbox• btn -> Button• lbl -> Label
*if naming is wrong, can be easily updated
Once test is complete, developer can start running the test against code
Once test runs green, the story is complete
![Page 11: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/11.jpg)
User Story #1 : Login
As a user I want to provide my username and password to login
Conditions of Satisfaction• Login and password boxes are present• Title should read “M&C Life Insurance”• Valid login should lead to homepage
• Example login: ctaylor/password• Homepage should read “Welcome”
![Page 12: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/12.jpg)
User Story #1: Prototype
![Page 13: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/13.jpg)
Applying ATDD continued
Example User Story #1
– Title should read “M&C Life Insurance”• Title means an H2• Text reads: “M&C Life Insurance”
– Login and Password boxes are present• Two text boxes• Login - >txbLogin• Password -> txbPassword• Login button -> btnLogin
![Page 14: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/14.jpg)
Demonstration of Code
14
Conditions of Satisfaction (Test underneath)
-Test Setup (Open the browser and navigate)
|OpenBrowser| |NavigateBrowser|MCInsurance.com|
-Login and password boxes are present
|AssertElementExists|id|txbLogin|INPUT||AssertElementExists|id|txbPassword|INPUT|
![Page 15: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/15.jpg)
Demonstration of Code (continued)
Conditions of Satisfaction (Test underneath)
-Title should read “M&C Life Insurance”
|AssertElementExists|innerHTML| M&C Life Insurance |H2|
-Valid Login should lead to homepage |SetElementAttribute|id|txbLogin|value|ctaylor|INPUT||SetElementAttribute|id|txbPassword|value|password|INPUT||StimulateElement|id|btnLogin|onclick|INPUT||AssertElementExists|Expression|innerHTML:Welcome|H1|
15
![Page 16: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/16.jpg)
Refactoring
Why refactor?– Less time to write automation– Less maintenance – Creates reusable code– Creates a domain specific language
What is refactoring?– For our purposes
• Turn frequently used blocks of code into single line reusable entities
• Use variables to make tests more robust• Creates an easily readable test by using English named
functions
![Page 17: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/17.jpg)
Additional Benefits of Refactoring
Allows tests to be easily updated if core features change• If login changed for example, only one update needed
Allows those beginning to write tests to take advantage of previously created work
Makes tests much easier to read and debug
![Page 18: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/18.jpg)
User Story #2:View My Name
As a user, I want to be welcomed by my name after I login
Conditions of Satisfaction• My first and last name are correct• Title should read “Welcome ‘first name’ ‘last name’”
o Example: “Welcome Chris Taylor”
![Page 19: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/19.jpg)
User Story #2: Prototype
![Page 20: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/20.jpg)
A Test Refactored
Example:|OpenBrowser||NavigateBrowser|MCInsurance.com||SetElementAttribute|id|txbLogin|value|ctaylor|INPUT||SetElementAttribute|id|txbPassword|value|password|INPUT||StimulateElement|id|btnLogin|onclick|INPUT|
|AssertElementExists|Expression|innerHTML:Welcome Chris Taylor|H1|
Becomes:!define userName (ctaylor)!define password (password)!include .Macros.Login
|AssertElementExists|Expression|innerHTML:Welcome Chris Taylor|H1|
Example:
![Page 21: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/21.jpg)
Pair Testing
Benefits rival those of Pair Programming– http://en.wikipedia.org/wiki/Pair_programming#Benefits
• (Yes, we did in fact just site Wikipedia)
Can be very effective for both writing automation and locating missing requirements
Two heads are always better than one
While automating you can also accomplish exploratory testing
Can replace manual testing phase with the creation of automation
![Page 22: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/22.jpg)
Recorded vs New Way (Recorded)
22
|OpenBrowser||NavigateBrowser|http://localhost/codecampwebsite||AssertElementExists|expression|innerHTML:M&.C Life Insurance|H1||StimulateElement|Expression|innerHtml:.INPUT id=ctl00_ContentPlaceHolder1_login_textBoxLogin name=ctl00.ContentPlaceHolder1.login.textBoxLogin.|onclick|TD||StimulateElement|Expression|innerHtml:.TABLE.[\r]+[\n]+.TBODY.[\r]+[\n]+.TR.[\r]+[\n]+.TD.User Name..TD.[\r]+[\n]+.TD..INPUT id=ctl00_ContentPlaceHolder1_login_textBoxLogin name=ctl00.ContentPlaceHolder1.login.textBoxLogin...TD...TR.[\r]+[\n]+.TR.[\r]+[\n]+.TD.Password..TD.[\r]+[\n]+.TD..INPUT id=ctl00_ContentPlaceHolder1_login_txbPassword type=password value="" name=ctl00.ContentPlaceHolder1.login.txbPassword...TD...TR.[\r]+[\n]+.TR.[\r]+[\n]+.TD align=middle colSpan=2..INPUT id=ctl00_ContentPlaceHolder1_login_btnLogin type=submit value=Login name=ctl00.ContentPlaceHolder1.login.btnLogin. ..TD...TR...TBODY...TABLE.|onclick|DIV||SetElementAttribute|id|ctl00_ContentPlaceHolder1_login_textBoxLogin|Value|ctaylor|INPUT||SetElementAttribute|id|ctl00_ContentPlaceHolder1_login_txbPassword|Value|password|INPUT||StimulateElement|Expression|id:ctl00_ContentPlaceHolder1_login_btnLogin|onclick|INPUT||AssertElementExists|expression|innerHTML:Welcome Chris Taylor|H2|
![Page 23: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/23.jpg)
Recorded vs New Way (New way)
!define userName (ctaylor)
!define password (password)
!include .Macros.Login
|AssertElementExists|Expression|innerHTML:Welcome Chris Taylor|H1|
Login Macro
|OpenBrowser|
|NavigateBrowser|http://localhost/codecampwebsite|
|SetElementAttribute|id|txbLogin|Value|${userName}|INPUT|
|SetElementAttribute|id|txbPassword|Value|${password}|INPUT|
|StimulateElement|Expression|id:btnLogin|onclick|INPUT|
![Page 24: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/24.jpg)
Recorded vs New Way (An Example)
Recorded• Unreadable• Unorganized• Not useable as documentation (concept of testable
documentation)
New way• Easily readable• Robust• Testable documentation
![Page 25: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/25.jpg)
Where to Get Help
Questions– SWAT:
• http://sourceforge.net/forum/?group_id=199701 – Fitnesse:
• http://tech.groups.yahoo.com/group/fitnesse/?v=1&t=search&ch=web&pub=groups&sec=group&slk=2
– Email• [email protected]• [email protected]
– Blogs• devXero.wordpress.com• www.agile-tester.com
Websites– http://www.fitnesse.org/– http://ulti-swat.wikispaces.com/
![Page 26: Applying Modern Software Development Techniques to Automating the Web UI](https://reader035.vdocuments.site/reader035/viewer/2022062417/551ad9b155034656628b6518/html5/thumbnails/26.jpg)
Questions