Skip to content

Files

Latest commit

 

History

History
184 lines (145 loc) · 7.01 KB

smartui-puppeteer-setup.md

File metadata and controls

184 lines (145 loc) · 7.01 KB
id title sidebar_label description keywords url site_name slug
puppeteer-visual-regression
Getting started with Smart UI using Puppeteer
Puppeteer
Learn Puppeteer Visual Regression Set up Smart UI, run tests on LambdaTest Cloud across 40+ browsers. Step-by-step guide for seamless testing.
Visual Regression
Visual Regression Testing Guide
Visual Regression Test Automation
Visual Regression Automation Testing
Running Visual Regression Tests
Visual Regression Testing Online
Run Visual Regression
Visual Regression Run Specific Test
Visual Regression Testing Environment
How to Run Visual Regression Tests
LambdaTest
puppeteer-visual-regression/

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

This documentation will act as your step-by-step guide in to perform Puppteer test with SmartUI.

Prerequisites for running SmartUI with Puppeteer

  • Basic understanding of Puppeteer is required.
  • Go to SmartUI and login along with your credentials.
  • Copy LT_USERNAME and LT_ACCESS_KEY credentials from Access Key button on the top right of the dashboard.
export LT_USERNAME="YOUR_USERNAME"
export LT_ACCESS_KEY="YOUR ACCESS KEY"
set LT_USERNAME="YOUR_USERNAME"
set LT_ACCESS_KEY="YOUR ACCESS KEY"

The following steps will guide you in running your first Visual Regression test on LambdaTest platform -

Step 1: Create a SmartUI Project

The first step is to create a project with the application in which we will combine all your builds run on the project. To create a SmartUI Project, follow these steps:

  1. Go to Projects page
  2. Click on the new project button
  3. Select the platform as Web for executing your Puppeteer tests.
  4. Add name of the project, approvers for the changes found, tags for any filter or easy navigation.
  5. Click on the Submit.

Step 2: Configure your test with Puppeteer Desired Capabilities

Once you have created a SmartUI Project, you can generate screenshots by running automation scripts. Follow the below steps to successfully generate screenshots -

  1. Please clone the following sample Github repo (https://github.com/LambdaTest/puppeteer-sample).
git clone https://github.com/LambdaTest/puppeteer-sample.git
  1. Install the node modules using the command:
npm i
  1. Set up the LambdaTest credentials by following the instructions mentioned in the README.md file.
  2. Edit the required capabilities in your test file navigation.js.
"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 || "Your Username",
      accessKey: process.env.LT_ACCESS_KEY || "Your Access Key",
      network: true,
      smartUIProjectName: "Testing Puppeteer Connection", // Add your SmartUI Project Name here
      smartUIBuildName: "My First Build", // Replace with your build name of choice here
      // smartUIBaseline: false, // (Optional) To set your current build as baseline to compare
    },
  };

  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/");
    await page.evaluate((_) => {},
    `lambdatest_action: ${JSON.stringify({ action: "smartui.takeScreenshot", arguments: { fullPage: true, screenshotName: "Navigating to LambdaTest" } })}`);
    console.log("Navigating to Pricing");
    await page.goto("https://www.lambdatest.com/pricing");
    await page.evaluate((_) => {},
    `lambdatest_action: ${JSON.stringify({ action: "smartui.takeScreenshot", arguments: { fullPage: true, screenshotName: "Navigating to Pricing" } })}`);
    console.log("Navigating to Automation");

    await page.goto("https://www.lambdatest.com/automation-testing");
    await page.evaluate((_) => {},
    `lambdatest_action: ${JSON.stringify({ action: "smartui.takeScreenshot", arguments: { fullPage: true, screenshotName: "Navigating to Automation" } })}`);
    console.log("Closing browser");
    await browser.close();
  } catch (e) {
    console.log("Error - ", e);
  }
})();

Step 3: Executing the SmartUI Test Suite on Cloud

Execute the test using the following command to run the test suite using puppeteer

node navigation.js

For additional information about Puppteer framework please explore the documentation here

Advanced Options for Screenshot Comparison

Build Configuration - If you have multiple screenshots running the same test suite and want to run the comparison for the same test suite, want to add a build as a baseline from your test suite or need to access more SmartUI Build Config Options, click here.

Handling Dynamic Data - In case if you have any dynamic elements that are not in the same position across test runs, you can ignore or select a specific area to be removed from the comparison. For accessing such HTML DOM Config and Options, click here.