Cross-browser testing

Cross-browser testing involves executing one test across multiple browsers. This can save a lot of time and reduce maintenance efforts, but it comes with its own challenges. In this chapter, we’ll go through a cross-browser example step by step.

In this chapter

Test scenario

We want to use Ranorex Studio to test a specific scenario on three different browsers: Microsoft Internet Explorer, Google Chrome, and Mozilla Firefox. We want to accomplish this with only one test that works for all these browsers.

To demonstrate our cross-browser example, we’ll use a free Dropbox account. Dropbox is a registered trademark of Dropbox, Inc. and Dropbox International Unlimited Company. Their terms of services and privacy policy apply. Ranorex GmbH, Ranorex, Inc. and Dropbox, Inc. are not affiliated in any way.

Our test will go through four steps that are defined as follows:

Start

Start the browser and go to the URL www.dropbox.com

Click Sign in to reach the sign-in page.

Sign-in

Enter e-mail address and password.

Uncheck the option Remember me.

Click Sign in.

Check account

Here, we’ll check if we’re signed in to the correct account. There are different ways to do this. In our example, we’ll click our account picture and validate the account name.

Click the account picture to open the account menu.

Check if the displayed account name is the same as that of our fictional person (John Public, in our case).

Sign out

Click the account picture to open the account menu (if it isn’t still open).

Click Sign out.

Create a new web test

To get started, first create a new web test as explained in  ⇢ Build a web test and keep the following in mind:

• Give your solution a meaningful name (e.g. CrossBrowserTest).
• Enter www.dropbox.com when asked for the URL.
• You’ll only be able to select one browser in the wizard. This is fine, choose Firefox. We’ll extend the test to the other browsers later.
• When asked to select the recording behavior, select Add browsers to whitelist.
• Click Finish. The new test solution appears. 

Before recording

We’ll first record our web test on a single browser. Later, we’ll adapt it to work across multiple browsers.

Before we start recording, we’ll need to make the following preparations (if you’ve instructed the wizard to start the browsers automatically, you can skip this).

Start Firefox.

Go to www.dropbox.com

Record the test

Open the Recording1 module. Click RECORD.

Click Sign in.

Enter your e-mail address and password.

Uncheck Remember me.

Click Sign in.

Wait until the page has loaded and click the account picture.

Validation

Here we’ll insert a ⇢ validation to check whether we’re logged in to the right account. We’ll do this by validating the account name, John Public in our case.

In the Recorder control panel, click Validate.

Mouse over the account name in the account menu. A purple frame will indicate which element is currently selected. Click to confirm the selection.

In the window that opens, check if the correct element has been selected. If not, correct the selection. Click Next to confirm.

Make sure the attributes Exists and InnerText with the account name are checked. Click OK to confirm.

Finish the recording

After the validation is configured, Ranorex Studio will continue recording. It’s time to finish the recording.

In the opened account menu, click Sign out.

Click Stop in the Recorder control panel to finish the recording.

Result

After stopping the recording, you’ll be returned to Ranorex Studio, with the resulting recording being displayed. Let’s take a look at this initial version of our cross-browser test.

Action table showing 11 actions (your recording may differ slightly in the amount of actions).

Repository with 8 repository items organized into two folders.

Optimize test for cross-browser adaptation

Before we start turning the test into a cross-browser test, we should optimize it.

Combine key sequences

Sometimes Ranorex Studio will split key sequences. This can happen because the sequence wasn’t entered fast enough, for example. You should combine key sequences wherever it makes sense.

Select the key sequences you want to combine and open the context menu.

Click Merge selected keyboard items.

Optimize key sequence content

Sometimes, entering special characters can result in unnecessarily complex strings. Simply correct them manually in the action table.

In the example below, we simply replaced the superfluous keypresses with @.

Unoptimized

Optimized

Find and replace dynamic identifiers

Many applications contain so-called dynamic UI elements. These change whenever a particular event happens, e.g. when you reload a web page. It’s often harder for automated testing tools to find these UI elements reliably. This is because identifiers that are robust for static UI elements (like the element ID) change all the time for dynamic UI elements. This is why you need to fall back on other identifiers for dynamic UI elements.

For web elements, Ranorex Studio uses an intelligent algorithm that recognizes when a UI element is dynamic. It ignores dynamic identifiers and uses a robust, static identifier instead. This means you should normally not need to find and replace dynamic identifiers from your repository items. However, in some cases a dynamic identifier may be missed and you’ll have to replace it by hand.

Dynamic identifiers usually appear in the RanoreXPath with a name prefix and a long character string that changes whenever the element is loaded (see paths marked in red in image).

In our example, the improved repository looks like this:

Empty text fields

In automated testing, it’s a good idea to make sure text fields are empty before something is entered in them.

The four actions in the image represent entering the e-mail address into the text field represented by the repository item LoginEmail.

Click into the text field.

Press Ctrl + A to select any existing text in the field.

Press Delete to delete the text.

Enter the e-mail address.

If the text field is already empty, actions 2 and 3 won’t have any effect. The test will continue without issue. Alternatively, you can also use the Set value action to replace all of these four actions or just the actions for emptying the text field.

Structure your test

Your tests should always be well structured. This is why you should organize your actions into various recording modules and structure them in the test suite.

In our example, we’ve organized the recorded actions into the following modules and structured the test suite as seen below:

Setup region containing the module for starting the browser and opening the URL.

Four recording modules to go to the sign in page, sign into Dropbox, check the account, and log out.

Teardown region containing the module for closing the browser.

Cross-browser functionality

Now that we’ve optimized the test, we can implement the cross-browser functionality.

Cross-browser testing is based on data-driven testing and variables.

Make the browser type a variable

As a first step, we need to replace the fixed browser in our OpenBrowser.rxrec module with a variable. This variable will take on the different browsers as value during the test run.

Open the drop-down menu for the Browser property and click As new variable…

Enter a name for the variable, e.g. selectBrowser, and click OK.

The browser type is now a variable in the actions table.

Create the data source containing the browsers

In this step, we’ll create a data source to provide values to the browser type variable.

Open the context menu of the test case in the test suite view.

Click Data source…

Click New > Simple data table and enter a name for the table, e.g. BrowserList.

Use the Add column… and Add row… buttons to create the table and fill it with the values in the image below.

Click OK.

Binding the data to the variable

Open the context menu of the test case in the test suite view.

Click Data binding…

Under Variable binding > Module variable, select the variable OpenBrowser.selectBrowser from the drop-down menu to bind it to the Browser column of the data source.

Click OK.

Run the cross-browser test

The final cross-browser tests should look as follows in the test suite:

Test suite structure with a test case containing setup/teardown regions and modules.

The test case contains a data source called BrowserList with 3 rows of data.

The module OpenBrowser contains one variable that is bound to a data source.

Results

After the test run, the report should look as follows:

Three test cases were completed successfully.

Our single test case was iterated three times, once for each row in the data source, i.e. once for each browser. Hence, three successful test cases.

Bringing up the details of the OpenBrowser module for an iteration shows the value passed to the variable:

Download the sample solution

You can download the completed sample solution file from the link below.

Install the sample solution:

Unzip to any folder on your computer.
Start Ranorex Studio and open the solution file CrossBrowserTest.rxsln