5 Steps to Add Cross-Browser Testing to Your Development Cycle
Now as you surely know testing websites and web applications across all major browsers can be quite a daunting task. Add some mobile devices to the mix and the testing can get a problem quite fast.
Unfortunately more and more clients want websites running in a wide range of browsers and devices.
Quite often we develop or design a website in one browser. We do all our testing in this browser and only prior to the release there is a brief cross-browser check if any.
But what if you could cross-browser test your website after every implemented change or new feature?What if you could cross-browser test your website hosted on your local machine (or your local network) with deployment to an actual server?
What if this fast local cross-browser test could include all major desktop and mobile browsers?
And what if you could inspect and compare DOM and CSS among many of those browsers?
This is exactly what BrowseEmAll is trying to do. With the installation of BrowseEmAll, you get web browsers (Internet Explorer 11, Firefox (Firefox 36 to Firefox 107), Chrome (Chrome41 to Chrome107) , Microsoft Edge ( MSEdge95 to MSEdge107) and Safari ( Safari11, Safari12, Safari14)) and 139 mobile browsers (iPhone, iPad, Android, Android Tablets) available on your local machine.
Why use BrowseEmAll?
Because with BrowseEmAll you can include cross-browser testing in your development cycle. Rather than implement in one browser and hope for the best you can easily test every new feature in all target browsers.
How to use BrowseEmAll
I would like to show you a quick (real-world) example of how easily you can integrate BrowseEmAll in your development cycle.
Step 1: Select a reference browser
Choose your favorite browser as your reference and develop every new feature in this browser first. For this example, we choose Firefox as our reference (mainly because of the excellent add-on firebug). Now simply develop your new feature (or page) until it is ready and works in Firefox. To get this example going I will use the BrowseEmAll homepage as an example. As you can see in the screenshot it works really nicely in the current version of Firefox.
Step 2: Test this feature with all browsers you need or want to support
Now let’s say we need to support Firefox, Chrome, and Edge with our website. We can now test our new feature (or page) with BrowseEmAll. Just start it up, load the page and iterate through all browsers by selecting them on the top right.
Step 3: Analyze the problems
Now let’s have a quick look at what goes on inside Firefox101. Just select “Page Analytics” in BrowseEmAll and inspect the DOM and CSS on our offending element.
Choose the browser you want and then select “Generate Analytics”.
We can see all the problems in that browser.Now we can compare these values with our reference browser
Step 4: Compare with your reference browser
We can compare the current calculated layout with our reference browser.Just select “Page Analytics” in BrowseEmAll and then select “Generate Screenshots”.
Now we can see the difference in between Firefox101 and Chrome102 side by side.We just select Firefox 101 on the top right as “Layout Base”.
We choose Chrome 102 and we can see the differences with Firefox101.
Step 5: Fix the error
With all this information at hand, you can easily fix the issue (or try and error) and press refresh in BrowseEmAll to see the results.
Repeat for every feature!
These five steps can easily be repeated for every new feature or page integrated into your website. Please note that all of these steps can be done with your page hosted on your local machine and without any cloud services. All Browsers integrated with BrowseEmAll are fully functional.