Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
© Copyright 2015 Coveros, Inc. All rights reserved.
Compatibility Testing Your
Web Apps
Tips and Tricks for Debugging Loca...
© Copyright 2015 Coveros, Inc. All rights reserved.
Agenda
● Introduction
● Initial Tests
● How Sites are built
● Testing ...
© Copyright 2015 Coveros, Inc. All rights reserved.
Introduction
© Copyright 2015 Coveros, Inc. All rights reserved.
Max Saperstone
Max Saperstone has been working as a Software and Test ...
© Copyright 2015 Coveros, Inc. All rights reserved.
What is Selenium IDE
● Selenium IDE is a complete integrated developme...
© Copyright 2015 Coveros, Inc. All rights reserved.
Selenium IDE Features
● Easy record and playback
● (Semi) Intelligent ...
© Copyright 2015 Coveros, Inc. All rights reserved.
Initial Tests
© Copyright 2015 Coveros, Inc. All rights reserved.
What Went Wrong
● Many Tests Failed
● Upon Analysis, it was Android an...
© Copyright 2015 Coveros, Inc. All rights reserved.
How Sites are Built
© Copyright 2015 Coveros, Inc. All rights reserved.
Non-Responsive Site
A non-responsive web application is one that respo...
© Copyright 2015 Coveros, Inc. All rights reserved.
Separate Sites
Having a separate Mobile Site is an approach that is al...
© Copyright 2015 Coveros, Inc. All rights reserved.
Responsive Site
Responsive Web design is an approach that suggests tha...
© Copyright 2015 Coveros, Inc. All rights reserved.
Types of Responsive Sites
There are two ways to design a responsive we...
© Copyright 2015 Coveros, Inc. All rights reserved.
Types of Responsive Sites (cont.)
Responsive Design Website Advantages...
© Copyright 2015 Coveros, Inc. All rights reserved.
Testing Techniques
© Copyright 2015 Coveros, Inc. All rights reserved.
Techniques for Simulating Different Devices
● Desktop browsers like Ch...
© Copyright 2015 Coveros, Inc. All rights reserved.
Techniques for Fixing Tests Locally
● Create functional tests followin...
© Copyright 2015 Coveros, Inc. All rights reserved.
Debugging and Testing Workflow
● Start in Selenium IDE
○ Write/Record ...
© Copyright 2015 Coveros, Inc. All rights reserved.
Re-Run Tests
© Copyright 2015 Coveros, Inc. All rights reserved.
Sample Code - Locally Simulating
/**
* Constructs a new instance of th...
© Copyright 2015 Coveros, Inc. All rights reserved.
Sample Code - Locally Simulating
/**
* @return a LinkedList containing...
© Copyright 2015 Coveros, Inc. All rights reserved.
Sample Code - Locally Simulating
/**
* Constructs a new {@link Firefox...
© Copyright 2015 Coveros, Inc. All rights reserved.
Wrap-Up
© Copyright 2015 Coveros, Inc. All rights reserved.
About Coveros
● Coveros helps organizations accelerate the delivery of...
© Copyright 2015 Coveros, Inc. All rights reserved.
Questions
Max Saperstone
max.saperstone@coveros.com
Upcoming SlideShare
Loading in …5
×

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

593 views

Published on

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.

Published in: Engineering
  • Be the first to comment

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

  1. 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. 2. © Copyright 2015 Coveros, Inc. All rights reserved. Agenda ● Introduction ● Initial Tests ● How Sites are built ● Testing Techniques ● How Coveros Can Help ● Questions
  3. 3. © Copyright 2015 Coveros, Inc. All rights reserved. Introduction
  4. 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. 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. 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. 7. © Copyright 2015 Coveros, Inc. All rights reserved. Initial Tests
  8. 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. 9. © Copyright 2015 Coveros, Inc. All rights reserved. How Sites are Built
  10. 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. 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. 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. 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. 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. 15. © Copyright 2015 Coveros, Inc. All rights reserved. Testing Techniques
  16. 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. 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. 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. 19. © Copyright 2015 Coveros, Inc. All rights reserved. Re-Run Tests
  20. 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. 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. 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. 23. © Copyright 2015 Coveros, Inc. All rights reserved. Wrap-Up
  24. 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. 25. © Copyright 2015 Coveros, Inc. All rights reserved. Questions Max Saperstone max.saperstone@coveros.com

×