Cross-Browser Testing With TestComplete (1)

Requirements

Applies to: TestComplete 9 - 10

Web Testing Challenges

The goal of cross-browser testing is to make sure that your website or web application provides consistent user experience regardless of a web browser. Of course, it is desirable that the web pages under test have the same look and feel in different browsers. However, cross-browser web tests go beyond just visual verifications as the functionality and business logic of a web application in different browsers is just as important.

Often QA testing engineers run functional web tests manually on local or cloud test farms like Adobe BrowserLab. These test farms provide different computers with different operating systems and browser types and versions. Such testing is time consuming because of a large number of browser/OS combinations.

Creating automated cross-browser functional tests has always been a challenging task for QA departments. The user interface and inner object hierarchy are not always the same for different versions of the same browser, let alone browsers from different vendors. Different browsers offer different sets of methods and properties for web elements, they implement message boxes in different ways, and so on. QA engineers have to keep all these differences in mind when creating automated tests and use lots of conditional statements that make tests complex and difficult to maintain.

SmartBear TestComplete greatly simplifies creating cross-browser tests by hiding browser differences and offering a unified test approach applicable to the most popular web browsers: Microsoft Internet Explorer, Mozilla Firefox and Google Chrome. With TestComplete, you can create and launch your web tests under various operating systems and with various web browsers to check both the pages' functionality and visual appearance. This article provides an overview of TestComplete's cross-browser testing features.

TestComplete: Cross-Browser Testing in Several Clicks

TestComplete offers a number of features that are specifically aimed at creating highly reusable cross-browser tests.

  • Common Browser object (One to rule them all). To work with any of the supported web browsers (Internet Explorer, Firefox, Chrome, Safari and Opera), TestComplete uses a special Browser process:

    Processes corressponding to different browsers
    Figure 1. Processes corressponding to different browsers.

    During the test recording, TestComplete tracks the browser in which you open a web page and inserts the appropriate command into the recorded test. The command accepts the target browser as a parameter, and you can easily change the browser any time by changing this parameter:

    Changing browser in keyword tests
    Figure 2. Changing browser in keyword tests.

    Changing browser in scripts
    Figure 3. Changing browser in scripts.

    There are two ways you can launch a web page in a TestComplete test:

    • You can open a web page in a new instance of a browser. In this case, TestComplete inserts the "Run Browser" command into your test (as shown in the images above).

    • You can open a web page in an existing instance of a browser. In this case, TestComplete inserts the "Navigate" command into your test. The Navigate command also has a parameter that specifies the browser to be used. During the playback, the command will search for a running instance of this browser and open the tested web page in it.

      The Navigate keyword-test operation
      Figure 4. The Navigate keyword-test operation.

      The Navigate scripting method
      Figure 5. The Navigate scripting method.

    When you need to change the browser, you just modify the parameters of the Run or Navigate command. The subsequent test commands automatically "understand" they should work with the browser that was specified by the Run (or Navigate) command parameters.

  • Unified object model. Similarly, TestComplete provides a consistent cross-browser representation of web page elements and their properties. So, you work with the page contents shown in various browsers in a unified manner.

    This also applies to handling JavaScript messages and dialogs. (Previously, that was one of the trickiest and most browser-dependent parts.) Look, this very same dialog looks very different in each browser. Hence, creating a simple test that handles all of them in the same manner is nearly impossible.

    A prompt box in Internet Explorer
    Figure 6. A prompt box in Internet Explorer.

    A prompt box in Firefox
    Figure 7. A prompt box in Firefox.

    A prompt box in Chrome
    Figure 8. A prompt box in Chrome.

    Instead, TestComplete shows this dialog as a Prompt node in the Object Browser panel. The object hierarchy under this node is the same for each of the supported browsers. Thus, the web test will work for any of these browsers:

    A Prompt test object in Firefox
    Figure 9. A Prompt test object in Firefox.

    A Prompt test object in Chrome
    Figure 10. A Prompt test object in Chrome.

  • Collection of supported browsers. Another feature that simplifies cross-browser testing is the Browsers scripting object. It provides access to all of the supported browsers that are available on your computer, so you can easily iterate through them in your tests. You no longer need to scan the computer for available browsers and exclude unsupported versions, as TestComplete does this automatically.

    When iterating through the supported browsers, you can change the target browser for your test and automatically perform the same web test under different browsers.

What Else Can I Do With Cross-Browser Tests?

  • You can use a network suite to run cross-browser web tests on different systems. For instance, you can play back your tests not only in different browsers but also on machines with different operating systems, hardware and so on.

    Distributed cross-browsr testing
    Figure 11. Distributed cross-browsr testing.

  • TestComplete provides access to methods and properties of web page elements, so you can easily check the state of your page and simulate specific user activities. For example, you can check style properties to determine if the page's elements are displayed as expected. TestComplete supports HTML5, so, for example, you can check whether the elements use HTML5- and CSS3-specific styles like borderRadius or boxShadow.
  • You can also use region checkpoints to compare visual appearance of the entire web page or specific elements of a page against baseline pictures.
  • You can use specific web checkpoints to verify the web page structure, check the page for broken links, validate the ALT, WIDTH and HEIGHT attributes of images and so on.

Sounds Great, But Where’s the Trick? (Requirements and Limitations)

Yes, there are several aspects that you should keep in mind:

  • You need to configure each browser you will use for testing. Some settings control the browser's behavior and may cause differences that will hinder the test from completing. So, by changing the browser's settings you remove these obstacles. The configuration steps are not complex and are described in full in TestComplete documentation (see Preparing Web Browsers).
  • Despite the fact that TestComplete’s web testing features are cross-browser, there can still be some specific cases that require your attention and special handling. For instance, actions on most of the GUI elements of the browser (menus, toolbars, tabs, and so on) are browser-dependent and should not be used in cross-browser tests. Another example is special dialogs that some browsers display in certain cases. TestComplete includes special means for checking the browser type and version used in your tests and executing special test commands in those situations (see Checking the Current Browser and Handling Browser Differences).
  • The cross-browser functionality works only if the Web tree model property of your TestComplete project is set to Tree. Other web tree models may assign different names under different browsers, and thus the recorded test could be browser-dependent.
  • Cross-browser features do not work when your project’s "Use legacy web testing features" option is enabled. This option serves to support web tests that were created in TestComplete 8 and earlier. When it is enabled, the web testing features and object model revert to those applied in earlier versions of TestComplete.

By default, the two abovementioned properties already have the required values. So, if you don't change the default TestComplete settings and create a new test project, the properties are already set.

Show Me How It Works

To see how you can create cross-browser tests with TestComplete, watch the following video on our web site. It demonstrates how to record a test in one browser and play it back in another browser, how to use browser-independent properties for verifying web page contents and how to create tests that iterate through all of the browsers installed on the computer:

  • Cross-Browser Testing With TestComplete 9
    Note: This video is about TestComplete 9, which does not include many features for cross-browser and web testing (such as the Browser Loop operation). However, the described approach works fine for TestComplete 10 as well.

Is This Magic? No, TestComplete Is Just a Tool. The Magic Is Up to You. (Conclusion)

TestComplete does not do magic. Instead, it significantly simplifies your test creation process. You still need to put some effort into making a web test a cross-browser one. Sometimes this will be as simple as re-selecting a browser in the drop-down list, sometimes more tuning would be required. Ultimately, this depends on your testing needs and the complexity of your tests. Either way, TestComplete's features simplify creating cross-browser tests. But don't just take our word for it, download a demo version for free and try it yourself!