Pairing an OTT device with an account using a browser¶

Many applications have a pairing feature that assigns devices to a user's account. Typically, this involves a QR code and/or a pairing code (consisting of letters or numbers), and the pairing process requires another device, such as a mobile phone or browser, for completion. Automating a cross-device test is possible with Suitest if you use the Suitest JavaScript API.

The device pairing process described below is based on the Disney+ application on Samsung Tizen, which gets completed using a web browser.

---

Code template¶

In the end, you will need to have two separate processes (each for a single device) running in parallel. Below are the templates for both of them.

Process on the TV:

const suitest = require('suitest-js-api');

// Main use case function
async function pairingOnTV () {

    // open app on TV    
    await suitest.openApp();

    /*
    .. Getting to the Sign in screen ..
    */

    /*
    .. Reading a QR code ..
    .. Reading a text / number pairing code ..
    */

    /*
    .. Starting the execution in the browser ..
    */

    /*
    .. Waiting for pairing completion on the TV ..    
    */

}

// Calling the function
pairingOnTV()
    .catch((err) => {
        console.error(err);
        process.exitCode = 1;
    })
    .finally(() => {
        suitest.closeSession();
    });

Process in the browser:

const suitest = require('suitest-js-api');

/*
.. Required modules and libraries ..
*/

// Second part of use case - function
async function pairingInBrowser () {

    // open app on TV    
    await suitest.openApp();

    /*
    .. Getting to the approval screen ..
    */

    /*
    .. Entering the pairing code and waiting for the confirmation ..
    */

    /*
    .. Pairing process completed in the browser ..    
    */   
}

// Calling the function
pairingInBrowser()
    .catch(err => {
        console.error(err);
        process.exitCode = 1;
    })
    .finally(() => {
        suitest.closeSession();
    });

Implementation details¶

The following sections describe how this specific case can be implemented using JavaScript code with the Suitest JavaScript API.

Required modules and libraries¶

For parallel process execution, there are several implementation methods. In our example, we use the Child process and Utilities Node.js modules for parallel process execution.

const childProcess = require('child_process');
const util = require('util');
const exec = util.promisify(childProcess.exec);

Reading the pairing code from text displayed on the screen requires only Suitest. For reading a QR code, we use the Jimp and QRCode reader libraries.

const Jimp = require('jimp');
const QrCodeReader = require('qrcode-reader');

Reading a QR code¶

As mentioned above, QR code values can be determined e.g. by using a combination of Jimp and QRCode reader libraries.

// get the QR code URL
const qrCodeElement = await suitest.element('qrCodeElementID');
const qrCodeURL = qrcodeElement.image;

// read the URL
const qrCodeContent = await Jimp.read(qrCodeURL);

const pairingApprovalURL = await new Promise(function(resolve, reject) {

    // creating an instance of qrcode-reader
    const qrCodeInstance = new QrCodeReader();
    qrCodeInstance.callback = function(err, value) {
        if (err) {
            return reject(err);
        }
            resolve(value.result);
        }
    qrCodeInstance.decode(qrCodeContent.bitmap);
});

Reading a text / number pairing code¶

Suitest allows users to read textual content of elements based on element identifiers. In this case, the element has been defined inside the Suitest Element repository. Since the pairing code is displayed split into two parts with a dash, the dash needs to be removed.

// reading the code from a text field
const elementWithPairingCode = await suitest.element('thePairingCodeTextElementID');
const pairingCode = elementWithPairingCode.text.replace(" - ", "");

Starting the execution on the second device¶

Since we need to confirm the successful completion of the pairing process on both the TV and in the browser, we must continue the test on the TV while opening a new process to execute the pairing process in the browser.

// Opening pairing process on the second device, handing over "pairingApprovalURL" and "pairingCode"
const { stdout, stderr } = await exec('npm run pairingApproval -- '+pairingApprovalURL+' -- '+pairingCode);

Getting to the approval screen (using value of the QR code)¶

Since the URL taken from the QR code is forwarded to the second process as an argument, we can simply grab it from there. Once the pairing page is opened in the browser, the user needs to enter valid credentials.

// Go to the pairing approval screen
await suitest.openUrl(process.argv[2]);

Entering the pairing code and waiting for the confirmation¶

To enter the pairing code, it needs to be inserted into the corresponding text field. The SendText feature in Suitest can be used for this purpose. After the pairing code is inserted, the user needs to proceed with login (if not already logged in).

// Enter the pairing code
await suitest.element('EnterPairingCodeID').sendText(process.argv[3]);
await suitest.element('continueButtonID').click();

/*
.. Login to the account including confirmation ..
*/

Waiting for the pairing completion on the TV¶

Once the pairing process is completed in the browser, we should verify that the result has been accepted by the application on the TV. In this case, a confirmation screen is displayed on the TV.

// Check that the device has been successfully added to the account
await suitest.element('StartStreamingButtonID').visible().timeout(1000);

// Continue
await suitest.press(suitest.VRC.ENTER);