Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/davidnguyen11/storybook-wdio
The Storybook boilerplate with visual regression test using WebdriverIO
https://github.com/davidnguyen11/storybook-wdio
circleci docker github-actions less react selenium selenium-webdriver storybook travis-ci typescript visual-regression-testing webdriverio
Last synced: 16 days ago
JSON representation
The Storybook boilerplate with visual regression test using WebdriverIO
- Host: GitHub
- URL: https://github.com/davidnguyen11/storybook-wdio
- Owner: davidnguyen11
- License: mit
- Created: 2019-10-01T06:24:36.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-27T15:33:00.000Z (over 1 year ago)
- Last Synced: 2024-10-13T15:10:42.030Z (about 1 month ago)
- Topics: circleci, docker, github-actions, less, react, selenium, selenium-webdriver, storybook, travis-ci, typescript, visual-regression-testing, webdriverio
- Language: JavaScript
- Homepage:
- Size: 2.64 MB
- Stars: 7
- Watchers: 3
- Forks: 2
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Storybook Visual Regression boilerplate
Storybook boilerplate which combines ReactJS, Typescript and Visual Regression testing using [WebDriverIO](https://webdriver.io/)
[](https://travis-ci.com/davidnguyen179/storybook-wdio) [](https://circleci.com/gh/davidnguyen179/storybook-wdio) [](https://github.com/davidnguyen179/storybook-visual-regression-testing-boilerplate/actions)
- [Storybook Visual Regression boilerplate](#storybook-visual-regression-boilerplate)
- [Motivation](#motivation)
- [Getting started](#getting-started)
- [How to create a React Component along with a Story](#how-to-create-a-react-component-along-with-a-story)
- [Structure](#structure)
- [Component template](#component-template)
- [Creating a Story](#creating-a-story)
- [Visual Regression Testing](#visual-regression-testing)
- [Run selenium Docker image](#run-selenium-docker-image)
- [Create entry test file](#create-entry-test-file)
- [Run the visual regression test](#run-the-visual-regression-test)
- [Debug visual regression test](#debug-visual-regression-test)
- [Mac](#mac)
- [Contributors ✨](#contributors)
## Motivation
As we all know ReactJS continues to lead the way as far as being the most widely used Javascript library and in the opinion of many, the most powerful. If you combine ReactJS with Storybook and visual regression testing from Webdriver IO it is possible to create a design system and a custom component library that can be safely reused between products and/or other teams. Sometimes when sharing a UI library among a large group or multiple teams we run in to issues when one person makes what might seem to be trivial or small change to a shared component. These changes might cause issues for other users who are using the same component in another place. Often times small modifications or changes can slip through code reviews too. With this boilerplate we incorporated the ability to run visual regression testing on each component. This allows developers to see even the slightest of changes and decide if it is acceptible or not before commiting to the changes.
## Getting started
To run this project please follow these steps:
1. Make sure you have [Docker](https://www.docker.com/products/docker-desktop) & [NodeJS](https://nodejs.org/en/) installed on your machine
2. Pull the [standalone-chrome-debug](https://hub.docker.com/r/selenium/standalone-chrome-debug) or [standalone-firefox-debug](https://hub.docker.com/r/selenium/standalone-firefox-debug/) docker image
3. Clone this repo
4. Install dependencies
```bash
npm install
```
5. Start storybook with development mode
```bash
npm run storybook
```
## How to create a React Component along with a Story
### Structure
```bash
my-react-component
|-- stories/
|-- vr-test/
|-- index.spec.ts
|-- story-1.story.tsx
|-- story-2.story.tsx
|-- story-3.story.tsx
|-- index.tsx
|-- style.less
```
### Component template
**src/components/button/index.tsx**
```tsx
import * as React from 'react';
import * as style from './style.less';
export class Button extends React.Component {
public render(): JSX.Element {
const className = [style.container, style[this.props.size || '']];
return (
{this.props.children}
);
}
}
export type Props = DataProps & EventProps;
interface DataProps {
/** Children node */
children: string | React.ReactNode;
/** Size of button */
size?: 'small' | 'medium' | 'large';
}
interface EventProps {
/** Click event */
onClick?: (e: React.MouseEvent) => void;
}
```
**src/components/button/style.less**
```css
.container {
background: blue;
width: 100%;
}
.small {
background: yellow;
}
.medium {
background: green;
}
.large {
background: red;
}
```
### Creating a Story
File name pattern: `src/components//stories/.story.tsx`
Example:
**src/components/button/stories/large.story.tsx**
```tsx
import { Props } from '..'; // import the Props from the component
export const test: Props = {
children: 'large size',
size: 'large',
};
```
**src/components/button/stories/small.story.tsx**
```tsx
import { Props } from '..'; // import the Props from the component
export const test: Props = {
children: 'small size',
size: 'small',
};
```
## Visual Regression Testing
This type of testing produces snapshots of the component as `*.png` files.
*For example:*
Here is a visual regression test for `button` component
**button with large size**
**button with medium size**
**button with small size**
Here is a visual regression test for `text` component
**text with black background**
**text with red background**
After completing the React component, to run the visual regression test, you need to do a little set up.
### Run selenium Docker image
> Make sure to start Docker
To run Selenium of web drivers, you can choose either running Docker commands
```bash
docker run -d -p 4444:4444 -p 5900:5900 selenium/standalone-chrome-debug
```
or using `docker-compose.yml`
```bash
docker-compose up
```
**Advance:** You can customize export ports by arguments if default ports are already allocated
| Port | Default | Description |
| ------------------ | ------- | --------------------------------------------------- |
| CHROME_MAIN_PORT | 4444 | port of selenium chrome |
| CHROME_DEBUG_PORT | 5900 | port of selenium chrome debug - for screen sharing |
| FIREFOX_MAIN_PORT | 5555 | port of selenium firefox |
| FIREFOX_DEBUG_PORT | 5901 | port of selenium firefox debug - for screen sharing |
Example
```bash
CHROME_MAIN_PORT=6666 CHROME_DEBUG_PORT=5909 docker-compose up
```
### Create entry test file
Create the file `src/components//stories/vr-test/index.spec.ts` with code below
```ts
import { VisualRegressionTest } from 'lib/test/visual-regression-test';
import * as style from '../../style.less';
new VisualRegressionTest(__dirname, style.container).run();
```
> `style.container` is the className wrapped around the component
### Run the visual regression test
> To run the visual regression test, make sure your `storybook` started.
**Desktop**
```bash
npm run test:chrome src/components//stories/vr-test/index.spec.ts
```
**Smartphone**
```bash
npm run test:chrome:smartphone src/components//stories/vr-test/index.spec.ts
```
**Both Desktop and Smartphone**
```bash
npm test src/components//stories/vr-test/index.spec.ts
```
**Run all tests**
```bash
npm test
```
### Debug visual regression test
#### Mac
**Screen Sharing**
To debug visual regression testing
1. Open the `Screen Sharing`
```bash
chrome
Hostname: `YOUR_MACHINE_IP`:5900
Password: secret
```
2. Run test
3. Navigate to `Screen Sharing` to see the step by step for running the test
## Contributors ✨
Dzung Nguyen
📖 💻 🤔 👀 🐛
Hoc Nguyen
💻 🤔 👀 🐛
Khoa Do
💻 👀 🐛
Nguyen Van Hao
💻 📖
Ben Lee
📖 💻