Skip to content

Commit 2c39059

Browse files
RushilK7RushilK7
committed
Restructure README to 4-section format with hooks documentation intact
1 parent c658d37 commit 2c39059

File tree

1 file changed

+126
-115
lines changed

1 file changed

+126
-115
lines changed

‎README.md‎

Lines changed: 126 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,171 +1,182 @@
1-
<h1>Smart UI Testing With Selenium Node.JS</h1>
1+
# SmartUI SDK Sample for Selenium JavaScript
22

3-
<img height="400" src="https://user-images.githubusercontent.com/126776938/232535511-8d51cf1b-1a33-48fc-825c-b13e7a9ec388.png">
3+
Welcome to the SmartUI SDK sample for Selenium JavaScript. This repository demonstrates how to integrate SmartUI visual regression testing with Selenium JavaScript.
44

5+
## Repository Structure
56

6-
<p align="center">
7-
<a href="https://www.lambdatest.com/blog/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample" target="_bank">Blog</a>
8-
&nbsp; &#8901; &nbsp;
9-
<a href="https://www.lambdatest.com/support/docs/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample" target="_bank">Docs</a>
10-
&nbsp; &#8901; &nbsp;
11-
<a href="https://www.lambdatest.com/learning-hub/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample" target="_bank">Learning Hub</a>
12-
&nbsp; &#8901; &nbsp;
13-
<a href="https://www.lambdatest.com/newsletter/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample" target="_bank">Newsletter</a>
14-
&nbsp; &#8901; &nbsp;
15-
<a href="https://www.lambdatest.com/certifications/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample" target="_bank">Certifications</a>
16-
&nbsp; &#8901; &nbsp;
17-
<a href="https://www.youtube.com/c/LambdaTest" target="_bank">YouTube</a>
18-
</p>
19-
&emsp;
20-
&emsp;
21-
&emsp;
7+
```
8+
smartui-node-sample/
9+
├── sdk/
10+
│ ├── sdkCloud.js # Cloud test
11+
│ ├── sdkLocal.js # Local test
12+
│ └── smartui-web.json # SmartUI config (create with npx smartui config:create)
13+
└── hooks/ # Hooks integration examples
14+
└── examples/ # Hooks examples
15+
```
2216

23-
*Learn the how to get started with Smart UI testing with Selenium Node.JS on the LambdaTest platform.*
17+
## 1. Prerequisites and Environment Setup
2418

19+
### Prerequisites
2520

