Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locally before you go to the Cloud

© Copyright 2015 Coveros, Inc. All rights reserved.
Compatibility Testing Your
Web Apps
Tips and Tricks for Debugging Locally
Before you go to the Cloud
October 1st
Max Saperstone

Agenda
● Introduction
● Initial Tests
● How Sites are built
● Testing Techniques
● How Coveros Can Help
● Questions

Introduction

Max Saperstone
Max Saperstone has been working as a Software and Test Engineer for almost a
decade, with a focus on Test Automation and the CI/CD process. He specializes
in open source tools, including the Selenium Tool Suite, JMeter, AutoIT,
Cucumber, and Chef. Max has lead several testing automation efforts, including
developing an automated suite focusing on web-based software to operate over
several applications for Kronos Federal. He also headed a project with Delta
Dental, developing an automated testing structure to run Cucumber tests over
multiple test interfaces and environments, while also developing a system to
keep test data ‘ageless.’ He recently released a new testing architecture for
SecureCI™ to allow testing of multiple interfaces, custom reporting, and minimal
test upkeep. After completing an implementation of the Active Authentication for
android devices, he is currently deep in the mobile testing world, working with
open source tools such as Robotium and Selendroid.
Max has spoken at multiple conferences including StarEast, StarWest, Mobile
Dev and Test, and AgileDC

What is Selenium IDE
● Selenium IDE is a complete integrated development
environment (IDE) for Selenium tests
● It is implemented as a Firefox Add-On
● It allows recording, editing, and debugging tests
● Scripts are recorded in Selenese, a special test scripting
language for Selenium
● Selenese provides commands for performing actions in a
browser (click a link, select an option), and for retrieving
data from the resulting pages

Selenium IDE Features
● Easy record and playback
● (Semi) Intelligent field selection will use IDs, names, or
XPath as needed
● Autocomplete for all common Selenium commands
● Walk through tests
● Debug and set breakpoints
● Save tests as HTML, Ruby scripts, or any other format
● Support for Selenium user-extensions.js file
● Easy customization through plugins

Initial Tests

What Went Wrong
● Many Tests Failed
● Upon Analysis, it was Android and iPhone tests
● Amazon Test
○ Different titles appeared
● Coveros Test
○ ‘Search’ button wasn’t present
● Google
○ ‘I’m Feeling Lucky’ button wasn’t present
● GoogleSearch
○ Without the ‘I’m Feeling Lucky’ button, the search can’t be performed
● Target
○ We were forwarded to a completely separate site

How Sites are Built

Non-Responsive Site
A non-responsive web application is one that responds the
same way all devices. The same information is displayed on
a laptop’s web browser as it would on a mobile device.
Advantages
● Less Expensive
● Less Complex
● The mobile web world is changing really fast
● Easier to design tests
Disadvantages
● Information may be harder to read
● Buttons and links may be more difficult to click

Separate Sites
Having a separate Mobile Site is an approach that is also
used to provide a better mobile experience by redirecting
mobile users to a separate site optimized for mobile use
Advantages
● Better mobile experience
● Less complex site design
Disadvantages
● SEO penalties
● Dual code maintenance
● Links don’t transfer

Responsive Site
Responsive Web design is an approach that suggests that
an app should respond to the user’s behavior and
environment based on screen size, platform and orientation
Advantages
● The app is easy to use with all interfaces
● Design looks good on any interface
● Don’t have to redesign the site for each new device
Disadvantages
● May suffer from performance issues
● More expensive to design, develop and test

Types of Responsive Sites
There are two ways to design a responsive web app
Responsive Design Website
● Responsive design sites adapt the layout to the available
view
● Utilize HTML5, CSS3, and Javascript
Dynamic Serving Website
● Dynamic serving allows the server to respond with
different HTML (and content) from the same URL
● Based on the user-agent passed to the server device
specific information will be returned

Types of Responsive Sites (cont.)
Responsive Design Website Advantages
● Makes it easier for users to share and link to your content
with a single URL
● Requires less engineering time to maintain multiple
pages for the same content
● Less resource intensive on server
Dynamic Serving Website Advantages
● Only one URL, no need for redirection
● Browsers don’t need to use HTML5
● Doesn’t require powerful client devices for CSS and JS

