Run the sample Playwright JS test

Step 1: Setup environment

Requirements

  • Npm tool
  • Playwright 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

import {defineConfig} from '@playwright/test';

export default defineConfig({
    retries: 0,
    timeout: 120_000,
    testDir: '../tests'
});

Step 3: Run sample test

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

'use strict';

import {chromium, expect, test} from '@playwright/test';

const playwright = require('playwright-core');

const mobitruHost = "browserhub-us.mobitru.com";
const mobitruTeamCode = "<TEAM_CODE>";
const mobitruAccessToken = "mobitru_ak_....";
const httpCredentials = {
    username: mobitruTeamCode,
    password: mobitruAccessToken,
};
const mobitruApiAccessToken = btoa(`${httpCredentials.username}:${httpCredentials.password}`);
const mobitruLandingUrl = 'https://mobitru.com/';
const pwVersion = "1.53.2";


test.describe(`Sample test`, () => {

    let browser;
    let page;
    let mainPage;
    let sessionId;

    test.beforeAll(async ({browserName, defaultBrowserType}, testInfo) => {
        test.setTimeout(120000);
        const sessionName = crypto.randomUUID();
        const browserType = playwright.chromium;
        const wsEndpoint = `wss://${mobitruTeamCode}:${mobitruAccessToken}@${mobitruHost}/playwright/${browserName}/playwright-${pwVersion}?headless=false&devtools=true&arg=--use-gl&arg=--use-fake-ui-for-media-stream&arg=--start-maximized&sessionName=${sessionName}`;
        browser = await browserType.connect({
            timeout: 0,
            wsEndpoint: wsEndpoint
        });

        page = await browser.newPage({
            ignoreHTTPSErrors: true,
            viewport: {width: 1920, height: 1080}
        });
        await page.goto(mobitruLandingUrl);
        const sessionInfo = await page.request.get(`https://${mobitruHost}/playwright/session/${sessionName}`, {
            headers: {
                'Authorization': `Basic ${mobitruApiAccessToken}`,
            },
        })
        expect(sessionInfo.ok()).toBeTruthy();
        const jsonResponse = await sessionInfo.json();
        sessionId = jsonResponse.sessionId;
    });


    test('Check elements in the Header', async ({}) => {
        await page.goto(mobitruLandingUrl);
        const logoLink = page.locator("a[class*='logo-img-link']");
        const contactUsLink = page.locator("button[class*='request-demo']");
        const softExpect = expect.configure({soft: true});
        await softExpect(logoLink, 'check log image is visible').toBeVisible();
        await softExpect(contactUsLink, 'check text of contact us link').toContainText("Request a demo");
    });

});
Scroll to Top