26-
[<img height="58" width="200" src="https://user-images.githubusercontent.com/70570645/171866795-52c11b49-0728-4229-b073-4b704209ddde.png">](https://accounts.lambdatest.com/register?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample)
21+
- Node.js installed
22+
- LambdaTest account credentials (for Cloud tests)
23+
- Chrome browser (for Local tests)
2724

25+
### Environment Setup
2826

29-
## Getting Started with Smart UI Testing
27+
**For Cloud:**
28+
```bash
29+
export LT_USERNAME='your_username'
30+
export LT_ACCESS_KEY='your_access_key'
31+
export PROJECT_TOKEN='your_project_token'
32+
```
3033

31-
Smart UI testing is an integral part of ensuring visual consistency across different environments for your web application. Using the LambdaTest platform with Selenium and Node.js, this process becomes intuitive and efficient.
34+
**For Local:**
35+
```bash
36+
export PROJECT_TOKEN='your_project_token'
37+
```
3238

33-
### Pre-Requisites:
39+
## 2. Initial Setup and Dependencies
3440

35-
To execute the tests, your need to login to your lambdatest account and from the `Sidebar` you can find the `Username` and `Access Key` information which needs to be added to your environment variables:
41+
### Clone the Repository
3642

37-
For MacOS/Linux:
43+
```bash
44+
git clone https://github.com/LambdaTest/smartui-node-sample
45+
cd smartui-node-sample/sdk
46+
```
47+
48+
### Install Dependencies
49+
50+
Install the required dependencies:
3851

3952
```bash
40-
export LT_USERNAME="<Your Username>"
41-
export LT_ACCESS_KEY="<Your Access Key>"
53+
npm i @lambdatest/smartui-cli @lambdatest/selenium-driver selenium-webdriver
4254
```
4355

44-
For Windows CMD
56+
**Dependencies included:**
57+
- `@lambdatest/smartui-cli` - SmartUI CLI
58+
- `@lambdatest/selenium-driver` - SmartUI SDK for Selenium JavaScript
59+
- `selenium-webdriver` - Selenium WebDriver
60+
61+
**Note**: To ensure seamless execution of ES6 modules, add `"type": "module"` to your `package.json` file.
62+
63+
### Create SmartUI Configuration
4564

4665
```bash
47-
set LT_USERNAME="<Your Username>"
48-
set LT_ACCESS_KEY="<Your Access Key>"
66+
npx smartui config:create smartui-web.json
67+
```
68+
69+
## 3. Steps to Integrate Screenshot Commands into Codebase
70+
71+
The SmartUI screenshot function is already implemented in the repository.
72+
73+
**Cloud Test** (`sdk/sdkCloud.js`):
74+
```javascript
75+
import { smartuiSnapshot } from '@lambdatest/selenium-driver';
76+
77+
await driver.get('https://www.lambdatest.com');
78+
await smartuiSnapshot(driver, "screenshot");
4979
```
5080

51-
For Windows PowerShell
81+
**Local Test** (`sdk/sdkLocal.js`):
82+
```javascript
83+
import { smartuiSnapshot } from '@lambdatest/selenium-driver';
84+
85+
await driver.get('https://www.lambdatest.com');
86+
await smartuiSnapshot(driver, "screenshot");
87+
```
88+
89+
**Note**: The code is already configured and ready to use. You can modify the URL and screenshot name if needed.
90+
91+
## 4. Execution and Commands
92+
93+
### Local Execution
5294

5395
```bash
54-
$env:LT_USERNAME="<Your Username>"
55-
$env:LT_ACCESS_KEY="<Your Access Key>"
96+
npx smartui exec node sdkLocal.js
5697
```
5798

58-
Now, navigate to `SmartUI` section from the sidebar and create a new project with the `project type` as the following:
99+
### Cloud Execution
59100

60-
- **Web** - For running the tests using `hooks` within the `selenium/cypress/playwright` functional tests.
61-
- **CLI** - For running your `SDK` execution for DOM capture and render on multiple browsers and viewports for comparison.
101+
```bash
102+
npx smartui exec node sdkCloud.js
103+
```
104+
105+
## Testing with LambdaTest Hooks
106+
107+
This repository also includes examples for using SmartUI with LambdaTest Hooks integration.
108+
109+
### Hooks Integration
62110

63-
### Features
111+
**Location:** See the `hooks` folder, where you can see all the `examples` scripts to setup your suite or run the demo.
64112

65-
#### LT-Hooks Integration
66-
- **Location:** See the `hooks` folder, where you can see all the `examples` scripts to setup your suite or run the demo.
67-
- **Purpose:** Enhance visual regression capabilities in your LambdaTest web automation tests.
68-
- **Benefits:** Increase efficiency with advanced testing features with visual regression testing.
69-
- **Documentation:** [LambdaTest Selenium Visual Regression Documentation](https://www.lambdatest.com/support/docs/selenium-visual-regression/).
70-
##### **Steps:**
71-
- Install the dependencies.
113+
**Purpose:** Enhance visual regression capabilities in your LambdaTest web automation tests.
114+
115+
**Documentation:** [LambdaTest Selenium Visual Regression Documentation](https://www.lambdatest.com/support/docs/selenium-visual-regression/).
116+
117+
### Hooks Setup Steps
118+
119+
1. Install the dependencies:
72120
```bash
73121
cd hooks
74122
npm i
75123
```
76-
- Configure the capabilities (SmartUI Project Name and other SmartUI options) in .examples\test.js
124+
125+
2. Configure the capabilities (SmartUI Project Name and other SmartUI options) in `examples/test.js`:
77126
```javascript
78127
let capabilities = {
79-
platform: "Windows 10", // Configure your OS for Selenium test
80-
browserName: "chrome", // Configure your Browser for Selenium test
81-
version: "latest", // Configure your Browser Version for Selenium test
82-
visual: true, // Configure your Capture screenshot for Selenium test
83-
name: "test session", // name of the test for Selenium
84-
build: "Automation Build", // name of the build for Selenium
85-
"smartUI.project": "<Your Project Name>", // Replace the name of project with the new project name
86-
"smartUI.build": "<Your Build Name>", // Replace the name of Build with the new Build name
87-
"smartUI.baseline": false, // Enable if you want to update to a new baseline build
88-
128+
platform: "Windows 10",
129+
browserName: "chrome",
130+
version: "latest",
131+
visual: true,
132+
name: "test session",
133+
build: "Automation Build",
134+
"smartUI.project": "<Your Project Name>",
135+
"smartUI.build": "<Your Build Name>",
136+
"smartUI.baseline": false
89137
};
90138
```
91-
- Add the Screenshot hook in .examples\test.js
92-
```js
139+
140+
3. Add the Screenshot hook in `examples/test.js`:
141+
```javascript
93142
let config = {
94143
screenshotName: '<Name of your screenshot>'
95144
};
96145
await driver.executeScript("smartui.takeScreenshot", config);
97146
```
98-
- Run the script
99-
```
100-
node .examples\test.js
101-
```
102-
103-
104-
#### SmartUI SDK Utilization
105-
- **Location:** Check out the `sdk` folder, and setup the environment for running the tests.
106-
- **Purpose:** Use the SmartUI SDK for comprehensive visual testing in both local and remote automation tests environments.
107-
- **Advantages:** Ensure consistent DOM capturing and rendering across various browsers and resolutions.
108-
- **More Information:** [SmartUI Selenium JavaScript SDK Documentation](https://www.lambdatest.com/support/docs/smartui-selenium-js-sdk/).
109147

110-
##### Steps:
111-
- Install the dependencies
148+
4. Run the script:
112149
```bash
113-
cd sdk
114-
npm i @lambdatest/smartui-cli @lambdatest/selenium-driver selenium-webdriver
150+
node examples/test.js
115151
```
116-
- Configure your Project Token
117152

118-
Setup your project token show in the **SmartUI** app after, creating your project.
153+
## Test Files
119154

120-
<Tabs className="docs__val" groupId="language">
121-
<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
155+
### Cloud Test (`sdk/sdkCloud.js`)
122156

123-
```bash
124-
export PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
125-
```
157+
- Connects to LambdaTest Cloud using Selenium Remote WebDriver
158+
- Reads credentials from environment variables (`LT_USERNAME`, `LT_ACCESS_KEY`)
159+
- Takes screenshot with name: `screenshot`
126160

127-
</TabItem>
128-
<TabItem value="Windows" label="Windows - CMD">
161+
### Local Test (`sdk/sdkLocal.js`)
129162

130-
```bash
131-
set PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
132-
```
163+
- Runs Selenium locally using Chrome
164+
- Requires Chrome browser installed
165+
- Takes screenshot with name: `screenshot`
166+
167+
## Configuration
133168

134-
</TabItem>
135-
<TabItem value="Powershell" label="Windows-PS">
169+
### SmartUI Config (`smartui-web.json`)
136170

171+
Create the SmartUI configuration file using:
137172
```bash
138-
$Env:PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
173+
npx smartui config:create smartui-web.json
139174
```
140-
</TabItem>
141-
</Tabs>
142-
143-
- Add the SmartUI function to take screenshot to `sdkLocal.js` file
144-
```js
145-
import { Builder, By, Key, until } from 'selenium-webdriver';
146-
import { smartuiSnapshot } from '@lambdatest/selenium-driver';
147175

148-
(async function example() {
149-
let driver = await new Builder()
150-
.forBrowser('chrome')
151-
.build();
176+
## View Results
152177

153-
try {
154-
await driver.get('<Required URL>'); //enter your desired URL here
155-
await smartuiSnapshot(driver, '<Screenshot_Name>');
156-
} finally {
157-
await driver.quit();
158-
}
159-
})();
160-
```
161-
- Execute the Tests on SmartUI Cloud
178+
After running the tests, visit your SmartUI project dashboard to view the captured screenshots and compare them with baseline builds.
162179

163-
**Local Execution:**
164-
```bash
165-
npx smartui exec node sdkLocal.js
166-
```
180+
## More Information
167181

168-
**Cloud Execution:**
169-
```bash
170-
npx smartui exec node sdkCloud.js
171-
```
182+
For detailed onboarding instructions, see the [SmartUI Selenium JavaScript Onboarding Guide](https://www.lambdatest.com/support/docs/smartui-onboarding-selenium-js/).

0 commit comments

Comments
 (0)