compatibility testing of your web apps - tips and tricks for debugging locally before you go to the...

© 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○ 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


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.Parameterspublic 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. */@Beforepublic 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 [email protected]

compatibility testing of your web apps - tips and tricks for debugging locally before you go to the...

Engineering