](https://accounts.lambdatest.com/register?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample)
-
-## We are here to help you :headphones:
+ try {
+ await driver.get('Smart UI Testing With Selenium Node.JS
+ +
+
+
++ Blog + ⋅ + Docs + ⋅ + Learning Hub + ⋅ + Newsletter + ⋅ + Certifications + ⋅ + YouTube +
+ + + + +*Learn the how to get started with Smart UI testing with Selenium Node.JS on the LambdaTest platform.* + +[](https://accounts.lambdatest.com/register?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample)
+
+
+## Table of Contents:
+
+* [Pre-requisites](#pre-requisites)
+* [Running Your First Selenium Node JS Test](#running-your-first-selenium-node-js-test)
+* [Examples For Different Use Cases](#examples-for-different-use-cases)
+* [Configuring The Test Environment](#configuring-the-test-environment)
+* [Setting Up GitHub App Integration With SmartUI](#setting-up-github-app-integration-with-smartui)
+
+## Pre-requisites
+
+1. To get started, you would require the Node version >=14.
+ ```
+ node --version
+ ```
+
+2. You can switch the Node version by running the below command:
+ ```
+ nvm install 12.0.0
+ node --version
+ ```
+
+3. Create a `New Project` with the SmartUI Web Application.
+
+## Configuring The Test Environment
+
+Before executing your NodeJs test, you need to configure the `config.json` file. You can find the `config.json` file [here](https://github.com/keys-github/smartui-node-sample/blob/main/config.json). To add capabilities, visit our [capabilities generator](https://www.lambdatest.com/capabilities-generator/).
+
+## Running Your First Selenium Node JS Test
+
+1. In order to run your Smart UI tests with Selenium Python, you will need to set your LambdaTest username and access key in the environment variables. Click the **Access Key** button at the top-right of the Automation Dashboard to access it.
+
+
+
+**Windows**
+
+```js
+set LT_USERNAME="YOUR_USERNAME"
+set LT_ACCESS_KEY="YOUR ACCESS KEY"
+```
+
+**macOS/Linux**
+
+```js
+export LT_USERNAME="YOUR_USERNAME"
+export LT_ACCESS_KEY="YOUR ACCESS KEY"
+```
+
+2. To create a `New Project` using the SmartUI Web Application, click the **New Project** button in the top-right corner of your dashboard.
+
+
+
+3. Fill in the specifications such as **Platform**, **Project Name**, **Approvers**, and **Tags** as per your requirement and click **Create Project**.
+
+
+
+3. Clone the `smartui-node-sample` Repo.
+ ```
+ git clone https://github.com/LambdaTest/smartui-node-sample
+ ```
+
+4. Install the Dependencies.
+ ```
+ npm i
+ ```
+
+
+## Examples For Different Use Cases
+
+We have many different examples revolving around different use cases. They are as follows:
+
+### General Capability Change Test Cases
+
+ * `index.js` - This Test is an example of all the **advanced funtionalities** possible with Smart UI.
+
+ ```
+ npm start
+ ```
+ * `general.js` - This Test is an example of all the **general test**
+
+ ```
+ npm start general
+ ```
+
+ * `errorSetting.js` - This Test is an example of how **error settings** can be modified.
+
+ ```
+ npm start error
+ ```
+
+ * `transparency.js` - This Test is to show how to **alter the opacity** of the comparison screenshot.
+
+ ```
+ npm start transparency
+ ```
+
+ * `BoundingBoxes.js` - This Test shows an example of comparing only a **certain area** in the screenshot.
+
+ ```
+ npm start boundingBoxes
+ ```
+
+ * `ignoredBoxes.js` - This test is for **excluding certain areas** in the screenshot for comparison.
+
+ ```
+ npm start ignoredBoxes
+ ```
+
+ * `ignoreAreasColoredWith.js` - This test is for **removing the colored content** from the comparison.
+
+ ```
+ npm start ignoreAreasColoredWith
+ ```
+
+### Execute Tests on Multiple URLs
+
+To get started, first configure the `url.json` with the help of the code given below.
+
+```bash
+[
+ {
+ "screenshotName": "Lambdatest Landing Page",
+ "url": "https://lambdatest.com"
+ },
+ {
+ "screenshotName": "Amazon Home Page",
+ "url": "https://amazon.com"
+ }
+]
+```
+
+Run the following command to execute tests on multiple URLs.
+
+```bash
+npm run multiple
+```
+
+Given below is the multiple URL tests sample.
+
+```bash
+const webdriver = require("selenium-webdriver");
+const By = webdriver.By;
+const moment = require("moment");
+const automationConfig = require("./config.json");
+const smartUITests = require("./urls.json");
+
+// username: Username can be found at automation dashboard
+const USERNAME = process.env.LT_USERNAME || "](https://accounts.lambdatest.com/register?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample)
+
+## We are here to help you :headphones:
+
+* Got a query? we are available 24x7 to help. [Contact Us](mailto:support@lambdatest.com)
+* For more info, visit - [LambdaTest](https://www.lambdatest.com/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample)
diff --git a/config.json b/hooks/config.json
similarity index 100%
rename from config.json
rename to hooks/config.json
diff --git a/tests/generalCases/boundingBoxes.js b/hooks/examples/boundingBoxes.js
similarity index 100%
rename from tests/generalCases/boundingBoxes.js
rename to hooks/examples/boundingBoxes.js
diff --git a/tests/generalCases/custom-resolutions.js b/hooks/examples/custom-resolutions.js
similarity index 100%
rename from tests/generalCases/custom-resolutions.js
rename to hooks/examples/custom-resolutions.js
diff --git a/tests/generalCases/errorSetting.js b/hooks/examples/errorSetting.js
similarity index 100%
rename from tests/generalCases/errorSetting.js
rename to hooks/examples/errorSetting.js
diff --git a/tests/generalCases/general.js b/hooks/examples/general.js
similarity index 100%
rename from tests/generalCases/general.js
rename to hooks/examples/general.js
diff --git a/tests/generalCases/helper.js b/hooks/examples/helper.js
similarity index 100%
rename from tests/generalCases/helper.js
rename to hooks/examples/helper.js
diff --git a/tests/generalCases/ignoreAreasColoredWith.js b/hooks/examples/ignoreAreasColoredWith.js
similarity index 100%
rename from tests/generalCases/ignoreAreasColoredWith.js
rename to hooks/examples/ignoreAreasColoredWith.js
diff --git a/tests/generalCases/ignoredBoxes.js b/hooks/examples/ignoredBoxes.js
similarity index 100%
rename from tests/generalCases/ignoredBoxes.js
rename to hooks/examples/ignoredBoxes.js
diff --git a/tests/generalCases/index.js b/hooks/examples/index.js
similarity index 100%
rename from tests/generalCases/index.js
rename to hooks/examples/index.js
diff --git a/tests/generalCases/multiple-urls/config.json b/hooks/examples/multiple-urls/config.json
similarity index 100%
rename from tests/generalCases/multiple-urls/config.json
rename to hooks/examples/multiple-urls/config.json
diff --git a/tests/generalCases/multiple-urls/multiple-url-tests-sample.js b/hooks/examples/multiple-urls/multiple-url-tests-sample.js
similarity index 100%
rename from tests/generalCases/multiple-urls/multiple-url-tests-sample.js
rename to hooks/examples/multiple-urls/multiple-url-tests-sample.js
diff --git a/tests/generalCases/multiple-urls/parallel-config-sample.js b/hooks/examples/multiple-urls/parallel-config-sample.js
similarity index 100%
rename from tests/generalCases/multiple-urls/parallel-config-sample.js
rename to hooks/examples/multiple-urls/parallel-config-sample.js
diff --git a/tests/generalCases/multiple-urls/parallel-config.json b/hooks/examples/multiple-urls/parallel-config.json
similarity index 100%
rename from tests/generalCases/multiple-urls/parallel-config.json
rename to hooks/examples/multiple-urls/parallel-config.json
diff --git a/tests/generalCases/multiple-urls/urls.json b/hooks/examples/multiple-urls/urls.json
similarity index 100%
rename from tests/generalCases/multiple-urls/urls.json
rename to hooks/examples/multiple-urls/urls.json
diff --git a/tests/generalCases/mutiple-url-tests.js b/hooks/examples/mutiple-url-tests.js
similarity index 100%
rename from tests/generalCases/mutiple-url-tests.js
rename to hooks/examples/mutiple-url-tests.js
diff --git a/tests/generalCases/test.js b/hooks/examples/test.js
similarity index 100%
rename from tests/generalCases/test.js
rename to hooks/examples/test.js
diff --git a/tests/generalCases/transparency.js b/hooks/examples/transparency.js
similarity index 100%
rename from tests/generalCases/transparency.js
rename to hooks/examples/transparency.js
diff --git a/lazyLoadingImages.js b/hooks/lazyLoadingImages.js
similarity index 100%
rename from lazyLoadingImages.js
rename to hooks/lazyLoadingImages.js
diff --git a/package-lock.json b/hooks/package-lock.json
similarity index 100%
rename from package-lock.json
rename to hooks/package-lock.json
diff --git a/package.json b/hooks/package.json
similarity index 62%
rename from package.json
rename to hooks/package.json
index cca5bf3..15d8554 100644
--- a/package.json
+++ b/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": "",
"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"
+ }
}
diff --git a/util/helpLogger.js b/hooks/util/helpLogger.js
similarity index 100%
rename from util/helpLogger.js
rename to hooks/util/helpLogger.js
diff --git a/util/validCommands.js b/hooks/util/validCommands.js
similarity index 100%
rename from util/validCommands.js
rename to hooks/util/validCommands.js
diff --git a/sdk/README.md b/sdk/README.md
new file mode 100644
index 0000000..88f239e
--- /dev/null
+++ b/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 CLI or Web 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
+```
+
+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.
+
+
+```bash
+"type": "module"
+```
+
+
+### **Step 3:** Configure your Project Token
+
+Setup your project token show in the **SmartUI** app after, creating your project.
+
+