# Getting started with SmartUI using Puppeteer

> For the full site index for AI agents, see [llms.txt](https://www.testmuai.com/support/docs/llms.txt).

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](https://www.testmuai.com/login/?redirectTo=https://smartui.lambdatest.com/) 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.

```bash
export LT_USERNAME="YOUR_USERNAME"
```

```bash
set LT_USERNAME="YOUR_USERNAME"
```

```powershell
$env:LT_USERNAME="YOUR_USERNAME"
```

The following steps will guide you in running your first Visual Regression test on TestMu AI 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](https://www.testmuai.com/login/?redirectTo=https://smartui.lambdatest.com/)
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`).

```bash
git clone https://github.com/LambdaTest/puppeteer-sample.git
```

2. Install the node modules using the command:

```bash
npm i
```

3. Set up the TestMu AI credentials by following the instructions mentioned in the `README.md` file.
4. Edit the required capabilities in your test file `navigation.js`.

```javascript title="Add the following code snippet to run SmartUI with Puppeteer in ./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`

```bash
node navigation.js
```

- You can check the executed builds over at [TestMu AI SmartUI](https://www.testmuai.com/login/?redirectTo=https://smartui.lambdatest.com/).

For additional information about Puppteer framework please explore the documentation [here](/docs/puppeteer-testing/)

## 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](/support/docs/smart-ui-build-options/).

  **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, see [Handling Dynamic Data with DOM Configuration](/support/docs/html-dom-smartui-options).