If you’re testing a web application, it would naturally be best to test it with not only one but with all of the most popular browsers (cross-browser testing).

This blog post will show you how to record your automated website browser tests and then automatically execute the recorded tests on different browser for browser compatibility testing. Ranorex is a cross browser testing tool which can run tests in Microsoft Internet Explorer, Mozilla Firefox, Google Chrome and Chromium.

Sample Test Suite Project


To demonstrate how to perform a multiple browser test, we will generate a small sample which enters data in our VIP Database Test Web Application

First of all we’ll create a Test Case holding two Recordings, one for opening and one for closing the browser as setup and teardown modules.

Ranorex Sample Project

Now we add a “OpenBrowser” action to the OpenBrowser Module with “http://www.ranorex.com/web-testing-examples/vip/” as Url and e.g. “IE” as browser.

Open Browser Module

As next step we add a recording module validating the status String on connecting and disconnecting.

Ranorex Sample Project

The recording module simply

  • validates, that the status text equals “Online”,
  • disconnects,
  • validates, that the status text equals “Offline”,
  • connects again,
  • confirms to connect in the pop up window
  • and validates, that the status text equals “Online” again.

Test Connection

Make sure to have two repository items representing the connection status text, one for “Online” and one for “Offline”. This allows you to overcome issues with delaying validation steps. In our application it takes some time that the status text changes from “connecting…” to “Online”. To make the Validation work, we can simply add the actual validation into the RanoreXPath and only validate the existence of the status text in our web page. By doing so, we are using the search timeout of the repository item to wait for the status text to change.

Additionally to the TestConnection recording, we will generate a recording for adding VIP’s to the database. This recording will be added to a new Test Case as we want to data driven add VIP’s and do not want to open and close the browser and testing the connection with each iteration of adding a new VIP.

Ranorex Sample Project

The recording might look something like this:

Add VIP

As we want to make our test data driven, we have to add variables which can be bound with the data from our data source.

The key sequences for first and last name contain the variables $FirstName and $LastName. To select the category, we have to add a SetValue action and set the TagValue to the variable $Category. The gender can be set by adding a variable to the RanoreXPath of the corresponding repository item. Additionally, we validate the VIP count against a variable $VIP_Count.

After generating the recording, we create a data source for the Test Case Add_VIP’s and bind the data tables to the variables of the recording AddVIP.

Add Data Source to AddVIP

Add Data Source to AddVIP

Add Data Source to AddVIP 3

As last step we add a Close Application action to the CloseBrowser Module with the application folder of the web application as repository item.

Close Browser Module

Now we can execute our Test Suite Project, which:

  • opens the web application in Internet Explorer in the setup region,
  • performs connection tests,
  • adds 3 VIPs following the data driven approach (the data for the 3 VIPs are stored in a simple data table),
  • validates the count of the VIPs stored in the web application
  • and closes the browser in the tear down region.

Cross-Browser Test


To perform these steps not only for IE but also for the other browser which are supported, we first make the browser which will be started in the Recording “OpenBrowser” variable.

Therefore open the recording “OpenBrowser” and edit the browser which should be started. Now choose “As new Variable…” instead of “IE” and add a new Variable called BrowserName.

add browser variable

add browser variable 2

 

After that, add a new simple data table to the Test Case “Add_VIP_and_Validate”, holding the names of the different browsers and bind the data connector to the variable “BrowserName”.

 

Add Data Source

Add Data-Source 2

Add Data Source 3

 

After making the browser variable that way and binding this variable to a table holding all supported browser names, you can execute your test script for all supported browser.

 

Reporting

It really shouldn’t matter which browser your app will be used in. Web applications have to function flawlessly across all browsers and browser versions.
To ensure a high-end user experience, it’s absolutely essential to test apps or websites across different browsers. Follow the instructions above and start cross browser testing now.

Download Free Trial