{"componentChunkName":"component---src-templates-tag-js","path":"/tags/snapshot-testing/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":1,"edges":[{"node":{"fields":{"slug":"/engineering/snapshot-testing-using-nightwatch-and-mocha/"},"html":"

Snapshot Testing

\n

Snapshot tests as the name implies, is a very powerful tool to test whether you the UI has change or not. A typical snapshot test case for a website/mobile app renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test.

\n

Snapshot Testing Benefits

\n

For QA Manual And Automation

\n\n

For Developer Unit Testing

\n\n

Need to install NPM

\n
    \n
  1. npm i mocha
    2. \n
  2. npm i clean-html
    3. \n
  3. npm i snap-shot
    4. \n
  4. npm i jsdom
    5. \n
  5. npm i jsdom-global
    6. \n
\n
\n

NightWatch does not have snapshot feature. So, We will use mocha to take snapshots. But Mocha will be run by NightWatch.

\n
\n

Directory Structure

\n

As per over automation project. We have created a \"snapshot\" folder under the \"test\" folder and we will be following the same structure as per the below project menu bar.

\n

\"N|Solid\"

\n

We also need to add Mocha test files, which will use to take snapshot and store under the root folder \"__snapshots__\".

\n

\"(https://cdn.filestackcontent.com/XGkI0wDrQoGDSp2djINg)\"

\n

If you are running automation code via visual code editor, then you can setup a launch.json file which helps you to debug your test code with all file/individual file.

\n

You can see the settings below of the launch.json file.

\n

\"(https://cdn.filestackcontent.com/qDjAHwHIQtKp2hmBdaEn)\"

\n
\n

Update Snapshot

\n

After creating a snapshot, sometimes we need to update snapshot due to improvement, customer requirements, and any valid changes on UI. So here, we can have some other settings which will help us.

\n
    \n
  1. \n

    If we want to update all snapshots by single command then we need to follow below instruction.

    \n

    Create a root folder file(update_snapshot.js) and paste code on it.

    \n
    (function(){\n      process.env.UPDATE\\=1;\n})()
    \n

    Add in package.json

    \n

    \"(https://cdn.filestackcontent.com/TTvchMDTW6F5x87J0688)\"

    \n
    2. \n
\n
\n

We can update all snapshot by using → npm run snapshot-u

\n
\n
    \n
  1. If we want to update the single snapshot then we can use the above technique but we just need to update the file name against \"test/snapshot\".
    2. \n
  2. \n

    If we use vscode, then we need to update launch.json as per above information

    \n

    \"(https://cdn.filestackcontent.com/uWX0pIUaSzKFyVKJGIYB)\"

    \n

    and need to create a file(\"snapshot.config.js\") in the root folder and paste the below code.

    \n

    \"(https://cdn.filestackcontent.com/Hh3PNxKmSo2pSFRA9YeM)\"

    \n
    3. \n
\n
\n

Important-: If we want to run only a snapshot test then we will need a small change in the nightwatch.json file.

\n
\n

\"(https://cdn.filestackcontent.com/EkBrPZffRv2ElZ0Qez36)\"

\n

You can find the complete reposrtory link here

\n","frontmatter":{"date":"July 29, 2020","updated_date":null,"title":"Snapshot testing using Nightwatch and mocha","tags":["QA","Nightwatch","snapshot-testing"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/858d55e4f691f5e5780be7675877f12d/58556/snapshot_nightwatch.webp","srcSet":"/static/858d55e4f691f5e5780be7675877f12d/61e93/snapshot_nightwatch.webp 200w,\n/static/858d55e4f691f5e5780be7675877f12d/1f5c5/snapshot_nightwatch.webp 400w,\n/static/858d55e4f691f5e5780be7675877f12d/58556/snapshot_nightwatch.webp 800w,\n/static/858d55e4f691f5e5780be7675877f12d/99238/snapshot_nightwatch.webp 1200w,\n/static/858d55e4f691f5e5780be7675877f12d/135cd/snapshot_nightwatch.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nitesh Jain","github":"niteshjain1987","avatar":null}}}}]}},"pageContext":{"tag":"snapshot-testing"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}