UI Testing Automation

4CreamTec
TEST UI IN A REAL BROWSER
• Execute JavaScript and see ALL errors
• Load all resources (images, CSS)
• Test layouts and CSS properties
• Check colors and fonts
• Verify quirks of each browser type and version
• Is the ONLY way to be sure UI looks and works right

5CreamTec
UI TESTING TOOLS
Frameworks
• Selenium browser automation
through WebDriver API
• QUnit unit testing JavaScript
inside and outside the browser
• CasperJS unit testing JavaScript
inside a headless browser
• GWTTestCase uses invisible
browser to run Java tests
Test Case Example
public class Example {
public static void main(String[] args) {
// Create a new instance of the html unit driver
WebDriver driver = new HtmlUnitDriver();
// And now use this to visit Google
driver.get("http://www.google.com");
// Find the text input element by its name
WebElement element = driver.findElement(By.name("q"));
// Enter something to search for
element.sendKeys("Cheese!");
// Now submit the form
element.submit();
// Verify result
assertTrue(selenium.isTextPresent(“Welcome"));
}
}

6CreamTec
UI TESTING TOOLS
Products
• QuickTestPro feature rich IDE for
functional and regression testing
• Rational Test Workbench
functional, load and regression
testing from IBM
• SilkTest suite of testing products
targeting simplicity
Test Case Example
SystemUtil.Run "IEXPLORE.EXE","www. perfumes.com"
Wait 5
Set myBrowser=Browser("Perfumes-Discount perfume")
If myBrowser.Page("Perfumes-Discount
perfume").Link("Login").Exist(3) Then
Reporter.ReportEvent 0,"Res","Login Link Exists"
Else
Reporter.ReportEvent 1,"Res","Login Link Not Exists"
End If

7CreamTec
HOW ABOUT THE REAL WORLD?

8CreamTec
TESTING IN REAL WORLD

9CreamTec
UI AUTOMATION CHALLENGES
• Requires development skills (HTML/CSS/JavaScript/XPath)
• Requires knowledge of UI internals (id, structure, validation)
• Test creation takes too long
• Tests duplicate app logic
• Tests get out of sync and maintenance is tedious
• Takes too long to deal with UI changes
• Tests development delays releases
• Tools are not productive and too complex

10CreamTec
VISUAL TESTING
• 10x productivity gain compared to traditional testing
• Automation of how you already test instead of learning how to use a tool
• Empower non-technical people to build and maintain tests
• Full access to Selenium API when needed
• Web based shared environment

11CreamTec
GMAIL TEST AUTOMATION

13CreamTec

15CreamTec

16CreamTec

18CreamTec
CONCLUSIONS
• Don’t fall into manual testing trap
• Test business logic with API and unit
tests in native language (JUnit etc)
• Test complex JavaScript logic with
JavaScript unit tests (QUnit/CasperJS)
• Cover production UI with visual tests
(Screenster)

UI Testing Automation

In this document