1. The Zen of UI Test Automation
Rachel Appel

2. 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

3. 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

4. WebDriver Overview Native commands drive browser Multi language
C# Java, Python, etc…
Supports multiple browsers and clients
Fixes issues in selenium 1.0 such as popups and dialogs
2.0 supports old Selenium RC code

5. Getting Started with WebDriver
Selenium WebDriver (part of Selenium 2.0)
Download Drivers
PATH environment
NuGet for Visual Studio

6. Drivers HTML Remote Web Drivers IE Driver Edge Driver Chrome Driver
iOS Driver
FireFox Driver
Safari Driver
Windows Phone Driver
Native drivers
More…

7. Choosing Selenium If you want to…
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

8. Coding Automation Scenarios
Make instance of driver
Use API methods that behave as the user would

9. APIs (
OpenQA.Selenium;
OpenQA.Selenium.<DriverNamespaceName>;
Chrome, IE, FireFox, iOS, etc…
OpenQA.Selenium.Support.UI;

10. IWebElement
IWebElement element = (IWebElement) ((IJavaScriptExecutor)driver).ExecuteScript("return $('.selector')[0]"); IWebElement element = driver.findElement(By.id("elementID"));

11. 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

12. Code the Automation
RemoteWebDriver driver new RemoveWebDriver(); driver.Navigate().GoToUrl(" IWebElement phone = driver.FindElement(By.Id("phone"));

13. Locating Elements Element ID Name attribute XPath statement Link text
Static Elements
Name attribute
XPath statement
Dynamic Elements
Link text
Document Object Model (DOM)

14. Common UI Operations driver.SwitchTo().Window("windowName");
driver.SwitchTo().Frame("frameName");
Alert alert = driver.SwitchTo().Alert();
driver.Navigate().Forward();
driver.Navigate().Back();
Use <a href="somewhere.html" target="windowName">Click here to open a new window</a> the target attrib to get the window Name to use in switchTo()

15. 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

16. 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

17. DEMO
Driver code!

18. Test Automation Framework
If UI element changes, only need to change the test layer
Page Object Pattern Design
object-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
Page Object is a Design Pattern which has become popular in test automation for enhancing test maintenance and reducing code duplication. A page object is an object-oriented class that serves as an interface to a page of your AUT. The tests then use the methods of this page object class whenever they need to interact with the UI of that page. The benefit is that if the UI changes for the page, the tests themselves don’t need to change, only the code within the page object needs to change. Subsequently all changes to support that new UI are located in one place.
The Page Object Design Pattern provides the following advantages
1. There is a clean separation between test code and page specific code such as locators (or their use if you’re using a UI Map) and layout.
2. There is a single repository for the services or operations offered by the page rather than having these services scattered throughout the tests.
In both cases this allows any modifications required due to UI changes to all be made in one place. Useful information on this technique can be found on numerous blogs as this ‘test design pattern’ is becoming widely used. We encourage the reader who wishes to know more to search the internet for blogs on this subject. Many have written on this design pattern and can provide useful tips beyond the scope of this user guide. To get you started, though, we’ll illustrate page objects with a simple example.

19. 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

20. Page Object Pattern UI Test Page Object (framework) Web Page WE B D RV E R
UI Test
Page Object
(framework)
Web Page
Changed Id
Deleted element

21. Page Object Pattern UI Test Page Object (framework) Web Page WE B D RV E R
UI Test
Page Object
(framework)
Web Page
Changed Id
Deleted element

22. Page Object Pattern: Workflow
Register
Enter valid
Enter valid password
Enter matching password
Click submit
Verify user is registered and logged in

23. Data Driven Testing Same tests, different data
database-validation

24. AJAX & waitFor Implicit Explicit
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();
An implicit wait is to tell WebDriver to poll the DOM for a certain amount of time when trying to find an element or elements if they are not immediately available. The default setting is 0. Once set, the implicit wait is set for the life of the WebDriver object instance.
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
driver.manage().window().maximize();

25. Headless Testing Browser simulation Examples
No UI
Functional testing
Examples
HTMLUnitDriver
Node JS
Integrate into CI Server/Automated Builds
PhantomJS

26. Headless Testing
RemoteWebDriver driver = new RemoteWebDriver(new System.Uri(" DesiredCapabilities.Chrome());

27. Headless Testing for .NET
SimpleBrowser
Git Download
NuGet package
Does not support JS
PhantomJS
GhostJS

28. Selenium IDE Tool http://www.seleniumhq.org/projects/ide/
Run and manage scripts
Get button
It is a rapid prototyping tool
Selenium Html Runner

29. Firefox AWE Test Recorder

30. VS Coded UI Tests

31. Visual Studio Coded UI Test Project Type Record and edit actions
C#, VB
Record and edit actions
It generates the code

32. Thank You!