Join us on the demo, while our product experts provide a detailed walkthrough of our enterprise platform.

Snapshot testing using Nightwatch and mocha

Snapshot testing is one of many different testing tools, which compares the previous and current snapshot. Unlike TDD, snapshot testing relies on the fact that your component renders correctly already.

Nitesh Jain
Nitesh Jain
July 29, 2020
2 min read

Snapshot Testing

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.

Snapshot Testing Benefits

For QA Manual And Automation

  • Easy to identify any change in the DOM element.
  • Help to automation to check element id as same as previous.
  • Help to check integration testing will be in right.

For Developer Unit Testing

  • The developer can compare snapshot dom on every movement when the dynamic change happened on DOM.
  • Get changes in DOM and update QA for update automation testing products.

Need to install NPM

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

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

Directory Structure

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|Solid

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

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

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.

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

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


Update Snapshot

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.

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

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

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

    Add in package.json

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

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

  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. If we use vscode, then we need to update launch.json as per above information

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

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

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

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

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

You can find the complete reposrtory link here



LoginRadius Docs

Implement Authentication in Minutes

click here

Most Popular Tags

EngineeringJavaScriptNodeJSCSSSecurityReactOAuthSocialLoginGoAuthentication

Are your customers safe on your application?

According to Forbes, data breaches exposed 4.1 billion records in the first six months of 2019. If this gets you worried, we’ve got your back!

LoginRadius protects your customers’ identities. We provide world-class security for your customers during login, registration, password setup, and any other data touchpoints, and make sure that their data is safe. We do so through by offering open source SDKs, integrations with over 150 third party applications, pre-designed and customizable login interfaces, and best-in-class data security products such as MFA, RBA, and Advanced Password Policies. The platform is already loved by over 3,000 businesses with a monthly reach of 1.17 billion users worldwide.Secure Your Application Now

Nitesh Jain

Nitesh Jain

Nitesh Jain is Software Engineer at LoginRadius, a full stack web developer working in React and Node.JS. He is very confident for learning new language of programming, because as per his saying, the basic concept for all languages are same and belongs to single root under the multiple technology.

View Profile

Try a Modern Authentication Solution

$0/ month

Free Sign Up
  • 5,000 MAU
  • 1 Web or mobile app
  • Standard login
  • 3 Social Login Providers
  • Transactional Email Template
  • Customizable Login Interfaces