Testing Techniques

Techniques for Simulating Different Devices
● Desktop browsers like Chrome and Firefox have many
tools to effectively use user-agents to simulate multiple
mobile browser types with little or no cost
○ Chrome ‘device mode’
○ User Agent Switchers
● Simulation does not mimic hardware or software of
mobile device, just displays similar data
● Use Selenium IDE’s ‘find’ button to see how elements
change
○ When changing screen size
○ When changing user-agent

Techniques for Fixing Tests Locally
● Create functional tests following unit testing best practices
○ Test as small pieces as possible
○ Don’t include loops or conditional statements
● Avoid using XPath and CSS for locators based on
structure
○ Only use XPath or CSS when elements change id and class between
sites (typical with dynamic serving)
● Use Regular Expressions when needed for asserts
● When testing workflows, create ones that work for all sites
● When testing if elements exist/are visible, create separate
mobile and desktop tests
● TestNG might be more helpful for specifying different
browsers for each test

Debugging and Testing Workflow
● Start in Selenium IDE
○ Write/Record tests in
Selenium IDE
○ Execute tests in Selenium
IDE
○ Note issues, debug, and fix
○ Resize browser to smaller
window
○ Re-run tests in Selenium IDE
○ Set user-agent switcher to
mobile device
○ Re-run tests in Selenium IDE
○ Export tests to language of
choice
● Test from IDE
○ Execute tests in IDE
○ Resize browser to smaller
window
○ Re-run tests in IDE
○ Set to profile with user-agent
switcher set for mobile device
○ Re-run tests in IDE
● Test in the Cloud
○ Emulators can be more
simply used than simulators
○ Utilize frameworks already
established for cloud provider

Re-Run Tests

Sample Code - Locally Simulating
/**
* Constructs a new instance of the test. The constructor requires four
* string parameters, which represent the device, device size, and browser
* with the user agent switcher.
* @param device
* @param width
* @param height
* @param profile
*/
public LocalSimulationTest(String device, int width, int height, String profile) {
super();
this.device = device;
this.width = width;
this.height = height;
this.profile = profile;
}

/**
* @return a LinkedList containing arrays representing the browser
* combinations the test should be run against. The values in the array are used
* as part of the invocation of the test constructor
*/
@SuppressWarnings({ "rawtypes", "unchecked" })
@ConcurrentParameterized.Parameters
public static LinkedList browsers() {
LinkedList browsers = new LinkedList();
browsers.add(new String[]{"desktop", "1920", "1080", "DESKTOP"});
browsers.add(new String[]{"iphone4", "320", "480", "IPHONE"});
browsers.add(new String[]{"iphone6p", "414", "736", "IPHONE"});
browsers.add(new String[]{"galaxys4", "480", "640", "ANDROID"});
return browsers;
}

/**
* Constructs a new {@link FirefoxDriver} instance which is configured to use
* the capabilities defined by the {@link #device}. {@link #width}, {@link
* #height} and {@link #profile} instance variables will determine how to
* configure our simulator to have everything run smoothly locally.
* @throws Exception if an error occurs during the creation of the {@link
* FirefoxDriver} instance.
*/
@Before
public void setUp() throws Exception {
//Load our local profile for firefox browser
ProfilesIni profileIni = new ProfilesIni();
FirefoxProfile ffprofile = profileIni.getProfile(profile);
this.driver = new FirefoxDriver(ffprofile);
//Resize the current window to the given dimension
Dimension d = new Dimension(Integer.valueOf(width),Integer.valueOf(height));
this.driver.manage().window().setSize(d);
}

Wrap-Up

About Coveros
● Coveros helps organizations accelerate the delivery of secure,
reliable software
● Our consulting services:
○ Agile software development
○ Application security
○ Software quality assurance
○ Software process improvement
● Our key markets:
○ Financial services
○ Healthcare
○ Defense
○ Critical Infrastructure
Development Capabilities

Questions
Max Saperstone
max.saperstone@coveros.com

Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locally before you go to the Cloud

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locally before you go to the Cloud (20)

More from Sauce Labs (20)

Recently uploaded (20)

Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locally before you go to the Cloud