Skip to content

WebRTC Calls

Automated testing of WebRTC calls can be done on various Windows versions (7, 8, 8.1, 10, 11) and browsers. The test script is written in JavaScript and uses the CodeceptJs framework.

Supported Browsers

  • Chrome
  • Firefox
  • Edge

Test Options

When creating/editing a WebRTC test, you can specify the following options:

  • CodeceptJs test script: The JavaScript code that describes the steps that the test will take.
  • Base Url: The base URL of the website that the test will interact with.
  • Browser: The browser that the test will run on.
  • Desktop OS: The OS that the test will run on, currently only Windows is supported.
  • Desktop OS Version: The version of the OS that the test will run on.
  • Store Artifacts: Whether to store the test artifacts such as audio recordings after the test run.
  • Calculate Audio MOS: Whether to calculate the Mean Opinion Score (MOS) for the audio quality of the call.
  • Transcribe Call Recording: Whether to transcribe the call recording to text.
  • Device Region: The region where the test will run.

Device Regions

The following regions are available for running WebRTC tests:

  • Auto
  • Europe: Dublin, Ireland; Frankfurt, Germany; Meppel and Dronten, Netherlands.
  • US West: Atlanta, Reston, Washington
  • US East: Sacramento, San Francisco, Los Angeles, Las Vegas
  • Asia: Mumbai, Sydney, Singapore

When selecting a region, the test will run in one of the data centers in that region based on the closest location to the Sipfront agent chosen.

This allows you to test the performance of your WebRTC calls in different regions and even between different regions.

Example

If you select in a WebRTC to SIP call as the Agent location aws-us-east-1 and the Device Region Asia, the SIP client will run in the US East region and the WebRTC client will run in the Asia region, effectively testing the call quality between these two regions.

Writing a CodeceptJs Test

The following is an example of a WebRTC test script that logs in and makes an outgoing call and hangs up after 30 seconds.

Feature('WebRTC Call');

Scenario("my-outgoing-call-scenario", async ({I}) => {
    I.amOnPage('/');            // Open the website root specified in the config

    // Login
    I.waitForElement("#username", 30);          // Wait for the inputs to appear
    I.fillField("#username", "my-username");    // Fill the username input
    I.fillField("#password", "my-password");    // Fill the password input
    I.click("#login-button");                   // Click the login button

    // Start a call
    I.waitForElement("#dialpad", 30);           // Wait for the dialpad to appear
    I.fillField("#dialpad", "+1-212-456-7890"); // Fill the number to call
    I.click("#call-button");                    // Click the call button

    I.wait(30);                                 // Wait for 30 seconds

    I.click("#hangup-button");                  // Click the hangup button
});

The provided test script is a simple example. You can extend it to include more complex scenarios, such as receiving a call, transferring a call, or any other scenario that a user could do on your Web app.

The script itself describes the steps that the test will take. The I object is the actor that performs the actions. The I object has a set of methods that you can use to interact with the browser, such as amOnPage, waitForElement, fillField, click, and wait. Step by step you select/locate the elements on the HTML page, fill in the fields, click the buttons, and this way you simulate the user's actions required to perform the desired call scenario.

On the other end of the call we setup according to your configuration a SIP, PSTN or WebRTC client that will act as the call receiver.

Locating Elements

Element can be found by CSS or XPath locators.

I.seeElement('.user');                              // element with CSS class user
I.seeElement('#user');                              // element with CSS id user
I.seeElement('//button[contains(., "press me")]');  // button
I.seeElement(locate('button').withText('press me'));// same as above

By default CodeceptJS tries to guess the locator type. To specify the exact locator type, you can pass an object called strict locator.

I.seeElement({css: 'div.user'});                    // locate element by CSS
I.seeElement({xpath: '//div[@class=user]'});        // locate element by XPath

Strict locators allow to specify additional locator types:

// locate form element by name
I.seeElement({name: 'password'});
// locate element by React component and props
I.seeElement({react: 'user-profile', props: {name: 'davert'}});

Info

For more details on locating elements, see the CodeceptJS documentation.

List of Methods

The I object has a set of methods that you can use to interact with the browser. Here are some of the most common methods:

  • amOnPage(url): Open a page with the specified URL.
  • waitForElement(locator, timeout): Wait for an element to appear on the page.
  • fillField(locator, value): Fill a field with the specified value.
  • click(locator): Click on an element.
  • wait(seconds): Wait for the specified number of seconds.

Info

For a full list of methods, see the CodeceptJS documentation.

Custom Sipfront Methods

In addition to the standard CodeceptJS methods, Sipfront provides some additional methods that you can use in your test scripts:

  • requestIncomingCall(): Requests an incoming call from the other agent if it is a SIP client.
  • waitForReady(users, timeout): Waits with a timeout for the specified user to become ready to proceed. Used in conjunction with notifyReady in WebRTC to WebRTC calls to synchronize the test scripts before starting a call.
  • notifyReady(user): Notifies the other user that you are ready to proceed with the test/call.