The Zen of UI Test
Automation
Rachel Appel
http://rachelappel.com
http://twitter.com/rachelappel
Agenda
• Intro to Automated UI testing
• Install and configure WebDriver
• WebDriver Drivers
• WebDriver APIs
• Test harness and Running the Tests
• Frameworks
• Other UI Automation Tools/Coded UI in VS
Automated UI Testing/Coded UI Testing
• What is it?
• Why do it?
• What can you test?
• Web
• Native clients
• Anything with a UI
• What to use?
• WebDriver
• Coded UI
• Other
WebDriver Overview
• Native commands drive browser
• Multi language
• C# Java, Python, etc…
• Supports multiple browsers and clients
Getting Started with WebDriver
• Selenium WebDriver (part of Selenium 2.0)
• Download Drivers
• PATH environment
• NuGet for Visual Studio
Drivers
• HTML
• Remote Web Drivers
• IE Driver
• Edge Driver
• Chrome Driver
• iOS Driver
• FireFox Driver
• Safari Driver
• Windows Phone Driver
• Native drivers
• More…
http://www.seleniumhq.org/download/
Choosing Selenium
Selenium WebDriver
Selenium IDE
• If you want to…
• create robust, browser-based
regression automation suites
and tests
• scale and distribute scripts
across many environments
• If you want to…
• create quick bug reproduction
scripts
• create scripts to aid in
automation-aided exploratory
testing
• A rapid prototyping tool
Coding Automation Scenarios
• Make instance of driver
• Use API methods that behave as the user would
APIs
• http://bit.ly/WebDriverAPIDocs
(http://www.seleniumhq.org/docs/03_webdriver.jsp#selenium-webdriver-api-commands-and-operations)
• OpenQA.Selenium;
• OpenQA.Selenium.<DriverNamespaceName>;
• Chrome, IE, FireFox, iOS, etc…
• OpenQA.Selenium.Support.UI;
IWebElement
IWebElement element = (IWebElement)
((IJavaScriptExecutor)driver).ExecuteScript("return $('.selector')[0]");
IWebElement element = driver.findElement(By.id("elementID"));
Example Automation Scenario
• As the user might do it…
•
•
•
•
•
Opens browser
Navigates to form
Enters name and phone, and selects a state and size
Clicks the Submit button
Closes browser
• Consider the UI interactivity you want to test
Code the Automation
RemoteWebDriver driver new RemoveWebDriver();
driver.Navigate().GoToUrl("http://msn.com");
IWebElement phone = driver.FindElement(By.Id("phone"));
Locating Elements
• Element ID
• Static Elements
• Name attribute
• XPath statement
• Dynamic Elements
• Link text
• Document Object Model (DOM)
Common UI Operations
• driver.SwitchTo().Window("windowName");
• driver.SwitchTo().Frame("frameName");
• Alert alert = driver.SwitchTo().Alert();
• driver.Navigate().Forward();
• driver.Navigate().Back();
Test Design Considerations
• Static content test:
• a test for the existence of a static, non-changing, UI element
• Tests for links, headers, footers, privacy policy, semantic tags, SEO, etc…
• Function Tests
• Fill in HTML Forms, e.g., register/login pages, order forms, credit card forms
• Dynamic content test
• a test for the existence of a dynamically added UI element or value
Validating Test Results
• What to do after a test runs?
• Assert
• Test stops and does not run subsequent checks
• Immediate feedback
• Verify
• Tests continue, you must check results from logs
• Time consuming
• Feedback is not immediate
DEMO
• Driver code!
Test Automation Framework
• If UI element changes, only need to change the test layer
• Page Object Pattern Design
• http://docs.seleniumhq.org/docs/06_test_design_considerations.jsp#pageobject-design-pattern
• Represents the pages/screens of your app as objects and encapsulates their
features.
• Allows us to model the UI in our tests.
• An object-oriented class that serves as an interface to a page of your tests
• Setup up w/CI Server
https://code.google.com/p/selenium/wiki/ContinuousIntegration
Why an Automation framework?
• Recorded tests are brittle
• Coded tests with magic strings/hard code are brittle
• Easier to understand for QA folks and designers
Page Object Pattern
UI Test
Page Object
(framework)
W
E
B
D
R
I
V
E
R
Changed Id
Web Page
Deleted
element
Page Object Pattern: Workflow
• Register
•
•
•
•
•
Enter valid email
Enter valid password
Enter matching password
Click submit
Verify user is registered and logged in
Data Driven Testing
• Same tests, different data
• http://docs.seleniumhq.org/docs/06_test_design_considerations.jsp#
database-validation
AJAX & waitFor
• Implicit
driver.Manage().Timeouts().ImplicitlyWait(TimeSpan.FromSeconds(10));
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
• Explicit
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
driver.manage().window().maximize();
Headless Testing
• Browser simulation
• No UI
• Functional testing
• Examples
• HTMLUnitDriver
• Node JS
• Integrate into CI Server/Automated Builds
• PhantomJS
Headless Testing
RemoteWebDriver driver = new RemoteWebDriver(new
System.Uri("http://localhost/HTMLForms"),
DesiredCapabilities.Chrome());
Headless Testing for .NET
• SimpleBrowser
• Git Download
• https://github.com/SimpleBrowserDotNet/SimpleBrowser.WebDriver
• NuGet package
• Does not support JS
• PhantomJS
• GhostJS
Selenium IDE Tool
• http://www.seleniumhq.org/projects/ide/
• Run and manage scripts
• Get button
• It is a rapid prototyping tool
• Selenium Html Runner
Firefox
AWE Test
Recorder
VS Coded UI Tests
Visual Studio
• Coded UI Test Project Type
• C#, VB
• Record and edit actions
• It generates the code
Thank You!