13. Storybook Integration For Component Testing

by | Jan 5, 2022 | Sample

StoryBook

How Can We Help?

< All Topics

Storybook is an amazing tool for visualizing UI components in isolation. It is an open source tool and gaining popularity amongst the UI developers.

Being heavily focused on the UI components, it becomes a perfect environment to perform Visual testing. In this article we will see, how Imagium can be integrated with Storybook for your Visual testing needs.

We are using Axios to make API calls and Puppeteer as our headless browser. Run the following commands only once on your project to pull the required dependencies.

npm i axios
npm i puppeteer

Build the storybook project by running the following commands on your project. In order to get the latest changes, run these commands every time before running the integration script.

 npm run build-storybook      
 npx sb extract

Run the following Integration code and you will see all the components automatically stored as baseline inside Imagium. For the subsequent runs the current snapshot will be compared against the baselines automatically. You have to change the parameters like projectKeyImagium, uidEndPointImagium, validateEndPointImagium & projectPath as per your details. To read more about other API capabilities check here

const puppeteer = require('puppeteer');
const axios = require('axios');
const testNameImagium = "Storybook Integration";
const projectKeyImagium = '62c5c9f5-59e4-402e-a230-506f27c22512';
const uidEndPointImagium = 'http://192.168.10.13:90/api/GetUID';
const validateEndPointImagium = 'http://192.168.10.13:90/api/Validate';
const projectPath = 'E:/React/mystorybook';
var testUID;

(async () => {

  //Read Json files
  let json = require(projectPath + '/storybook-static/stories.json');
  console.log(json['stories'], 'the json obj');
  var stories = json['stories'];
  var storyKey = Object.keys(json['stories']);
  var count = storyKey.length;
  
  //Get unique test ID from Imagium project
  await axios.post(uidEndPointImagium, { TestName: testNameImagium, ProjectKey: projectKeyImagium })
    .then((res) => {
      console.log(`Status: ${res.status}`);
      //Store unique test ID
      testUID = res.data;
      console.log('Body: ', res.data);
    }).catch((err) => {
      console.error(err);
    });
  
  /////Launch Pupeteer
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  for (let i = 0; i < count; i++) {
    var story = storyKey[i];
    var name = stories[story]['name'];
    var title = stories[story]['title'];
    var id = stories[story]['id'];
    
    //Navigate to the bage and retrieve the base64 image
    await page.goto('file:///' + projectPath + '/storybook-static/iframe.html?id=' + id + '&viewMode=story');
    var base64 = await page.screenshot({ encoding: "base64", fullPage: true })

    //Validate the page screenshot inside Imagium
    await axios.post(validateEndPointImagium, { StepName: title + " - " + name, TestRunID: testUID, ImageBase64: base64 })
      .then((res) => {
        console.log(`Status: ${res.status}`);
        console.log('Body: ', res.data);
        console.log('----------------------------');
      }).catch((err) => {
        console.error(err);
      });
  };
  await browser.close();
})();