Skip to content

Commit 8a593d2

Browse files
sushobhit-ltsushobhit-lt
authored
Merge pull request #35 from keys-github/patch-1
Updated StoryBook READ.ME
2 parents 867e8e1 + f0298ec commit 8a593d2

File tree

1 file changed

+138
-31
lines changed

1 file changed

+138
-31
lines changed

‎README.md

+138-31
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,170 @@
1-
# LambdaTest SmartUI CLI
2-
The @lambdatest/smartui package is LambdaTest's command-line interface (CLI) aimed to help you run your SmartUI tests on LambdaTest platform.
1+
Smart UI Testing With StoryBook ![Storybook](https://img.shields.io/badge/-Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)
32

3+
<img height="400" src="https://user-images.githubusercontent.com/126776938/232535120-b4856bdd-c869-4bcd-bcdb-29a83e30505c.png">
44

5-
# Installation
65

7-
### Prerequisites
8-
1. Node version >=14.15.0 required
9-
```
10-
node --version
11-
```
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;
1222

13-
2. Storybook version >=6.4 required. Also, add the following to your `.storybook/main.js`. You can read more about this here [Storybook Feature flags](https://storybook.js.org/docs/react/configure/overview#feature-flags)
14-
```js
15-
module.exports = {
16-
features: {
17-
buildStoriesJson: true
18-
}
19-
}
20-
```
23+
*Using the LambdaTest platform, you can perform regression testing in just one click and find Visual UI Regression bugs easily with the help of Smart Testing. The @lambdatest/smartui package is LambdaTest's command-line interface (CLI) aimed to help you run your SmartUI tests on LambdaTest platform.*
2124

22-
### Install package using npm
23-
```bash
24-
npm install -g @lambdatest/smartui-storybook
25+
*Learn the how to get started with Smart UI testing with StoryBook on the LambdaTest platform.*
26+
27+
[<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)
28+
29+
30+
## Table of Contents:
31+
32+
* [Pre-requisites](#pre-requisites)
33+
* [Steps To Create A SmartUI Project](#steps-to-create-a-smartui-project)
34+
* [Running Your First StoryBook SmartUI Test](#running-your-first-storybook-smartui-test)
35+
36+
37+
## Pre-requisites
38+
39+
1. Basic understanding of [StoryBook](https://storybook.js.org/docs/react/get-started/introduction) is required.
40+
2. Node version installed should be higher than `14.15.0.` Click [here](https://nodejs.org/en/download/releases/) to know more.
41+
3. StoryBook version installed should be higher than `6.4.0.` Click [here](https://github.com/storybookjs/storybook/releases) to know more.
42+
4. Login to [LambdaTest SmartUI](https://smartui.lambdatest.com/) with your credentials.
43+
44+
## Steps To Create A SmartUI Project
45+
46+
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:
47+
48+
1. Go to the [Projects page](https://smartui.lambdatest.com/).
49+
2. Click on the `new project` button.
50+
3. Select the platform as **Web** for executing your `StoryBook` tests.
51+
4. Add name of the project, approvers for the changes found, tags for any filter or easy navigation.
52+
5. Click on the **Submit**.
53+
54+
## Running Your First StoryBook SmartUI Test
55+
56+
### Step 1: Install the Dependencies
57+
58+
Install required NPM modules for `LambdaTest Smart UI StoryBook CLI` in your Frontend project.
59+
60+
```
61+
npm install @lambdatest/smartui-storybook -g
2562
```
2663

27-
# Usage
64+
### Step 2: Setup with StoryBook
2865

29-
## Step 1: Set SmartUI Project Token in environment variables
66+
Add the following to your `.storybook/main.js`. You can read more about this here Storybook [Feature flags](https://storybook.js.org/docs/react/configure/overview#feature-flags).
3067

31-
<b>For Linux/macOS:</b>
68+
```
69+
module.exports = {
70+
features: {
71+
buildStoriesJson: true,
72+
},
73+
};
74+
```
75+
76+
### Step 3: Configure your Project Token
77+
78+
Setup your project token show in the **SmartUI** app after, creating your project.
79+
80+
<b>For Linux/macOS:</b>
3281

3382
```
34-
export PROJECT_TOKEN="your-project-token"
83+
export PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
3584
```
3685

3786
<b>For Windows:</b>
3887

3988
```
40-
set PROJECT_TOKEN="your-project-token"
89+
set PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
4190
```
4291

43-
## Step 2: Create config file
92+
## Step 4: Create and Configure SmartUI Config
93+
94+
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:
95+
4496
```bash
4597
smartui config create .smartui.json
4698
```
4799

48-
## Step 3: Execute tests
49-
Run the following command to run visual regression tests on your Storybook components.
100+
Once, the configuration file will be created, you will be seeing the default configuration pre-filled in the configuration file:
101+
102+
```bash
103+
{
104+
"storybook": {
105+
"browsers": [
106+
"chrome",
107+
"firefox",
108+
"safari"
109+
// Add more browser configuration here
110+
],
111+
"resolutions": [
112+
[1920, 1080] // Add more view ports to capture here
113+
],
114+
"include": [], // (Optional) Only compare limited stories
115+
"exclude": [] // (Optional) Don't compare the stories
116+
}
117+
}
118+
```
119+
120+
### Step 5: Execute the Tests on SmartUI Cloud using CLI
121+
122+
You can now execute your `StoryBook` components for `Visual Regression Testing` using the following options:. Run the following command to run Visual Regression tests on your Storybook components.
50123
51124
```bash
52125
smartui storybook http://localhost:6006 --config .smartui.json
53126
```
54127
55128
You can also provide path to the storybook-static directory instead of the local Storybook URL. Use `--help` for more information on usage.
56129
57-
# About LambdaTest
130+
## Documentation & Resources :books:
131+
132+
Visit the following links to learn more about LambdaTest's features, setup and tutorials around test automation, mobile app testing, responsive testing, and manual testing.
133+
134+
* [LambdaTest Documentation](https://www.lambdatest.com/support/docs/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample)
135+
* [LambdaTest Blog](https://www.lambdatest.com/blog/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample)
136+
* [LambdaTest Learning Hub](https://www.lambdatest.com/learning-hub/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample)
137+
138+
## LambdaTest Community :busts_in_silhouette:
139+
140+
The [LambdaTest Community](https://community.lambdatest.com/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample) allows people to interact with tech enthusiasts. Connect, ask questions, and learn from tech-savvy people. Discuss best practises in web development, testing, and DevOps with professionals from across the globe 🌎
141+
142+
## What's New At LambdaTest ❓
143+
144+
To stay updated with the latest features and product add-ons, visit [Changelog](https://changelog.lambdatest.com/)
145+
146+
## About LambdaTest
147+
148+
[LambdaTest](https://www.lambdatest.com?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample) is an intelligent unified digital experience testing cloud that helps businesses drastically reduce time to market through faster test execution, ensuring quality releases and accelerated digital transformation. The platforms allows you to perform both real time and automation testing across 3000+ environments and real mobile devices, making it a top choice among other cloud testing platforms. Over 10,000+ enterprise customers and 2+ million users across 130+ countries rely on LambdaTest for their testing needs.
58149

59-
[LambdaTest](https://www.lambdatest.com/) is a cloud based selenium grid infrastructure that can help you run automated cross browser compatibility tests on 2000+ different browser and operating system environments. LambdaTest supports all programming languages and frameworks that are supported with Selenium, and have easy integrations with all popular CI/CD platforms. It's a perfect solution to bring your [selenium automation testing](https://www.lambdatest.com/selenium-automation) to cloud based infrastructure that not only helps you increase your test coverage over multiple desktop and mobile browsers, but also allows you to cut down your test execution time by running tests on parallel.
150+
### Features
60151

61-
# License
152+
* Run Selenium, Cypress, Puppeteer, Playwright, and Appium automation tests across 3000+ real desktop and mobile environments.
153+
* Real-time cross browser testing on 3000+ environments.
154+
* Test on Real device cloud
155+
* Blazing fast test automation with HyperExecute
156+
* Accelerate testing, shorten job times and get faster feedback on code changes with Test At Scale.
157+
* Smart Visual Regression Testing on cloud
158+
* 120+ third-party integrations with your favorite tool for CI/CD, Project Management, Codeless Automation, and more.
159+
* Automated Screenshot testing across multiple browsers in a single click.
160+
* Local testing of web and mobile apps.
161+
* Online Accessibility Testing across 3000+ desktop and mobile browsers, browser versions, and operating systems.
162+
* Geolocation testing of web and mobile apps across 53+ countries.
163+
* LT Browser - for responsive testing across 50+ pre-installed mobile, tablets, desktop, and laptop viewports
164+
165+
[<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)
166+
167+
## We are here to help you :headphones:
62168

63-
Licensed under the [MIT license](./LICENSE).
169+
* Got a query? we are available 24x7 to help. [Contact Us](mailto:support@lambdatest.com)
170+
* For more info, visit - [LambdaTest](https://www.lambdatest.com/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample)

0 commit comments

Comments
 (0)