Skip to content

Commit 351dc0f

Browse files
keys-githubkeys-github
authored
Updated StoryBook READ.ME
1 parent 867e8e1 commit 351dc0f

File tree

1 file changed

+137
-31
lines changed

1 file changed

+137
-31
lines changed

‎README.md‎

Lines changed: 137 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,169 @@
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/70570645/171361733-065df506-c302-452d-8bc7-e63047377f8e.png">
44

5-
# Installation
5+
<p align="center">
6+
<a href="https://www.lambdatest.com/blog/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample" target="_bank">Blog</a>
7+
&nbsp; &#8901; &nbsp;
8+
<a href="https://www.lambdatest.com/support/docs/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample" target="_bank">Docs</a>
9+
&nbsp; &#8901; &nbsp;
10+
<a href="https://www.lambdatest.com/learning-hub/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample" target="_bank">Learning Hub</a>
11+
&nbsp; &#8901; &nbsp;
12+
<a href="https://www.lambdatest.com/newsletter/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample" target="_bank">Newsletter</a>
13+
&nbsp; &#8901; &nbsp;
14+
<a href="https://www.lambdatest.com/certifications/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample" target="_bank">Certifications</a>
15+
&nbsp; &#8901; &nbsp;
16+
<a href="https://www.youtube.com/c/LambdaTest" target="_bank">YouTube</a>
17+
</p>
18+
&emsp;
19+
&emsp;
20+
&emsp;
621

7-
### Prerequisites
8-
1. Node version >=14.15.0 required
9-
```
10-
node --version
11-
```
22+
*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.*
1223

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-
```
24+
*Learn the how to get started with Smart UI testing with StoryBook on the LambdaTest platform.*
2125

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

27-
# Usage
63+
### Step 2: Setup with StoryBook
2864

29-
## Step 1: Set SmartUI Project Token in environment variables
65+
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).
3066

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

3381
```
34-
export PROJECT_TOKEN="your-project-token"
82+
export PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
3583
```
3684

3785
<b>For Windows:</b>
3886

3987
```
40-
set PROJECT_TOKEN="your-project-token"
88+
set PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
4189
```
4290

43-
## Step 2: Create config file
91+
## Step 4: Create and Configure SmartUI Config
92+
93+
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:
94+
4495
```bash
4596
smartui config create .smartui.json
4697
```
4798

48-
## Step 3: Execute tests
49-
Run the following command to run visual regression tests on your Storybook components.
99+
Once, the configuration file will be created, you will be seeing the default configuration pre-filled in the configuration file:
100+
101+
```bash
102+
{
103+
"storybook": {
104+
"browsers": [
105+
"chrome",
106+
"firefox",
107+
"safari"
108+
// Add more browser configuration here
109+
],
110+
"resolutions": [
111+
[1920, 1080] // Add more view ports to capture here
112+
],
113+
"include": [], // (Optional) Only compare limited stories
114+
"exclude": [] // (Optional) Don't compare the stories
115+
}
116+
}
117+
```
118+
119+
### Step 5: Execute the Tests on SmartUI Cloud using CLI
120+
121+
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.
50122
51123
```bash
52124
smartui storybook http://localhost:6006 --config .smartui.json
53125
```
54126
55127
You can also provide path to the storybook-static directory instead of the local Storybook URL. Use `--help` for more information on usage.
56128
57-
# About LambdaTest
129+
## Documentation & Resources :books:
130+
131+
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.
132+
133+
* [LambdaTest Documentation](https://www.lambdatest.com/support/docs/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample)
134+
* [LambdaTest Blog](https://www.lambdatest.com/blog/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample)
135+
* [LambdaTest Learning Hub](https://www.lambdatest.com/learning-hub/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample)
136+
137+
## LambdaTest Community :busts_in_silhouette:
138+
139+
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 🌎
140+
141+
## What's New At LambdaTest ❓
142+
143+
To stay updated with the latest features and product add-ons, visit [Changelog](https://changelog.lambdatest.com/)
144+
145+
## About LambdaTest
146+
147+
[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.
58148

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.
149+
### Features
60150

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

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

0 commit comments

Comments
 (0)