automated web ui testing on steroids - sdm...
TRANSCRIPT
![Page 1: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/1.jpg)
Automated Web UI Testing on Steroids
Angel Todorov
www.infragistics.com www.istabg.org
![Page 2: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/2.jpg)
www.infragistics.com www.istabg.org
About Infragistics
Worldwide leader in user experience controls
and components targeting jQuery & HTML5,
Windows Forms, Windows Phone, ASP.NET,
Silverlight, WPF, SharePoint, iOS, Android,
Windows UI
Focus on high performance
scenarios for line of business
and data visualizations
![Page 3: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/3.jpg)
Contents
• Background & Motivation
• Good Tests
• Improving JavaScript unit
testing
• Improving scenario testing
• Other Behavior-Driven
Development applications
www.infragistics.com www.istabg.org
![Page 4: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/4.jpg)
Background & Motivation
• Execute all unit tests as part of every CI build
• Execute all integration scenarios as part of every
nightly build
• Be able to quickly automate submitted bugs
• Limit misunderstanding between groups and promote
collaboration – everyone contributes to testing
www.infragistics.com www.istabg.org
Run tests before check-in – only the
feature
Run tests on CI build trigger – single browser
Run all tests on a nightly build trigger
– all browsers
No single solution !
![Page 5: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/5.jpg)
What makes a good test?
• Easy to write
• Very fast to execute – avg. couple of seconds
• Reliable
• Customer-focused
• Valuable (effective)
• Maintainable
• Part of CI
www.infragistics.com www.istabg.org
![Page 6: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/6.jpg)
JavaScript unit testing
• QUnit
• PhantomJS/Awesomium & custom runner script
• Integrates nicely with CI builds
• No interference on the developer machine
• Headless = layout engine + JavaScript engine
www.infragistics.com www.istabg.org
![Page 7: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/7.jpg)
Scenario testing: Common challenges
• Test Beds take a long time to create
• Achieving good reuse of test code is not
straightforward (copy / paste)
• Hard to investigate / debug failing tests
Wait a sec…
Writing tests
should be
fun !
www.infragistics.com www.istabg.org
![Page 8: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/8.jpg)
Scenario testing: Common challenges – Cont’d
• Different documents not always in sync & up to date
(test code, test plans, etc.)
• Gap between stakeholders & engineers
• Tests are hard to understand and validate by non-
engineers (designers, user experience guys)
www.infragistics.com www.istabg.org
![Page 9: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/9.jpg)
Cucumber & BDD
• Behavior driven-development: specialized version of
Test-Driven-Development
• Cucumber: A Ruby tool for running automated
acceptance tests written in a BDD style
• Various implementations for other platforms –
example: SpecFlow (.NET)
• Scenarios grouped in feature files in the Gherkin
format:
Given / When / Then Steps describe a scenario
www.infragistics.com www.istabg.org
![Page 10: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/10.jpg)
Cucumber & BDD – example
www.infragistics.com www.istabg.org
![Page 11: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/11.jpg)
…Which maps to:
www.infragistics.com www.istabg.org
![Page 12: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/12.jpg)
Cucumber & BDD – analyze results (demo)
www.infragistics.com www.istabg.org
![Page 13: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/13.jpg)
IG BDD Test Framework
• Ability to generate test beds (HTML & MVC) based
on Given’s
• Out of the box reuse – every step is independent
• Built-in Visual Studio Intellisense:
www.infragistics.com www.istabg.org
![Page 14: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/14.jpg)
IG BDD Test Framework – Cont’d
• Feature files => Actual test plan
• Easy for PMs and UX to follow the interactions,
expressed in Gherkin
• Tags and templates bring a lot of semantics (Demo)
www.infragistics.com www.istabg.org
![Page 15: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/15.jpg)
IG BDD Test Framework – Cont’d
Test project (component under test)
e.g. Grid Column Moving
IG BDD Test Framework
.feature files
written in Gherkin
(Step Definition
implementations,
templates, tags &
scenario lifecycle
management)
SpecFlow.NET / MSTest / Selenium
WebDriver API
Low-level APIs for
verifications, Assertions,
test-running & reporting
www.infragistics.com www.istabg.org
![Page 16: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/16.jpg)
Other Applications of BDD
• Puppet setup:
1 Master, 1 slave running CentOS on Oracle VirtualBox
@generate-puppet-manifest
Scenario: Ensure Apache is provisioned on nodes
Given I enable Apache in the main manifest
When I update my puppet slave nodes
When Changes take effect
Then Apache should be running on my slave nodes
on port 80
www.infragistics.com www.istabg.org
![Page 17: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/17.jpg)
Resources
• Selenium Web Driver:
http://seleniumhq.org/docs/03_webdriver.html
• Cucumber: http://cukes.info/
• SpecFlow: http://www.specflow.org/specflownew/
• GhostDriver: https://github.com/detro/ghostdriver
• PhantomJS: http://phantomjs.org
• Qunit: http://qunitjs.com/
• Awesomium: http://awesomium.net/
• Puppet: http://puppetlabs.com/
www.infragistics.com www.istabg.org
![Page 19: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/19.jpg)
Thank you!
www.infragistics.com www.istabg.org
![Page 20: Automated Web UI Testing on Steroids - sdm …sdm-marketing.com/istabg/wp-content/uploads/2012/12/Automated-We… · Automated Web UI Testing on Steroids Angel Todorov](https://reader030.vdocuments.mx/reader030/viewer/2022020204/5aacacdf7f8b9a693f8d6001/html5/thumbnails/20.jpg)
Q & A
www.infragistics.com www.istabg.org