Creating and Running Web Tests With TestComplete in JxBrowser

JxBrowser is a Chromium-based web browser component that can be embedded into Swing, SWT, and JavaFX applications to render web content. Out of the box, TestComplete cannot access web pages and web applications running in JxBrowser. However, you still can create and run your web tests in JxBrowser by using ChromeDriver, a WebDriver-based web testing tool, and the TestComplete Device Cloud add-on:

1. You create a web test using one of the browsers that TestComplete supports:

   Web browsers you can use for recording web tests

   Web browsers you can use for recording web testsWeb browsers you can use for recording web tests

   • Microsoft Edge (both 32- and 64-bit versions)

   • Microsoft Internet Explorer 11 (both 32- and 64-bit versions)

     Note:

     The Modern UI (Metro) version of Internet Explorer 11 is currently not supported.

   • Google Chrome 84 (both 32- and 64-bit versions)

     If you have a TestComplete version earlier than 12.42, your version of the SmartBear Test Extension will be incompatible with newer versions of the Chrome web browser. To test web applications in Chrome 84, you will have to upgrade your TestComplete to some later version. We recommend using version 14.60.

     If you use a later version of Google Chrome, check whether a patch is available for it.

     Chrome running in Modern UI (Metro) mode is currently not supported.

   • Mozilla Firefox 68 ESR, 78 ESR, 75 - 79 (both 32- and 64-bit versions)

     If you use a later version of Firefox, check whether a patch is available for it.

   It does not matter which browser you choose. When creating tests in cross-platform web testing mode, you make them JxBrowser–compatible.

2. You modify your created test to connect to ChromeDriver and run the test instructions in JxBrowser.

3. You run the test and get the test results.

JxBrowser version 7.8 and ChromeDriver version 2.4.

• An active license for the TestComplete Web Module and for the Device Cloud add-on.

• The Web Testing plugin and the Device Cloud add-on must be enabled in TestComplete.

• One of the supported web browsers in which you want to record tests. It does not matter what browser you use for recording. You can choose any browser you are comfortable with. The resulting test will be compatible with JxBrowser.

• The web browser selected for test recording must be prepared for testing as described in Preparing Web Browsers.

• ChromeDriver must be installed and running on your computer. You can get ChromeDriver at chromedriver.chromium.org.

These are the same limitations that are applied to any web browser that TestComplete does not support directly and that you access via WebDriver (or ChromeDriver for that matter):

• You will not be able to record user actions over web pages running in JxBrowser.

• You will not be able to explore web pages running in JxBrowser and their elements by using the Object Browser or Object Spy.

You handle these limitations by exploring your tested web application and recording user actions over it in any other web browser that TestComplete supports. The resulting web test will be compatible with JxBrowser.

Enable remote debugging in your JxBrowser and specify the port that will be used for debugging. You can do it directly in your SWT, Swing, or JavaFX application’s source code, by using the remoteDebuggingPort option of the JxBrowser engine:

<port_number> is the debugging port number. The default port is 9222. For detailed information, please see the JxBrowser documentation at jxbrowser-support.teamdev.com/docs/guides/engine.html#remote-debugging-port.

You create your JxBrowser-compatible tests using one of the browsers that TestComplete supports directly:

• Internet Explorer

• Microsoft Edge

• Google Chrome

• Mozilla Firefox

It does not matter which browser you choose. You will be able to run your test in JxBrowser either way.

However, before you can start creating tests, you have to configure the selected browser in a special way. To learn how to do it, please see:

Preparing Web Browsers

Enable the mode before you start recording the test.

When creating new projects

In existing projects

To create a test that will simulate user actions in JxBrowser, you record those actions or create a test from scratch. The easiest way to create a test is to record it. You do it in one of the web browsers that TestComplete supports and that you have prepared for testing at the preceding step:

1. Start recording. To learn more about recording in TestComplete, see Recording Automated Tests.

2. Launch your selected and prepared web browser.

3. Interact with your tested application or web page as an end-user would: navigate through pages, click the links, input data into forms, and so on.

4. Stop the test recording.

   TestComplete will process the performed actions and generate a test. The test consists of the sequence of operations that define various interactions with objects in a web browser. For example, if you use keyword tests, your recorded test may look somewhat like the following:

   

   Click the image to enlarge it.

You can modify and enhance the recorded test in a number of ways to make it more flexible and efficient. For example:

• Add new operations, reorder operations, and modify their parameters.

• Delete or disable unneeded operations (for example, superfluous recorded operations).

• Insert checkpoints for verifying objects and values in the tested application.

• Create data-driven tests that run multiple test iterations using different sets of data.

The recorded test interacts with the browser you used during the recording. To run the test in JxBrowser, modify the test as follows:

