Skip to content

Latest commit

 

History

History
88 lines (62 loc) · 2.62 KB

README.md

File metadata and controls

88 lines (62 loc) · 2.62 KB
Raw

Cross Browser Testing for Storybook Components

Modern Cross Browser Testing for Storybook Components

This repository contains a demo project for visually testing Storybook components in a React front-end app with Applitools Eyes. Applitools Eyes will perform visual tests on Storybook components without the need to write any extra test code!

In fact, the main page of this app explains why components need visual testing. Run the app, open its main page, and start learning!

This project was created for the Modern Cross Browser Testing for Storybook Components workshop led by Pandy Knight and hosted by Applitools. The workshop abstract is provided in ABSTRACT.md. Full instructions for the workshop are provided in WORKSHOP.md.

Outline

  1. Understanding our React app
  2. Manually testing Storybook components
  3. Preparing for visual testing
  4. Visually testing Storybook components
  5. Testing components across different browsers
  6. Adding visual tests to a development workflow

Prerequisites

  1. An Applitools account (Register here for a free account)
  2. Node.js (This project was created with v16.13.1)
  3. A JavaScript IDE like Visual Studio Code
  4. Up-to-date versions of your favorite web browsers

Quickstart

To clone this repository:

git clone https://github.com/applitools/workshop-cbt-storybook.git

To install the dependencies:

cd applitools-react-storybook-demo
npm install

Note: This project was initially created using Create React App.

To launch the React app, run:

npm start

This command starts the app at http://localhost:3000/. When it loads, you should see the home page, which concisely explains the need for visual component testing.

To launch the Storybook viewer, run:

npm run storybook

This command starts the viewer at http://localhost:6006/. When it loads, you should see components on the left navbar, and the main part of the page should be a component viewer.

To launch visual tests using Applitools, set the APPLITOOLS_API_KEY environment variable to your secret API key, and then run:

npx eyes-storybook -s public

Visual test results will appear in the Applitools dashboard.