Automated UI Testing

16,187 views
16,441 views

Published on

Presentation from Ukranian Testing Days conference (August 2012) about techniques and approaches in UI testing automation.

Published in: Technology, Design
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
16,187
On SlideShare
0
From Embeds
0
Number of Embeds
8,943
Actions
Shares
0
Downloads
0
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Automated UI Testing

  1. 1. Automated Web UI Testing Mikalai Alimenkou http://xpinjection.com @xpinjection
  2. 2. Do you need UI testing?
  3. 3. Ugly design = baduser experience
  4. 4. Some sites can lose money
  5. 5. Think about design asnon-functional requirement
  6. 6. May be just do it manually?Large number Many of pages browsers
  7. 7. Not all layout bugs are so visible
  8. 8. Navigation through all pages is very useful for all types of testingNAVIGATION TESTS WITHWEBDRIVER
  9. 9. Why WebDriver?• Works with many browsers• Can handle window size and browser settings• Clear and simple API• Allow to execute JavaScript
  10. 10. How do navigation tests work? Preconfigured Define all environment pages from requirements Reference Wait for database Load in series READY state
  11. 11. Types of UI testing Image analysis Screenshot based Static (HTML, CSS, JavaScript)
  12. 12. Well structured page has better chances to be displayed correctlySTATIC ANALYSIS TECHNIQUES
  13. 13. How to access page?• Filter in Java for static HTML• Lightweight proxy server• HtmlWebDriver• Real browsers to make things realistic: • work with user agents • browser specific headers • dynamic pages
  14. 14. Existing solutions for Java• http://www.rexsl.com/rexsl-w3c/ - API for W3C validators• https://code.google.com/p/w3c-markup- validation-filter/ - validation Filter
  15. 15. DEMO TIME!
  16. 16. DEMO TIME!
  17. 17. Useful techniques• Disable everything you don’t want to validate• Disable ads, banners, images to makeeverything quicker• Static CSS may be validated on server
  18. 18. HTTP proxy for statistics https://github.com/webmetrics/browsermob-proxy
  19. 19. What can you get from HTTP proxy?• External resources integration status (Facebook, Twitter, Ads, etc.)• Images, banners, ads and other nonfunctional resources• Collect HTTP traffic for analysis (404, redirects, loading time, etc.)
  20. 20. Net panel in Firebug
  21. 21. Export statistics and reportshttp://www.softwareishard.com/blog/firebug/automate-page-load-performance-testing-with-firebug-and-selenium/
  22. 22. DEMO TIME!
  23. 23. Compare page screenshots with history to limit amount of manual workSCREENSHOT BASED TECHNIQUES
  24. 24. Regression screenshots For each navigation test Compare Take fresh screenshots
  25. 25. How can it be stable?• Disable or mock banners, GIFs and other animation• Limit tested regions for each page• Improve screenshot comparison algorithms• Use image comparison tools for manual validation
  26. 26. Find panels by corners Check X and Y Validate content
  27. 27. Extract information about page elements for extended layout analysisSCREENSHOT PROCESSINGTECHNIQUES
  28. 28. Fighting Layout Bugs• http://code.google.com/p/fighting-layout- bugs/• Open source Java library• Uses WebDriver• Proof of concepts
  29. 29. Need to detect edges and text Edges Edges Text
  30. 30. Simple text detector• Inject jQuery to the page for simple JavaScript• jQuery(*).css(color, #000000);• Take screenshot• jQuery(*).css(color, #FFFFFF);• Take screenshot again• Compare screenshots – different pixels are text
  31. 31. Simple edge detector• Inject jQuery to the page for simple JavaScript• jQuery(*).css(color, transparent);• Take screenshot• Analyze pixel sequences with the same or very similar color and contrast pixels from left or right• Apply minimal length constraints
  32. 32. #1. Text overlapping edges• Bug is where text intersects edge• Replace each buggy pixel with circle to define buggy areas• Blend detected areas with red line on the screenshot
  33. 33. #2. Text with low contrast• Bug is where text color is close to backgroundcolor• Find areas with the same background color• Blend detected areas with red line on thescreenshot
  34. 34. #3. Invalid images detection• Missed, empty or invalid URL• 4xx or 5xx HTTP response code• Content-type is not image related
  35. 35. #4. Focus visibility detection• Switch to the next element with TAB• Take screenshot• Check if something changed for element
  36. 36. Other types of layout bugs• Different layouts in different browsers• Unintended scrollbars for dialogs and frames• Broken panel borders• Text partly hidden• Broken elements flow
  37. 37. We are capable to do morewith modern technologies and our brain
  38. 38. @xpinjection http://xpinjection.commikalai.alimenkou@xpinjection.com

×