Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

Introduction

Why use Cypress?

  • Cypress allows us to write the following tests, while giving developers access to its interactive GUI

    • End-to-end tests

    • Component tests

    • Integration tests

    • Unit tests

  • Grab a coffee while you go through the features of Cypress.

Setup and Installation

Installation Steps

 Run the following command in your terminal

npm install cypress

 Create and setup the dev config file

  • Create a dev.config.js file in the root directory of your local application and paste in the following content

  • const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    excludeSpecPattern: '**/examples/*',
    screenshotOnRunFailure: false,
    //  supportFile: false,
  },
  viewportWidth: 1920,
  viewportHeight: 1080,

  component: {
    devServer: {
      framework: 'create-react-app',
      bundler: 'webpack',
    },
    screenshotOnRunFailure: false,
    env: {
      REACT_APP_MAPBOX_API_KEY: 'pk.eyJ1IjoibWlrYWhwaW5lZ2FyIiwiYSI6ImNseHZ2NndjZDJrejMycXB4dWtlamo2eWYifQ.29yeP8CgZpO98jyzxYxU4Q',
    },
  },
});
 To open Cypress, run the following command

npx cypress open

 Follow these steps in the cypress GUI

  1. Check for a new cypress window popup

  2. Select component testing

  3. For the Project Setup screen, do not change the detected framework (should be create react app) and select Next Step.

  4. Install all the dev dependencies (should be already installed, if not just npm install all the required dependencies) and select continue

  5. Next screen should show all the Configuration files, select continue

  6. Choose chrome as the browser and Start Component Testing in Chrome

Check VSCODE for the project directory, you should see a new cypress folder created in the root folder. If not then the installation was not correct.

 Post Installation

1. Click on Specs to see all the tests present

Dev Tests

While on development environment, check if you have the following file setup in the root folder of your local application (refer to the below image)

image-20240710-154527.png

Common config changes

Put such changes like the viewport height/width settings, etc. directly in the defineConfig object.

E2E testing config changes

Put changes specific to E2E testing the e2e object. Following are the current e2e configs:

e2e: {
    baseUrl: 'http://localhost:3000', // base url for e2e testing
    excludeSpecPattern: '**/examples/*', // used to exclude tests whose names are filtered by the regex
    screenshotOnRunFailure: false, // if true a screenshot folder will be included with all the screen snippets when your tests fail
  },

Component testing config changes

Put changes specific to E2E testing the e2e object. Following are the current e2e configs:

component: {
    devServer: {
      framework: 'create-react-app',
      bundler: 'webpack',
    },
    screenshotOnRunFailure: false,
    // Defines environment variables for the component tests
    env: {
      REACT_APP_MAPBOX_API_KEY: 'pk.eyJ1IjoibWlrYWhwaW5lZ2FyIiwiYSI6ImNseHZ2NndjZDJrejMycXB4dWtlamo2eWYifQ.29yeP8CgZpO98jyzxYxU4Q',
    },
  },

For customizing the configuration refer the following:
Cypress Doc link to Configuration File

Writing Tests

Testing Structure

Use the following structure for your test (spec) files:

  • Describe Blocks: Group related tests.

  • It Blocks: Define individual test cases.

  • Assertions: Validate expected outcomes.

  • No labels