Merge pull request #25 from JeeveshJ7/main

SDK changes

package.json → hooks/package.json

@@ -2,18 +2,19 @@
   "dependencies": {
     "minimatch": "^3.0.5",
     "moment": "^2.29.4",
+    "playwright": "^1.35.1",
     "scroll-to-bottomjs": "^1.1.0",
-    "selenium-webdriver": "^3.6.0"
+    "selenium-webdriver": "^4.16.0"
   },
   "name": "nodejs-selenium-sample",
   "description": "![LambdaTest Logo](https://www.lambdatest.com/images/logo.svg)",
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
-    "start": "node ./tests/generalCases/index.js",
-    "test": "node ./tests/generalCases/test.js",
-    "multiple": "node ./tests/generalCases/multiple-urls/multiple-url-tests-sample.js",
-    "multiple-config": "node ./tests/generalCases/multiple-urls/parallel-config-sample.js"
+    "start": "node ./examples/index.js",
+    "test": "node ./examples/test.js",
+    "multiple": "node ./examples/multiple-urls/multiple-url-tests-sample.js",
+    "multiple-config": "node ./examples/multiple-urls/parallel-config-sample.js"
   },
   "repository": {
     "type": "git",
@@ -25,5 +26,8 @@
   "bugs": {
     "url": "https://github.com/LambdaTest/nodejs-selenium-sample/issues"
   },
-  "homepage": "https://github.com/LambdaTest/nodejs-selenium-sample#readme"
+  "homepage": "https://github.com/LambdaTest/nodejs-selenium-sample#readme",
+  "devDependencies": {
+    "@playwright/test": "^1.35.1"
+  }
 }

sdk/README.md

