Test Live View

When running automated Playwright tests with TestingBot, you can see a realtime view of the test while it is running.
If you are running the tests in a CI/CD pipeline, or on your own machines, it might be useful to see what is happening during the test execution.

TestingBot offers a realtime live view of your Playwright tests, so you can see what is happening during the test execution.
You can embed this live view in your own dashboards, or open it in a separate window.

Realtime Views can be useful for:

Debugging tests by seeing what is happening during the test execution or share a view/control link with colleagues.
Human in the loop: instantly take control or provide input during a test. For example if the test gets stuck waiting for a Captcha or user input (for example authentication).
Embedding in other applications or dashboards for a unified view of test progress.

Getting started

You will need to generate a specific URL to access the live view of your test. To generate the URL, you will need the sessionId of the test that is running.

To fetch the sessionId in your Playwright script, you can use the custom TestingBot command:

const testingBotResponse = await page.evaluate(_ => {}, `testingbot_executor: ${JSON.stringify({action: 'getSessionDetails'})}`)

The response will contain a sessionId, which is a unique identifier for this test.

Once you have the sessionId, you can generate an authentication token as follows:

The authentication hash is created with MD5. Please see the examples below.

require 'testingbot'
api = TestingBot::Api.new(key, secret)
api.get_authentication_hash(sessionId)

TestingbotREST restApi = new TestingbotREST(key, secret);
String hash = restApi.getAuthenticationHash(String sessionId);

$api = new TestingBot\TestingBotAPI($key, $secret);
$api->getAuthenticationHash($sessionId);

import testingbotclient
tb = testingbotclient.TestingBotClient(key, secret)
tb.get_share_link(sessionId)

const TestingBot = require('testingbot-api');

const api = new TestingBot({
    api_key: "your-tb-key",
    api_secret: "your-tb-secret"
});

const hash = api.getAuthenticationHashForSharing(sessionId);

Now that you have the authentication hash, you can construct the live view URL as follows:

https://testingbot.com/tests/<sessionId>/live-view?auth=<authentication_hash>

Embed

Once you've constructed the live view URL, you can embed it in an iframe within your own application or dashboard:

<iframe src="https://testingbot.com/tests/<sessionId>/live-view?auth=<authentication_hash>" sandbox="allow-same-origin allow-scripts" allow="clipboard-read; clipboard-write" width="800" height="600"></iframe>

Adjust the width and height attributes as needed to fit your layout.