Execute your Playwright tests with LambdaTest

How you can execute your test in the cloud

Feb 28, 2024

What is LambdaTest?

LambdaTest is a cloud platform that helps you execute your tests with different devices, OS, and geolocations. Lambdatest includes different services:

Mobile testing with simulators
Mobile testing with real devices
AI visual testing
Reporting tools.

You can try the services for free.

Too offers free certifications valid for 2 years with testing frameworks like Cypress, Playwright, selenium, and Apium. I got the certification from the Playwright, and the exam is in 2 parts:

Exam with multiple choice questions and
Exercise to automate 3 cases with the lambdatest service.

You need to share your private GitHub repo; after the review, you will have your free certificate.

One advantage of these platforms is that you can execute your tests in different desktop and mobile browsers and different countries.

I think that LambdaTest support and documentation are excellent and easy to integrate with Playwright.

With the free plan, you have 100 minutes of automation testing.

How to Integrate with Playwright

To connect with Playwright, you must get your access token in your user account settings.

It is a good practice not to store any password and user name in the code, so you can create a .env file and add your username and password.

LT_USERNAME = Your lambdatest user name
LT_ACCESS_KEY = Your lambdatest access key

You can set the browser's capabilities to constant after you need to set the connection with the connect option.

const capabilities = {
    browserName: "Chrome", // Browsers allowed: `Chrome`, `MicrosoftEdge`, `pw-chromium`, `pw-firefox` and `pw-webkit`
    browserVersion: "latest",
    "LT:Options": {
      platform: "Windows 10",
      build: "Playwright Build",
      name: "Playwright Test",
      user: process.env.LT_USERNAME, 
      accessKey: process.env.LT_ACCESS_KEY, 
    },
  };

test('Should add item to cart', async({})=>{
   //Connect with the lambdatest playwright with the chrome in windows 10
   const browser = await chromium.connect(      `wss://cdp.lambdatest.com/playwright?capabilities=${encodeURIComponent(JSON.stringify(capabilities))}`)
    const page = await browser.newPage()
    await page.goto('https://www.saucedemo.com');
    //More code
    await browser.close()
})

After this, you can see the test with a video on your LambdaTest dashboard.

Another option is with a fixture file. You can use this option in Playwright to set up all the pages using POM (Page Object Model)

Fixture file:

import { test as base } from '@playwright/test';
import { SettingsPage } from './settings-page';

// Declare the types of your fixtures.
type MyFixtures = {
  settingsPage: SettingsPage;
};

// Extend base test by providing "settingsPage".
// This new "test" can be used in multiple test files, and each of them will get the fixtures.
export const test = base.extend<MyFixtures>({
  settingsPage: async ({ page }, use) => {
    await use(new SettingsPage(page));
  } 
})
//Export the expect to reuse in your test
export { expect } from '@playwright/test';

Now, you can use your test using a fixture in the import for the test.

import { test, expect } from './my-test';

test.beforeEach(async ({ settingsPage }) => {
  await settingsPage.switchToDarkMode();
});

You can check this video for a more detailed explanation of fixtures.

You can create a fixture to add the connection with lambdatest.

import { chromium, test as baseTest } from '@playwright/test';
import path from 'path';
import { LoginPage } from '../pages/SauceDemo/loginPage';

interface pages {
    loginPage: LoginPage
}

// LambdaTest capabilities
const capabilities = {
    browserName: 'Chrome', // Browsers allowed: `Chrome`, `MicrosoftEdge`, `pw-chromium`, `pw-firefox` and `pw-webkit`
    browserVersion: 'latest',
    'LT:Options': {
        platform: 'Windows 10',
        build: 'Playwright Test ',
        name: 'Playwright Test Lambda',
        user: process.env.LT_USERNAME,
        accessKey: process.env.LT_ACCESS_KEY,
        network: true,
        video: true,
        visual: true,
        console: true,
        tunnel: false, // Add tunnel configuration if testing locally hosted webpage
        tunnelName: '', // Optional
        geoLocation: '', // country code can be fetched from https://www.lambdatest.com/capabilities-generator/
    },
};

