The document is a guide for effective cross-browser testing, emphasizing the importance of testing for browser compatibility and responsiveness rather than targeting specific devices. It outlines methods for testing during development, suggests tools like BrowserSync and browser virtual machines for efficient regression testing, and highlights the necessity of validating layout changes across different browsers. Additionally, it offers advantages and services provided by Browseemall to streamline the testing process.

1. Daniel Herken
dherken@browseemall.com
http://www.browseemall.com
Guide To Effective Cross Browser Testing
Cross Browser Testing

2. Today we will cover
1. What to test?
2. Testing during development
3. Faster regression testing
4. Validating layout changes
Introduction

3. Always test for browser compatibility not operating system compatibility.
What to test?
Define your target browsers!

4. Don’t target specific devices for mobile websites, test for general responsiveness instead.
• Define minimal width and height to target
• Select only a few different devices for testing
• Test during development not after
• Use frameworks like bootstrap to get a working basis fast
What to test?
Test for responsiveness not specific devices!

5. Select standards compliant browsers (not IE!) and use it for development.
After feature is completed in development browsers test & fix other browsers.
Testing during development
Testing during development is important!

6. • Just install normal browsers like Firefox, Chrome and Opera
• Use modern.ie Virtual Machines to test for IE and Edge
• Tool or online service necessary for Safari testing if not on macOS
In most cases testing the same browser on different operating systems is not necessary.
Testing during development
Where to get all the browsers?

7. Testing during development
Demo

8. • Can run different versions of Chrome, Firefox and Opera side-by-side
• Browsers do not need to be installed
• Manages and updates modern.ie Virtual Machines for you
• Includes Safari 10 on Windows
Testing during development
Advantages BrowseEmAll has:

9. Tester runs through a specific test script for every browsers to see if everything works.
With the open source tool browser-sync this can be done more efficient!
• Repeats user input across browsers
• Support all major browsers through JavaScript
• Can be used with localhost, local files or staging environments
Faster regression testing
Regression testing is a mostly manual process.

10. Faster regression testing
Demo

11. • Manages browser-sync for you
• Enables browser-sync inside the Virtual Machines for IE / Edge
• No need to install any additional dependencies
Faster regression testing
Advantages BrowseEmAll has:

12. Layout changes need to be checked in every supported browser to spot problems.
With open source tools this can be done faster with screenshots:
• Create screenshots using BrowserStack
• Use screenshots provided by Microsoft
• Free screenshots provided by BrowserShots
Validating layout changes
Validating layout revisions in every browser takes lots of time

13. Validating layout changes
Demo

14. • Can take Screenshots for localhost or staging environments
• Supports different resolutions
• Uses Virtual Machines to create IE / Edge screenshots
Validating layout changes
Advantages BrowseEmAll has:

15. Questions?
Q & A
BrowseEmAll
Free 14-day trial
Custom product demo