Getting Started With Live Testing

Applies to CrossBrowserTesting SaaS, last modified on January 10, 2023

Requirements

To do live testing, the tested web app should be accessible to the CrossBrowserTesting servers.

Also, your computer and network should allow WebSocket connections. Typically, these connections are allowed on most systems. If you are not sure, you can easily check this. See What are the requirements for live testing? for details.

Video tutorial

 

Step 1. Start testing and enter a URL

To start live testing, go to Live Testing > Start a Live Test:

Starting a live test

Enter the URL of the page to be tested:

Entering a URL

Click the image to enlarge it.

Tip: If the page is behind a firewall or on a local server, enable Local Connection.

Step 2. Select an operating system and browser

In CrossBrowserTesting, you can test your websites on desktop browsers and mobile devices, so you can select the needed operating system, browser version, and display resolution size.

Desktop

On the Desktop tab:

  1. Select an operating system.

    Show image

  2. Select a browser.

    Show image

  3. Select a display resolution size. To make the selected browser automatically resized, select the Responsive Mode option.

    Show image

Setting up a desktop browser

Click the image to enlarge it.

Mobile

On the Mobile tab:

  1. Select a mobile device. CrossBrowserTesting provides live testing on real Android and iOS devices.

    Show image

  2. Select a mobile device browser.

    Show image

  3. Switch the device screen to the portrait or landscape mode.

    Show image

Setting up a mobile browser

Click the image to enlarge it.

Step 3. (Optional) Configure live test settings

Record the live test session

To record a video for the live test session:

  1. Click Advanced Options.

  2. Enable the Record Video option.

    The maximum video duration is 10 minutes.
    The Record Video option

    Click the image to enlarge it.

Record network traffic

To record network traffic for the entire live test session:

  1. Click Advanced Options.

  2. Enable the Record Network option.

    The maximum video duration is 10 minutes.
    The Record Network option

    Click the image to enlarge it.

Specify a tunnel name

Note: Use this option to test local sites or sites behind a firewall. See Local Connection for details.

You can specify the name of the tunnel to be used in the test. By default, the most recent active tunnel is used regardless of the setting. Select a name, if you have multiple.

  1. Click Advanced Options.

  2. Enable the Specify Named Tunnel option and select the tunnel name.

    The Specify Named Tunnel option

    Click the image to enlarge it.

VNC client settings

When you request a Live Test for a specific operating system and browser to test your web page, a new instance is created on our servers which can be viewed and interacted with via a remote client. Since we use a VNC (Virtual Network Communication) server to deliver this service, a VNC client is required to access the session. We offer two different in-browser VNC clients. They are convenient to use since you can just request a test session and interact with it without leaving the page. These are the current offerings:

  • WebRTC client – Uses the Web Real-Time Communication framework.

  • HTML5 Client – Uses the canvas element with WebSockets. See Performance tips.

Use the Live Test Settings drop-down menu to configure the following settings:

Live Test Settings

Click the image to enlarge it.

Client

How the live test should be delivered. We recommend that you use HTML5.

Timeout

How many minutes of inactivity of the mouse or keyboard before the session times out.

Feedback Pop-Up

Enable or disable a feedback pop-up that is shown after the live test session.

High-Speed Network

Recommended. If enabled, CrossBrowserTesting will use its subdomain for faster performance but will not use a consistent IP address. Disable the setting, if you have special firewall rules.

Performance

Available, if the HTML5 client is selected. Allows adjusting the visual quality versus the VNS session speed.

  • Auto – Recommended. Selects the optimum performance setting based on your network speed.

  • Manual – Allows you to customize the setting by dragging the point in the Speed-Quality scale.

    Specifying the Performance setting manually

Step 4. Run the test

To start testing, click Run Test. CrossBrowserTesting will check if the connection is secure, launch the selected browser, and start the live test.

Running the live test

Click the image to enlarge it.

Step 5. Interact with the website

Interact with the website with the mouse and keyboard.

You can also use the following buttons while performing the live test:

  •  – Click to take a screenshot on the ongoing live test session.

    Tip: You can also use the Alt + P keyboard shortcut.

    Show more

  • Record video  – Click to record a video of the live test session.

    Tip: If you find a bug while testing, you can record a video with the steps that reproduce the bug and then share it with the team.
  • Record network packets  – Click to record network packets.

  •  – Click to enter text to send to a certain place in your test. After clicking the button:

    1. Place the cursor in the needed place in the live test session.

    2. Enter the text to be sent in the appeared pop-up window and click Send Text.

    The entered text will be sent to the specified place in the live test session.

    Sending a text to the live test session

    Click the image to enlarge it.

  •  – Click to upload files to the live test session.

  • Toggle Dev Tools  – Click to open the browser's Dev Tools panel.

  • Scale to fit  – Click to scale the tested web page to fit the browser window size automatically.

  • Live Test Settings  – Click to open live test settings.

Once ready, click Stop to finish the test.

See Also

Live (or Manual) Testing

Highlight search results