9. Navigation through all pages is very useful for all types of testing
NAVIGATION TESTS WITH
WEBDRIVER
10. Why WebDriver?
• Works with many browsers
• Can handle window size and browser settings
• Clear and simple API
• Allow to execute JavaScript
11. How do navigation tests work?
Preconfigured Define all
environment pages from
requirements
Reference
Wait for
database Load in series
READY state
12. Types of UI testing
Image
analysis
Screenshot based
Static (HTML, CSS,
JavaScript)
13. Well structured page has better chances to be displayed correctly
STATIC ANALYSIS TECHNIQUES
14.
15.
16. 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
17. 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
22. Useful techniques
• Disable everything you don’t want to validate
• Disable ads, banners, images to make
everything quicker
• Static CSS may be validated on server
23. HTTP proxy for statistics
https://github.com/webmetrics/browsermob-proxy
24. 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.)
30. 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
35. 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
36. 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
37. #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
38. #2. Text with low contrast
• Bug is where text color is close to background
color
• Find areas with the same background color
• Blend detected areas with red line on the
screenshot
39. #3. Invalid images detection
• Missed, empty or invalid URL
• 4xx or 5xx HTTP response code
• Content-type is not image related
40. #4. Focus visibility detection
• Switch to the next element with TAB
• Take screenshot
• Check if something changed for element
41. 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
42. We are capable to do more
with modern technologies
and our brain