UI testing tools like Selenium allow testing user interfaces in real browsers to ensure proper rendering. Traditional UI testing requires development skills and test maintenance is tedious. Visual testing tools provide higher productivity by automating tests visually without code. Visual tests can be used to test complex applications like Gmail by recording user flows and validating page elements and differences. Visual testing empowers non-technical users and complements unit and API tests.

1. UI Testing Automation

2. 2CreamTec
DO BUGS HURT?

3. 3CreamTec
WHERE TO TEST?

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

5. 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"));
}
}

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

7. 7CreamTec
HOW ABOUT THE REAL WORLD?

8. 8CreamTec
TESTING IN REAL WORLD

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

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

11. 11CreamTec
GMAIL TEST AUTOMATION

12. 12CreamTec
VISUAL TESTING

13. 13CreamTec
GMAIL TEST AUTOMATION

14. 14CreamTec
WHAT CHANGED?

15. 15CreamTec
GMAIL TEST AUTOMATION

16. 16CreamTec
GMAIL TEST AUTOMATION

17. 17CreamTec
VISUAL DIFF

18. 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)