Run the sample web app visual test

Step 1: Setup environment

Requirements

  • Npm tool
  • WebdriverIO framework
  • Access key
    • You can generate an Access key using the following instruction – Access key
  • Billing unit
    • The billing unit is your team’s unique identifier, or just the word “personal” in the case of an individual account.
      More information can be found here.

Step 2: Prepare the test configuration

After setup up the environment, you need to prepare the test configuration

const KEY = 'mobitru_ak....';
const BILLING_UNIT = '<TEAM_CODE>';

const credentials = `${BILLING_UNIT}:${KEY}`;
const encodedCredentials = Buffer.from(credentials).toString('base64');

exports.config = {
    runner: 'local',
    protocol: 'https',
    hostname: `@browserhub-us.mobitru.com`,
    headers: {
        Authorization: `Basic ${encodedCredentials}`
    },
    path: '/wd/hub',
    logLevel: 'debug',
    port: 443,
    specs: ['./test/specs/**/web-selenium-demo-visual-caps.js'], // Path to your test file.
    maxInstances: 1,
    capabilities: [{
        browserName: 'chrome',
        'mobitru:options':
            {
                'enableVideo': false,
                'sessionTimeout': "1m",
                'visualTesting': {
                    'name': "Build 1",
                    'project': "JS Automation Demo for JavaScriptExecutor",
                    'branch': "main",
                    'failOnError': false
                }
            }
    }],
    bail: 0,
    waitForTimeout: 10000, // Default timeout for wait commands
    connectionRetryTimeout: 120000,
    connectionRetryCount: 3,
    framework: 'mocha',
    reporters: ['allure'],
    mochaOpts: {
        ui: 'bdd',
        timeout: 60000
    }
};

Step 3: Run sample test

After setup up the environment and preparing the test configuration, you can run your first web visual test

const assert = require('assert');


describe('Web Selenium Demo Test', () => {
    const VISUAL_TEST_NAME = 'visual js demo for selenium';
    const VISUAL_SUITE_NAME = 'web selenium demo test';
    const OPEN_URL = 'https://mobitru.com/';
    const DEFAULT_WAIT_TIMEOUT_MS = 10000;

    before(async () => {
        // Maximize the window for testing (if supported)
        await browser.setTimeout({pageLoad: 30000, implicit: 3000});
    });

    it('should navigate to Mobitru and verify the page loads correctly', async () => {
        // Navigate to the URL
        await browser.url(OPEN_URL);

        // Wait for the Mobitru main page to load
        const demoButton = await $('button[class*="demo"]');
        await demoButton.waitForDisplayed({timeout: DEFAULT_WAIT_TIMEOUT_MS});

        // Verify the current URL
        const currentUrl = await browser.getUrl();
        assert.strictEqual(currentUrl, OPEN_URL, 'The current URL is incorrect.');

        // Verify the page title
        const pageTitle = await browser.getTitle();
        assert.strictEqual(
            pageTitle,
            'Mobitru: Real Devices, Browsers & AI - in One Enterprise Testing Platform',
            'The page title is incorrect.'
        );
        await submitSnapshot(driver, 'after_open', VISUAL_TEST_NAME, VISUAL_SUITE_NAME);
    });
});

async function submitSnapshot(driver, name, testName, visualSuiteName) {
    const snapshotData = {
        "name": name,
        "testName": testName,
        "suiteName": visualSuiteName,
    };
    await driver.executeScript('mobitru:visualCheck', [snapshotData]);
}
Scroll to Top