@@ -0,0 +1,174 @@
+# Integrating SmartUI SDK with Selenium(JS) tests
+
+Welcome to the world of simplified visual testing with the SmartUI SDK. 
+
+Integrating seamlessly into your existing Selenium testing suite, SmartUI SDK revolutionizes the way you approach visual regression testing. Our robust solution empowers you to effortlessly capture, compare, and analyze screenshots across a multitude of browsers and resolutions, ensuring comprehensive coverage and accuracy in your visual testing endeavors.
+
+## Pre-requisites for running tests through SmartUI SDK
+
+- Basic understanding of Command Line Interface and Selenium is required.
+- Login to [LambdaTest SmartUI](https://smartui.lambdatest.com/) with your credentials.
+
+The following steps will guide you in running your first Visual Regression test on LambdaTest platform using SmartUI Selenium SDK integration.
+
+## 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://smartui.lambdatest.com/)
+2. Click on the `new project` button
+3. Select the platform as <b>CLI</b> or <b>Web</b> for executing your `SDK` tests.
+4. Add name of the project, approvers for the changes found, tags for any filter or easy navigation.
+5. Click on the **Submit**.
+
+## Steps to run your first test
+
+Once you have created a SmartUI Project, you can generate screenshots by running automation scripts. Follow the below steps to successfully generate screenshots
+
+### **Step 1:** Create/Update your test
+
+You can clone the sample repository to run `LambdaTest` automation tests with `SmartUI` and use the `sdk.js` file present in the `sdk` folder.
+
+```bash
+git clone https://github.com/LambdaTest/smartui-node-sample
+```
+### **Step 2**: Install the Dependencies
+
+Install required NPM modules for `LambdaTest Smart UI Selenium SDK` in your **Frontend** project.
+
+```bash
+npm i @lambdatest/smartui-cli @lambdatest/selenium-driver selenium-webdriver
+```
+
+<b>To ensure seamless execution of ES6 modules within our repository, it is essential to configure the Node.js environment to recognize ES6 module syntax. This is accomplished by specifying the module type in your `package.json` file.</b>
+
+
+```bash
+"type": "module"
+```
+
+
+### **Step 3:** Configure your Project Token
+
+Setup your project token show in the **SmartUI** app after, creating your project.
+
+<Tabs className="docs__val" groupId="language">
+<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
+
+```bash
+export PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
+```
+
+</TabItem>
+<TabItem value="Windows" label="Windows - CMD">
+
+```bash
+set PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
+```
+
+</TabItem>
+<TabItem value="Powershell" label="Windows-PS">
+
+```bash
+$Env:PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
+```
+</TabItem>
+</Tabs>
+
+### **Step 4:** Create and Configure SmartUI Config
+
+You can now configure your project settings on using various available options to run your tests with the SmartUI integration. To generate the configuration file, please execute the following command:
+
+```bash
+smartui config:create smartui-web.json
+```
+
+Once, the configuration file will be created, you will be seeing the default configuration pre-filled in the configuration file:
+
+```json title="/smartui-sdk-project/smartui-web.json"
+{
+  "web": {
+    "browsers": [
+      "chrome", 
+      "firefox",
+      "safari",
+      "edge"
+    ],
+    "viewports": [
+      [
+        1920,
+        1080
+      ],
+      [
+        1366,
+        768
+      ],
+      [
+        360,
+        640
+      ]
+    ],
+    "waitForPageRender": 50000, 
+    "waitForTimeout": 1000
+
+  }
+}
+```
+
+#### Optional Keys in SmartUI configuration
+
+**waitForPageRender** - If one or more `URLs` in your script require a relatively higher amount of time to load, you may use the `waitForPageRender` key in the config file to make sure the screenshots are rendered correctly. Avoid using the same in case your websites render in less than 30 seconds as it might increase the execution time of your tests.
+
+
+**waitForTimeout** - If you are using any `async` components, you can add wait time for the page to load the DOM of your components. This can help avoid false-positive results for your tests. You can add the wait time in milliseconds, which might increase the execution time of your tests.
+:::
+
+### **Step 5:** Adding SmartUI function to take screenshot
+
+- You can incorporate SmartUI into your custom `Selenium` automation test (any platform) script by adding the `smartuiSnapshot` function in the required segment of selenium script of which we would like to take the screenshot, as shown below: 
+
+
+```js
+import  { Builder, By, Key, until } from 'selenium-webdriver';
+import { smartuiSnapshot } from '@lambdatest/selenium-driver';
+
+(async function example() {
+    let driver = await new Builder()
+        .forBrowser('chrome')
+        .build();
+
+    try {
+        await driver.get('<Required URL>'); //enter your desired URL here
+        await smartuiSnapshot(driver, '<Screenshot_Name>');
+        // Please specify your driver and the screenshot name in this function
+        // driver - selenium driver instance (required)
+        // Screenshot_Name - Name of the screenshot ; unique to each screenshot (required)
+        await driver.get('https://www.example.com');
+        await smartuiSnapshot(driver, '<Screenshot Name>');
+    } finally {
+        await driver.quit();
+    }
+})();
+
+
+```
+
+### **Step 6:** Execute the Tests on SmartUI Cloud
+
+Execute `visual regression tests` on SmartUI using the following commands
+
+```bash
+npx smartui exec node <fileName>.js
+```
+
+**You may use the `smartui --help` command in case you are facing issues during the execution of SmartUI commands in the CLI.
+**
+##  View SmartUI Results
+
+You have successfully integrated SmartUI SDK with your Selenium tests. Visit your SmartUI project to view builds and compare snapshots between different test runs.
+
+You can see the Smart UI dashboard to view the results. This will help you identify the mis-matches from the existing `Baseline` build and do the required visual testing.
+
+
+
+For additional information about SmartUI APIs please explore the documentation [here](https://www.lambdatest.com/support/api-doc/)

sdk/package.json

@@ -0,0 +1,18 @@
+{
+  "dependencies": {
+    "@lambdatest/selenium-driver": "^1.0.1",
+    "@lambdatest/smartui-cli": "^2.0.3",
+    "selenium-webdriver": "^4.16.0"
+  },
+  "type": "module",
+  "name": "sdk",
+  "version": "1.0.0",
+  "description": "",
+  "main": "sdk.js",
+  "scripts": {
+    "smartui-local": "smartui exec node sdkLocal.js",
+    "smartui-cloud": "smartui exec node sdkCloud.js"
+  },
+  "author": "",
+  "license": "ISC"
+}

sdk/sdkCloud.js

@@ -0,0 +1,40 @@
+import { Builder, By, Key, until } from "selenium-webdriver";
+import { smartuiSnapshot } from "@lambdatest/selenium-driver";
+
+// username: Username can be found at automation dashboard
+const USERNAME = process.env.LT_USERNAME || "<USERNAME>";
+
+// AccessKey:  AccessKey can be generated from automation dashboard or profile section
+const KEY = process.env.LT_ACCESS_KEY || "<ACCESS_KEY>";
+let capabilities = {
+  platform: "catalina",
+  browserName: "chrome",
+  version: "latest",
+  "LT:Options": {
+    username: USERNAME,
+    accessKey: KEY,
+    project: "<PROJECT_NAME>",
+    w3c: true,
+    name: "<TEST_NAME>", // name of the test
+    build: "<BUILD_NAME", // name of the build
+    visual: true,
+  },
+};
+
+(async function example() {
+  // Setup Input capabilities
+  var gridUrl =
+    "https://" + USERNAME + ":" + KEY + "@hub.lambdatest.com/wd/hub";
+
+  let driver = await new Builder()
+    .usingServer(gridUrl)
+    .withCapabilities(capabilities)
+    .build();
+  driver.manage().window().fullscreen();
+  try {
+    await driver.get("https://www.lambdatest.com/visual-regression-testing");
+    await smartuiSnapshot(driver, "LT-SmartUI");
+  } finally {
+    await driver.quit();
+  }
+})();

sdk/sdkLocal.js

@@ -0,0 +1,15 @@
+import { Builder, By, Key, until } from "selenium-webdriver";
+import { smartuiSnapshot } from "@lambdatest/selenium-driver";
+
+(async function example() {
+  let driver = await new Builder().forBrowser("chrome").build();
+
+  try {
+    await driver.get("https://www.lambdatest.com");
+    await smartuiSnapshot(driver, "Lambdatest");
+    await driver.get("https://www.pinterest.com/pin/112801165652823604/");
+    await smartuiSnapshot(driver, "NYC");
+  } finally {
+    await driver.quit();
+  }
+})();