• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Automated UI Testing

Automated UI Testing



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

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



Total Views
Views on SlideShare
Embed Views



20 Embeds 5,139

http://xpinjection.com 2608
http://www.scoop.it 1930
http://software-testing.ru 281
http://sqadays.com 195
http://www.sqadays.com 51
http://feeds.feedburner.com 28
https://twitter.com 17
http://www.software-testing.ru 8
http://translate.googleusercontent.com 4
http://sqadays.byte-force.yar.ru 3
http://webcache.googleusercontent.com 3
http://twitter.com 2
https://www.google.com 2
http://sqadays 1
http://hghltd.yandex.net 1
http://xpinjection.com.meme4all.com 1
https://twimg0-a.akamaihd.net 1
http://reader128k.net 1
http://bottlenose.com 1
http://www.google.fr 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Automated UI Testing Automated UI Testing Presentation Transcript

    • Automated Web UI Testing Mikalai Alimenkou http://xpinjection.com @xpinjection
    • Do you need UI testing?
    • Ugly design = baduser experience
    • Some sites can lose money
    • Think about design asnon-functional requirement
    • May be just do it manually?Large number Many of pages browsers
    • Not all layout bugs are so visible
    • Navigation through all pages is very useful for all types of testingNAVIGATION TESTS WITHWEBDRIVER
    • Why WebDriver?• Works with many browsers• Can handle window size and browser settings• Clear and simple API• Allow to execute JavaScript
    • How do navigation tests work? Preconfigured Define all environment pages from requirements Reference Wait for database Load in series READY state
    • Types of UI testing Image analysis Screenshot based Static (HTML, CSS, JavaScript)
    • Well structured page has better chances to be displayed correctlySTATIC ANALYSIS TECHNIQUES
    • 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
    • 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
    • DEMO TIME!
    • DEMO TIME!
    • Useful techniques• Disable everything you don’t want to validate• Disable ads, banners, images to makeeverything quicker• Static CSS may be validated on server
    • HTTP proxy for statistics https://github.com/webmetrics/browsermob-proxy
    • 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.)
    • Net panel in Firebug
    • Export statistics and reportshttp://www.softwareishard.com/blog/firebug/automate-page-load-performance-testing-with-firebug-and-selenium/
    • DEMO TIME!
    • Compare page screenshots with history to limit amount of manual workSCREENSHOT BASED TECHNIQUES
    • Regression screenshots For each navigation test Compare Take fresh screenshots
    • 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
    • Find panels by corners Check X and Y Validate content
    • Extract information about page elements for extended layout analysisSCREENSHOT PROCESSINGTECHNIQUES
    • Fighting Layout Bugs• http://code.google.com/p/fighting-layout- bugs/• Open source Java library• Uses WebDriver• Proof of concepts
    • Need to detect edges and text Edges Edges Text
    • 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
    • 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
    • #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
    • #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
    • #3. Invalid images detection• Missed, empty or invalid URL• 4xx or 5xx HTTP response code• Content-type is not image related
    • #4. Focus visibility detection• Switch to the next element with TAB• Take screenshot• Check if something changed for element
    • 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
    • We are capable to do morewith modern technologies and our brain
    • @xpinjection http://xpinjection.commikalai.alimenkou@xpinjection.com