Cross-browser testing | Ranorex
Help CenterUser GuideWeb and mobile testing

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.

    Note icon

    Note

    You will need to create your own free Dropbox account for this example.
    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).

    Reference

    Replacing dynamic identifiers with more robust ones is explained in

    Ranorex Studio expert > ⇢ Mapping dynamic UI-Elements.

    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.

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

    Reference

    These topics are described in

    Ranorex Studio advanced >  ⇢ Data-driven testing

    Ranorex Studio advanced >  ⇢ Variables and parameters.

    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.

    Reference

    Creating data sources is explained in

    Ranorex Studio advanced > Data-driven testing > ⇢ Data and data management.

    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.

    Reference

    Data binding is described in

    Ranorex Studio advanced > Data-driven testing > ⇢ Data binding.

    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:

    Reference

    Reports are explained in

    Ranorex Studio fundamentals > ⇢ Reporting.

    Download the sample solution

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

    tipp icon

    Attention

    The recording module Login.rxrec does not contain any login data. Fill in your own Dropbox account data. You will also need to change the content of the Validation attribute InnerText to your own account name in the recording module VerifyAccount.rxrec.

    Sample solution

    Theme: Cross-browser test
    Time: 25 minutes

    Download sample file

    Install the sample solution:

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

    tipp icon

    Hint

    The sample solution is available for Ranorex versions 8.3 or higher. You must agree to the automatic solution upgrade for later versions.