4 Steps to Cross Browser Test An Existing Website

In this post I’ll show you how to cross-browser test your existing website more efficiently. All 4 steps will be performed using the cross-browser testing tool BrowseEmAll.

To start off your cross-browser testing we will create a quick overview for all desktop browsers to pinpoint where to investigate further. In steps 1 and 2 we will concentrate on rendering issues in the different browsers. Once the rendering looks good we will move to step 3 and test dynamic content like JavaScript, Flash, Silverlight and so on. Finally, we will test the website for mobile devices such as iPhone, iPad and Android phones and tablets. I’ll use a modified version of the BrowseEmAll homepage to demonstrate the process. For comparison, this is what the page should look like:

Step 1: Spot layout differences using the cross-browser visual testing

To get a quick overview of the cross-browser compatibility progress we will start by creating a cross-browser visual test for our website using visual testing tool. This will automatically iterate through the selected desktop browsers integrated in BrowseEmAll. To get this going just launch BrowseEmAll and select the visual testing tool:

Now you can enter the URL (localhost or files are supported) of your page. Select a resolution and browsers that you want to test. Hit the “Generate Screenshots” button to go on with the process.

Now you can go get a coffee while BrowseEmAll creates the screenshots for you. The report contains screenshots and detailed HTML / CSS analyses for the selected browsers.

Use this information to pinpoint the browsers you need to investigate further. As indicated by the report, we should take a detailed look at Edge 108 since there are 203 layout differences. The screenshot for this browser looks like this:

As we can see, layout base and Edge 108 has some differences as mentioned in the report.
With this information we can move on to step 2.

Step 2: Analyze and resolve any errors using the different browsers

Now you can know which problems the browsers encountered rendering your website if there are any. Once again, we will use BrowseEmAll to help resolve the issues by examining the differences.

If we are not 100% sure what is causing the issue you can open Box Model Differences or Missing Elements tool on the top left part of the screen. There you can inspect CSS layout differences for the selected browsers.

Without a reference point it’s sometimes hard to tell which variables are off, so we can run the same test on BrowseEmAll’s Page Analytics tool.

Create the exact same test to examine further with the Page Analytics Tool of BrowseEmAll.

Examine the report that created by Page Analytics tool to spot errors.

You can view the results in summary view or you can click on icons to see detailed information about the specific problems. After this you can start over with step 1 (maybe the fix has broken something else?). Do this until your website renders correctly in every browser.

Step 3: Test dynamic content using the integrated desktop browser

Your website now renders correctly in all desktop browsers! This is your first great achievement. Don’t worry, it get’s easier after that…

Maybe you are lucky and your website does not contain any dynamic content. No JavaScript? No CSS animations or effects? Good on ya! You can leave this out and jump to step 4.

Otherwise, you will need to test all of this dynamic content using the different browsers. To do this, you need to iterate through all browsers using BrowseEmAll and test your dynamic content. This way you will be able to spot all problems without installing many different browsers or firing up virtual machines.

A quick look at the console – using Page Analytics – can tell you more about JavaScript errors. Go ahead and correct every bug and retest all browsers to make sure nothing is broken.

After you did this for all dynamic content we can move on to step 4.

Step 4: Use the mobile simulators to test for mobile devices

In this last step we are going to test the website on different mobile devices. Fortunately, BrowseEmAll almost has every single version and model of mobile devices. We will, once again, use BrowseEmAll for this test. This time we will use Live Testing tool of BrowseEmAll.

Fire up BrowseEmAll, navigate to your website and select the first mobile simulator on the top right.

The simulator will render the page just as the real device would do. You can zoom, scroll and switch between landscape and portrait mode.

As in step 3, you need to iterate through all mobile devices to test your website. There are iPhone, iPad, Android, and Android tablets to test. Finally! You made sure that the website renders correctly and is useable on all of these mobile devices. Now relax and upload your perfect cross-browser-compatible website.

Want to try this using BrowseEmAll?Start Your Fully Functional 3-Day Evaluation for $1.99: