Compare the Layout in Different Browsers via web

Run cross-browser tests in the webmate web app to compare one page across multiple browser environments.

For programmatic cross-browser tests, see Compare the Layout in Different Browsers via SDK .

Start Test

After opening a project, click on the Run Test button (1) in the top-bar,

Then click on Default Cross-Browser Test (1) in the list of base templates , or choose a customized cross-browser test template.

In the pop-up you can insert and URL (1) to visit at the top and add more URLs by clicking on Add URL (2).

Below you can choose the reference browser by clicking on it. The assumption here is that this browser renders the site(s) correctly.

In the last step, you can choose the browsers you want to test for differences against the selected reference. You can click on the browser icon (1) and add more cross browsers by clicking Add Cross Browser (2). Start the test by clicking Execute test in the lower right (3).

Advanced Options

By clicking on Show advanced selection under Reference Browser you get the option to choose from more browsers.

Now you can choose from more browsers and click on the arrows below the browser icons to open a menu to choose the platform and browser version.

The same options are available for the cross browsers by clicking on the arrows below the browser icons.

At the bottom you can access more settings by clicking Show advanced settings

The test can be configured to do warmup actions prior to capturing the websites state, e.g. closing a cookie consent message, etc. To do so, you can expand the options for Pre-Test Steps by clicking on it (1). This allows to multiple steps by clicking on Add Step (2).

You can either insert an URL and XPath and click Add XPath when you are done.

View results

You can find the test results in the TestLab by clicking on your test run.

The top bar contains the number of differences across the browsers were found by the test (1), followed by the list of URLs and browsers (2). You can select the URLs for which you want to view the results, if you applied the test on multiple URLs (3).

Below that you see a side-by-side comparison of the two browsers and if you selected multiple browsers to compare you can choose which one to display by clicking on the browser and choose one in the dropdown menu.

In the right sidebar there is the list of differences between the two views (1). Moving the cursor over an item in the list will highlight the corresponding elements in the browser views (2). Clicking on an item in the list will highlight it permanently and show a box with more details about the difference at the bottom (3).