// Patching the capabilities dynamically according to the project name.
const modifyCapabilities = (configName: string, testName: string) => {
    const config = configName.split('@lambdatest')[0];
    const [browserName, browserVersion, platform] = config.split(':');
    capabilities.browserName = browserName
        ? browserName
        : capabilities.browserName;
    capabilities.browserVersion = browserVersion
        ? browserVersion
        : capabilities.browserVersion;
    capabilities['LT:Options']['platform'] = platform
        ? platform
        : capabilities['LT:Options']['platform'];
    capabilities['LT:Options']['name'] = testName;
};

const getErrorMessage = (obj, keys) =>
    keys.reduce(
        (obj, key) => (typeof obj == 'object' ? obj[key] : undefined),
        obj
    );

const testPages = baseTest.extend<pages>({

    page: async ({ }, use, testInfo) => {
        const fileName = testInfo.file.split(path.sep).pop();
        if (testInfo.project.name.match(/lambdatest/)) {
            modifyCapabilities(
                testInfo.project.name,
                `${testInfo.title} - ${fileName}`
            );
            const browser = await chromium.connect(`wss://cdp.lambdatest.com/playwright?capabilities=
        ${encodeURIComponent(JSON.stringify(capabilities))}`);
            const context = await browser.newContext(testInfo.project.use);
            const ltPage = await context.newPage();
            await use(ltPage);
            const testStatus = {
                action: 'setTestStatus',
                arguments: {
                    status: testInfo.status,
                    remark: getErrorMessage(testInfo, ['error', 'message']),
                },
            };
            // eslint-disable-next-line @typescript-eslint/no-empty-function
            await ltPage.evaluate(() => { },
                `lambdatest_action: ${JSON.stringify(testStatus)}`);
            await ltPage.close();
            await context.close();
            await browser.close();
        } else {
            const browser = await chromium.launch();
            const context = await browser.newContext();
            const page = await context.newPage();
            await use(page);
        }
    },
    loginPage: async ({ page }, use) => {
        await use(new LoginPage(page));
    }
});

export const test = testPages;

You can add your test with a suffix if you want to run only some test in lambdatest

loginLambdaTestFixture.spec.ts

import { test } from '../../fixtures/lambdaTestFixture';

// doesn't share the logged-in session
test.use({ storageState: { cookies: [], origins: [] } });

test.describe('Login', async () => {
    // eslint-disable-next-line playwright/expect-expect
    test('Login with valid user load inventory page', async ({ page, loginPage }) => {
        //ACT
        await loginPage.goTo();
        //For security is better add your user info in environment variables or some Key Value service 
        //ARRANGE
        await loginPage.loginWithUser(process.env.USER_NAME!, process.env.PASSWORD!);
        const expectedPage = loginPage.BASE_URL + '/inventory.html';
        //ASSERT
        loginPage.AssertEqual(expectedPage, page.url(), 'Check URL Page equal to: "' + expectedPage + '"');
    });
});

In the playwright.config.ts, you can add the browsers to connect with lambdatest

    projects: [
        {
            name: 'chrome:latest:MacOS Catalina@lambdatest',
            testMatch: /.*LambdaTestFixture.spec.ts/,
            use: {
                viewport: { width: 1920, height: 1080 },

            },
        },
        {
            name: 'chrome:latest:Windows 10@lambdatest',
            testMatch: /.*LambdaTestFixture.spec.ts/,
            use: {
                viewport: { width: 1280, height: 720 },

            },
        },

Too you can add a command in your package.json with the playwright version>=1.42.0 to run your test with these browsers:

"test:lt": "npx playwright test --project='*@lambdatest'",

Too you will receive an email with a weekly report of the execution of your tests:

And a pdf with the summary of your tests.

You can check this video with the complete explanation:

You can check the complete code in my GitHub framework boilerplate.

https://github.com/apis3445/PlaywrightFramework

Thanks for reading, and feel free to share or add suggestions for future topics in the comments.

QA tips by Abi

Discussion about this post