Test automation is all about running the most tests in the least amount of time. This is great for mature apps, but in the early stages of developing your web or mobile app, developers need to run a number of tests to ensure the app runs at all. Further complicating the issue is that often, your app is architect-ed differently for web and mobile which makes writing automated tests tricky. Test Automation Specialist Max Saperstone from Coveros will cover some simple testing examples and demonstrate how to expand these for testing over multiple web architectures. He will briefly cover the difference in the design of these sites with a focus on how tests can be designed to overcome their limitations, minimizing duplicate code, and following best practices.

1. © 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

2. © Copyright 2015 Coveros, Inc. All rights reserved.
Agenda
● Introduction
● Initial Tests
● How Sites are built
● Testing Techniques
● How Coveros Can Help
● Questions

3. © Copyright 2015 Coveros, Inc. All rights reserved.
Introduction

4. © Copyright 2015 Coveros, Inc. All rights reserved.
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

5. © Copyright 2015 Coveros, Inc. All rights reserved.
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

6. © Copyright 2015 Coveros, Inc. All rights reserved.
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

7. © Copyright 2015 Coveros, Inc. All rights reserved.
Initial Tests

8. © Copyright 2015 Coveros, Inc. All rights reserved.
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

9. © Copyright 2015 Coveros, Inc. All rights reserved.
How Sites are Built

10. © Copyright 2015 Coveros, Inc. All rights reserved.
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

11. © Copyright 2015 Coveros, Inc. All rights reserved.
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

12. © Copyright 2015 Coveros, Inc. All rights reserved.
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

13. © Copyright 2015 Coveros, Inc. All rights reserved.
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

14. © Copyright 2015 Coveros, Inc. All rights reserved.
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

15. © Copyright 2015 Coveros, Inc. All rights reserved.
Testing Techniques

16. © Copyright 2015 Coveros, Inc. All rights reserved.
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

17. © Copyright 2015 Coveros, Inc. All rights reserved.
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

18. © Copyright 2015 Coveros, Inc. All rights reserved.
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
○ Note issues, debug, and fix
○ Set user-agent switcher to
mobile device
○ Re-run tests in Selenium IDE
○ Note issues, debug, and fix
○ Export tests to language of
choice
● Test from IDE
○ Execute tests in IDE
○ Note issues, debug, and fix
○ Resize browser to smaller
window
○ Re-run tests in IDE
○ Note issues, debug, and fix
○ Set to profile with user-agent
switcher set for mobile device
○ Re-run tests in IDE
○ Note issues, debug, and fix
● Test in the Cloud
○ Emulators can be more
simply used than simulators
○ Utilize frameworks already
established for cloud provider

19. © Copyright 2015 Coveros, Inc. All rights reserved.
Re-Run Tests

20. © Copyright 2015 Coveros, Inc. All rights reserved.
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;
}

21. © Copyright 2015 Coveros, Inc. All rights reserved.
Sample Code - Locally Simulating
/**
* @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;
}

22. © Copyright 2015 Coveros, Inc. All rights reserved.
Sample Code - Locally Simulating
/**
* 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);
}

23. © Copyright 2015 Coveros, Inc. All rights reserved.
Wrap-Up

24. © Copyright 2015 Coveros, Inc. All rights reserved.
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

25. © Copyright 2015 Coveros, Inc. All rights reserved.
Questions
Max Saperstone
max.saperstone@coveros.com