#crossbrowser

Compare the Layout in Different Browsers via SDK

Run cross-browser tests programmatically to compare layouts across multiple browser environments.

For web-app based cross-browser tests, see Compare the Layout in Different Browsers via web .

If you want to check a layout on multiple different browsers, you have two options: a Selenium-based Crossbrowser test or a URL-based Crossbrowser test.

Selenium-based Crossbrowser Test

If you need to interact with the website (e.g. to reach a certain state), the Selenium-based test is the right choice. You need to specify the platform(s) and browsers on which you want to run the selenium test on. The function in the example executeTestInBrowser does all the interaction with the website and creates states at each point in time you want to later check for possible differences in layout.

You can now run the comparison and wait for the result

All code:

URL Based Crossbrowser Test

In the Selenium-based cross-browser test you implemented the interaction with the website yourself. You can also use the URL-based cross-browser test if you do not need further interaction with the website and only need the browsers to visit the URLs.

First you have to create the reference browser and the browser(s) to compare

Now you can specify the list of URL(s) that the browser(s) should visit

Similar to Selenium-based cross-browser tests, you can now run the comparison and wait for the result

All code:

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).