Smart UI Testing With StoryBook

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.

Learn the how to get started with Smart UI testing with StoryBook on the LambdaTest platform.

Table of Contents:

• Pre-requisites
• Steps To Create A SmartUI Project
• Running Your First StoryBook SmartUI Test

Pre-requisites

1. Basic understanding of StoryBook is required.
2. Node version installed should be higher than 14.15.0. Click here to know more.
3. StoryBook version installed should be higher than 6.4.0. Click here to know more.
4. Login to LambdaTest SmartUI with your credentials.

Steps To 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 the Projects page.
2. Click on the new project button.
3. Select the platform as Web for executing your StoryBook tests.
4. Add name of the project, approvers for the changes found, tags for any filter or easy navigation.
5. Click on the Submit.

Running Your First StoryBook SmartUI Test

Step 1: Install the Dependencies

Install required NPM modules for LambdaTest Smart UI StoryBook CLI in your Frontend project.

npm install @lambdatest/smartui-storybook -g

Step 2: Setup with StoryBook

Add the following to your .storybook/main.js. You can read more about this here Storybook Feature flags.

module.exports = {
  features: {
    buildStoriesJson: true,
  },
};

Step 3: Configure your Project Token

Setup your project token show in the SmartUI app after, creating your project.

For Linux/macOS:

export PROJECT_TOKEN="123456#1234abcd-****-****-****-************"

For Windows:

set PROJECT_TOKEN="123456#1234abcd-****-****-****-************"

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:

smartui config create .smartui.json

Once, the configuration file will be created, you will be seeing the default configuration pre-filled in the configuration file:

{
  "storybook": {
    "browsers": [
      "chrome",
      "firefox",
      "safari"
      // Add more browser configuration here
    ],
    "resolutions": [
      [1920, 1080]    // Add more view ports to capture here
    ],
    "include": [],    // (Optional) Only compare limited stories
    "exclude": []     // (Optional) Don't compare the stories
  }
}

Step 5: Execute the Tests on SmartUI Cloud using CLI

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.

smartui storybook http://localhost:6006 --config .smartui.json

You can also provide path to the storybook-static directory instead of the local Storybook URL. Use --help for more information on usage.

Documentation & Resources :books:

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.

• LambdaTest Documentation
• LambdaTest Blog
• LambdaTest Learning Hub

LambdaTest Community :busts_in_silhouette:

The LambdaTest Community 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 🌎

What's New At LambdaTest ❓

To stay updated with the latest features and product add-ons, visit Changelog

About LambdaTest

LambdaTest 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.

Features

• Run Selenium, Cypress, Puppeteer, Playwright, and Appium automation tests across 3000+ real desktop and mobile environments.
• Real-time cross browser testing on 3000+ environments.
• Test on Real device cloud
• Blazing fast test automation with HyperExecute
• Accelerate testing, shorten job times and get faster feedback on code changes with Test At Scale.
• Smart Visual Regression Testing on cloud
• 120+ third-party integrations with your favorite tool for CI/CD, Project Management, Codeless Automation, and more.
• Automated Screenshot testing across multiple browsers in a single click.
• Local testing of web and mobile apps.
• Online Accessibility Testing across 3000+ desktop and mobile browsers, browser versions, and operating systems.
• Geolocation testing of web and mobile apps across 53+ countries.
• LT Browser - for responsive testing across 50+ pre-installed mobile, tablets, desktop, and laptop viewports

We are here to help you :headphones:

• Got a query? we are available 24x7 to help. Contact Us
• For more info, visit - LambdaTest