Running Storybook 6.5 Interaction Tests in a CI Pipeline

Storybook Interaction tests are useful for performing automated testing against your components.

Today we will be running interaction tests for an Angular application inside of a Gitlab CI Pipeline.

Pipeline Overview

Running Storybook Interaction tests requires the following processes:

Compile Storybook
Serve Storybook
Run the Interaction Tests

We will be doing this in two jobs: build-storybook-job and run-interaction-tests. Our pipeline is triggered when a merge/pull request is created or updated, as defined by the rules of our jobs.

The pipeline could be triggered on a schedule or whatever situation suites your needs.

We are using yarn due to having encountered issues with npm in this pipeline.

image: node:16.15.0-alpine

stages:
  - build-ci
  - test

build-storybook:
  stage: build-ci
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
  script:
    - yarn install --frozen-lockfile
    - yarn run docs:json && build-storybook
  artifacts:
    paths:
      - storybook-static
    expire_in: 1 hour

run-interaction-tests: 
  stage: test
  image: mcr.microsoft.com/playwright:v1.17.0
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
  before_script:
    - yarn global add http-server wait-on
  script:
    - npx playwright install --with-deps
    - http-server storybook-static --port 6006 &
    - wait-on tcp:127.0.0.1:6006
    - test-storybook

The Breakdown

Let’s take the pipeline part by part.

1. Image

image: node:16.15.0-alpine

This Docker image defines the runtime of the pipeline agent when it runs our jobs. As we have an Angular app, we require Node and NPM/Yarn to be installed, which this image provides. Ensure you update the version to match your required environment.

2. Stages

stages:
  - build-ci
  - test

This defines the order in which our jobs will run (build-ci first, then test). We want to compile whatever our interaction tests need before they can be ran.

3. The Build Job

build-storybook:
  stage: build-ci
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
  script:
    - yarn install --frozen-lockfile
    - yarn run docs:json && build-storybook
  artifacts:
    paths:
      - storybook-static
    expire_in: 1 hour

Our job is called build-storybook and is ran during the build-ci stage, before the interaction tests are ran.

The rule: if: $CI_PIPELINE_SOURCE == "merge_request_event", defines that this job should run when a merge/pull request is added or updated.

The script: yarn install --frozen-lockfile, installs our Angular apps dependencies. It is the yarn equivalent of npm ci

The script: yarn run docs:json && build-storybook, is the command that compiles Storybook when the job is ran.

Storybook is compiled to a directory storybook-static and is exported as a Gitlab Artifact, which will automatically be available to the following jobs in the pipeline. Any changes made to the workspace directory that are not exported as artifacts, will be lost.

4. Running the Interaction Tests

run-interaction-tests: 
  stage: test
  image: mcr.microsoft.com/playwright:v1.17.0
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
  before_script:
    - yarn global add http-server wait-on
  script:
    - npx playwright install --with-deps
    - http-server storybook-static --port 6006 &
    - wait-on tcp:127.0.0.1:6006
    - test-storybook

The run-interaction-tests job is ran in the test stage, after Storybook is compiled.

This job serves the compiled Storybook and runs tests against it.

We override the original Node image, for this job, with the official Playwright image. Storybook Interaction Testing is built on top of Playwright. This gives us access to the browsers and other dependencies necessary to run our tests. Ensure you update the version to match your required environment.

The before_script is ran before the script, as the name vaguely suggests, and installs the http-server and wait-on packages that will be needed to serve Storybook.

npx playwright install --with-deps: installs browsers and anything else needed by Playwright. This step might be able to be removed since we are using the Playwright image.

http-server storybook-static --port 6006 &: Serves the Storybook. The & at the end of the command instructs it to be ran in the background, allowing the following script commands to execute.

wait-on tcp:127.0.0.1:6006: waits for Storybook to be served and available before running the interaction tests.

test-storybook: Runs the interaction tests!