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 challenges. In this chapter, we’ll go through a cross-browser example step-by-step.

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

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

Note
You need to create your own free Dropbox account for this example

This test goes through four steps that are defined as follows:

Start

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

2. Click Sign in to reach the sign-in page.
   

3. Enter your e-mail address and password.

4. Uncheck the option Remember me.

5. Click Sign in.
   
   Check account: Check if you are signed in to the correct account. There are different ways to do this. In this example, click our account picture and validate the account name.

6. Click the account picture to open the account menu.

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

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

9. Click Sign out.
   

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 (for example, 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. 

First, record your web test on a single browser. Later, adapt it to work across multiple browsers.

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

1. Start Firefox.

2. Go to www.dropbox.com

1. Open the Recording1 module. Click RECORD.
   

2. Click Sign in.

3. Enter your e-mail address and password.

4. Uncheck Remember me.

5. Click Sign in.

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

Validation

Here insert a validation to check whether you are logged in to the right account. Validate the account name, John Public, in this case.

1. In the Recorder control panel, click Validate.
   

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

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

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

1. In the opened account menu, click Sign out.

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

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

2. A repository with 8 repository items organized into two folders.

Before we start turning the test into a cross-browser test, you 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.

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

2. 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 @.

1. Unoptimized

2. 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 the image).

Reference
Replacing dynamic identifiers with more robust ones is explained in Ranorex Studio expert > Mapping dynamic UI-Elements.

In this 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.

1. Click into the text field.

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

3. Press Delete to delete the text.

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

Reference
Organizing recording modules is described in Ranorex Studio fundamentals > Ranorex Recorder > Manage recording modules. Structuring test suites is explained in Ranorex Studio fundamentals > Test suite > Test suite structure.

In this example, organize the recorded actions into the following modules and structure the test suite as seen below:

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

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

3. Teardown region containing the module for closing the browser.

Now that the test is optimized, you 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, you need to replace the fixed browser in our OpenBrowser.rxrec module with a variable. This variable takes on the different browsers as values during the test run.

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

2. Enter a name for the variable, for example, selectBrowser, and click OK.

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

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

2. Click Data source…
   
   

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

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

5. Click OK.
   

Reference
Creating data sources is explained in Ranorex Studio advanced > Data-driven testing > Data and data management.

Binding the data to the variable

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

2. Click Data binding…
   
   

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

4. Click OK.
   
   

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

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

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

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

Results

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

1. Three test cases were completed successfully.

2. 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: