Puppeteer - Test Execution Setup

Whenever you run a Puppeteer test, you must specify the operating system and the browser you wish to use. The TestMu AI Desired Capabilities Generator allows you to automatically create the capabilities class needed to run your Puppeteer automation scripts on TestMu AI.

In this guide, learn how to configure the desired capability for selecting browsers and OS, organzing tests, changing desktop resolution, and more for your Puppeteer tests.

Choosing Browser And OS

When you run Puppeteer End-to-End (E2E) testing on TestMu AI, you must tell the cloud machine which operating system and browser to use. Setting the right capabilities gives your scripts access to the browser, OS, resolution, and debugging logs each run needs. You do it by defining a capabilities object in your Puppeteer script and passing it to the CDP endpoint, so every test targets the exact environment you want.

The TestMu AI Capability Generator can auto-create the capabilities class for your Puppeteer scripts. The sections below cover selecting browsers and OS, organizing tests, changing desktop resolution, and enabling debugging logs.

Choosing the Browser and OS

To run a Puppeteer test on TestMu AI, define the browser, browser version, and platform in your automation script. The three capabilities below set the exact environment the test targets.

Key	Expected Values	Description	Example
browserName	Chrome, Edge	Specify the browser to test on	`const capability = {"browserName": "Chrome"}`
browserVersion	Chrome 83 & above, Edge 83 & above	Specify the browser version to test on	`const capability = {"browserVersion": "113.0"}`
platform	Windows: 11, 10, 8, 8.1, 7 macOS: Monterey, Big Sur, Catiline, Mojave	Specify the platform name	`const capability = { "LT:Options": {"platform": "Windows 10",}}`

Organizing Tests

You can name your test cases and categorize your builds by build, and name for easier analysis. You will need to use the name, and build capabilities to organize Puppeteer automated tests.

Key	Values	Description	Capability
build	Puppeteer Sample Build	Represent the build number for your test	`const capability = { "LT:Options": {"build": "<build_name>",}}`
name	Puppeteer Sample Test	Represents the name of a test	`const capability = { "LT:Options": {"name": "<test_name>",}}`
projectName	Example: My Test	Represent the name of your project	`const capability = { "LT:Options": {"projectName": "<project_name>",}}`
tags	["tag1", "tag2", "tag3"]	Group your Puppeteer tests	`const capability = {"LT:Options": { "tags": ["tag1", "tag2", "tag3"], }}`
buildTags	["build1", "build2", "build3"]	Group your Puppeteer builds	`const capability = {"LT:Options": { "buildTags": ["build1", "build2", "build3"] }}`

Shown below is the script that configure the build and name capabilities.

# add test code after initializing your browser
'use strict';
const { strict } = require('once');
const puppeteer = require('puppeteer');
const expect = require('chai').expect;

(async () => {    
    const capabilities = {
        'browserName': 'Chrome',
        'browserVersion': 'latest',
        'LT:Options': {
            'platform': 'Windows 10',
            'build': 'puppeteer-build-1',
            'name': 'My first Puppeteer test',
            'resolution':'1366x768',
            'user': process.env.LT_USERNAME || "LT_USERNAME",
            'accessKey': process.env.LT_ACCESS_KEY || "LT_ACCESS_KEY",
            'network': true
        }
   };
    
    try {
        const browser = await puppeteer.connect({
            browserWSEndpoint:
                `wss://cdp.lambdatest.com/puppeteer?capabilities=${encodeURIComponent(JSON.stringify(capabilities))}`,
        });

        const page = await browser.newPage();
        await page.setViewport({
            width: 1024,
            height: 768,
            deviceScaleFactor: 1,
          });
        console.log("Navigating to LambdaTest");
        await page.goto('https://www.lambdatest.com/');
        console.log("Navigating to Pricing");
        await page.goto('https://www.lambdatest.com/pricing');
        console.log("Navigating to Automation");
        await page.goto('https://www.lambdatest.com/automation-testing');
        console.log("Closing browser");
        await browser.close();

    } catch (e) {
        console.log("Error - ", e);
    }
})();

Getting Session Details

Each Puppeteer test generates a different log on TestMu AI. To get the information relevant to your test session, use the snippet provided below in your Puppeteer test scripts.

let response = await page.evaluate(_ => {}, `lambdatest_action: ${JSON.stringify({ action: 'getTestDetails' })}`)
console.log("Test details: ", JSON.parse(response).data);

Upon executing the script, you will get the details for the particular test session as a JSON response as shown below.

{
  data: {
    test_id: 'RWA9R-AC4V8-GJRET-YHBO2',
    build_id: 9415381,
    name: 'Puppeteer Sample Test',
    user_id: 1001150,
    username: 'newuser',
    test_type: 'puppeteer',
    platform: 'win10',
    browser: 'Chrome',
    browser_version: '107.0',
    status_ind: 'running',
    session_id: 'RWA9R-AC4V8-GJRET-YHBO2',
    build_name: 'Puppeteer Sample Build',
    create_timestamp: '2022-12-07 10:53:16',
    start_timestamp: '2022-12-07 10:53:16',
    remark: 'running',
    console_logs_url: 'https://api.lambdatest.com/automation/api/v1/sessions/RWA9R-AC4V8-GJRET-YHBO2/log/console',
    network_logs_url: 'https://api.lambdatest.com/automation/api/v1/sessions/RWA9R-AC4V8-GJRET-YHBO2/log/network',
    command_logs_url: 'https://api.lambdatest.com/automation/api/v1/sessions/RWA9R-AC4V8-GJRET-YHBO2/log/command',
    video_url: 'https://automation.lambdatest.com/public/video?testID=RWA9R-AC4V8-GJRET-YHBO2&auth=50471585dd55293d204fe87f63400f5f',
    screenshot_url: 'https://video-bundler.lambdatest.com/RWA9R-AC4V8-GJRET-YHBO2/screenshots.zip?orgId=588659&createTimestamp=1670410396&testCreateTimestamp=2022-12-07%2010:53:16'
  },
  message: 'Retrieve session was successful',
  status: 'success'
}

Changing Desktop Resolutions

Puppeteer tests run with a 1920x1080 resolution by default for desktop browsers. With our resolution capability, you can set a different screen resolution for your tests.

Capability	Description	Expected Values	Example
resolution	Specifying your desktop resolution before initiating the test	String, Default value: 1920x1080 Windows 11 & 10: `1024x768, 1280x800, 1280x1024, 1366x768, 1440x900, 1680x1050, 1600x1200, 1920x1200, 1920x1080 and 2048x1536` macOS: `1024x768, 1280x960, 1280x1024, 1600x1200 and 1920x1080`	const caps = { 'resolution': '1024x768', };

Changing Browser Window Size

If you wish to modify the browser window size during your Puppeteer test, you can do it as shown in the code below.

await page.setViewport({
            width: 1024,
            height: 768,
            deviceScaleFactor: 1,
          });

Naming your Project

You can give your project a name of your choice by using the projectName key.

Key	Values	Description	Desired Capability
projectName	Example: My Test	Represent the name of your project	`const capabilities = { 'LT:Options': {'projectName': 'My Test',}}`

Debugging Tests

By specifying the capabilities for the debugging tools, you can debug and fix your failed Puppeteer test sessions using network logs, console logs, and video logs.

Key	Values	Description	Desired Capability
network	true/false	Enable network logs	`const capabilities = { 'LT:Options': {'network': true,}}`
console	true/false	Enable browser console logs	`const capabilities = { 'LT:Options': {'console': true,}}`
video	true/false	Enable Video recording of the entire screen	`const capabilities = { 'LT:Options': {'video': true,}}`

Mark Tests As Passed Or Failed

While running Puppeteer tests on the TestMu AI platform, you may come across a scenario in which a test that failed in your local instance turns up to be successful on TestMu AI. For verifying expected behavior, it is critical to identify automated tests as Passed or Failed based on your testing requirements.

By default, the Status of each test that runs successfully is marked as Completed, and if there are any issues, the Status is marked as Failed.

Shown below is syntax how to mark Puppeteer tests as Passed or Failed.

To mark test status as passed.

await page.evaluate(_ => {}, `lambdatest_action: ${JSON.stringify({ action: 'setTestStatus', arguments: { status:'passed', remark: 'Title matched' } })}`)

To mark test status as failed.

await page.evaluate(_ => {}, `lambdatest_action: ${JSON.stringify({ action: 'setTestStatus', arguments: { status:'failed', remark: 'Title not matched' } })}`)