• In your recorded test, remove or disable all test commands that interact with the web browser you have used for test recording. For instance, in script tests, remove or comment out all script lines that use the Browser.Item property. In keyword tests, remove or disable the Run Browser operation.

• Write script code that will connect TestComplete to ChromeDriver:

  JavaScript

  JScript

  Python

  VBScript

  DelphiScript

  C#Script

  JavaScript

  …
  let capabilities = {
    "goog:chromeOptions": {
      "debuggerAddress" : "127.0.0.1:<remote_debugger_port>"
    }
  };
  Browsers.RemoteItem("<chromedriver_location>", capabilities).Run();

  JScript

  …
  var capabilities = "{ \"goog:chromeOptions\": { \"debuggerAddress\" : \"127.0.0.1:<remote_debugger_port>\" } }";
  Browsers.RemoteItem("<chromedriver_location>", capabilities).Run();

  Python

  …
  capabilities = {
    "goog:chromeOptions": {
    "debuggerAddress": "127.0.0.1:<remote_debugger_port>"
    }
  }
  Browsers.RemoteItem("<chromedriver_location>", capabilities).Run()

  VBScript

  …
  capabilities = "{""goog:chromeOptions"": { ""debuggerAddress"" : ""127.0.0.1:<remote_debugger_port>"" }"
  Call Browsers.RemoteItem("<chromedriver_location>", capabilities).Run()

  DelphiScript

  var capabilities;
  …
  begin
    capabilities := '{"goog:chromeOptions":{"debuggerAddress": "127.0.0.1:<remote_debugger_port>"}}';
    Browsers.RemoteItem('<chromedriver_location>', capabilities).Run();
  end;

  C#Script

  …
  var capabilities = { "goog:chromeOptions": { "debuggerAddress" : "127.0.0.1:<remote_debugger_port>" } };
  Browsers["RemoteItem"]("<chromedriver_location>", capabilities)["Run"]();

  The debuggerAddress capability specifies the debugger port that your JxBrowser uses. Make sure that you specify the same port you have configured at the preceding step.

  <chromedriver_location> is the location where ChromeDriver is running. By default, if ChromeDriver is running on your local computer, it is http://localhost:9515.

• All the commands that follow the Browsers.RemoteItem.Run method will interact with your JxBrowser. Call recorded test commands after the Browsers.RemoteItem.Run method. If your recorded cross-platform test is a script test, call it as you usually call any routine. If your recorded cross-platform test is a keyword test, call it by using the KeywordTests.Test_Name.Run method:

  JavaScript

  JScript

  Python

  VBScript

  DelphiScript

  C++Script, C#Script

  JavaScript

  function Connect()
  {
    let capabilities = {
      "goog:chromeOptions": {
        "debuggerAddress" : "127.0.0.1:9222"
        }
      };
    Browsers.RemoteItem("http://localhost:9515", capabilities).Run();
  
    KeywordTests.Test1.Run();
  
  }

  JScript

  function Connect()
  {
    var capabilities = "{\"goog:chromeOptions\": {\"debuggerAddress\" : \"127.0.0.1:9222\"}}";
    Browsers.RemoteItem("http://localhost:9515", capabilities).Run();
  
    KeywordTests.Test1.Run();
  
  }

  Python

  def Connect():
    capabilities = {
      "goog:chromeOptions": {
        "debuggerAddress" : "127.0.0.1:9222"
        }
      }
    Browsers.RemoteItem["http://localhost:9515", capabilities].Run()
  
    KeywordTests.Test1.Run()

  VBScript

  Sub Connect
    capabilities = "{""goog:chromeOptions"": { ""debuggerAddress"" : ""127.0.0.1:9222""} }"
    Call Browsers.RemoteItem("http://localhost:9515", capabilities).Run()
  
    KeywordTests.Test1.Run()
  End Sub

  DelphiScript

  procedure Connect();
  var capabilities;
  begin
    capabilities := '{"goog:chromeOptions":{"debuggerAddress": "127.0.0.1:9222"}}';
    Browsers.RemoteItem('http://localhost:9515', capabilities).Run();
  
    KeywordTests.Test1.Run();
  end;

  C++Script, C#Script

  function Connect()
  {
    var capabilities = "{\"goog:chromeOptions\": {\"debuggerAddress\" : \"127.0.0.1:9222\"}}";
    Browsers["RemoteItem"]("http://localhost:9515", capabilities)["Run"]();
  
    KeywordTests["Test1"]["Run"]();
  }

Before you run your test, run ChromeDriver and your SWT, Swing, or JavaFX application containing JxBrowser.

In TestComplete, run the resulting test.

TestComplete will connect to JxBrowser via ChromeDriver and simulate user actions in it. After the test run is over, you can view the test results:

Click the image to enlarge it.