Versions Compared

Old Version 1

changes.mady.by.user Adam Smith

Saved on

compared with

New Version 2

changes.mady.by.user Ameya Chavan

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
minLevel1
maxLevel6
outlinefalse
styledecimal
typelist
printabletrue

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

Expand
titleRun the following command in your terminal

npm install cypress

Expand
titleCreate 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

  • Code Block
    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',
    },
  },
});
Expand
titleTo open Cypress, run the following command

npx cypress open

Expand
titleFollow 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

Note

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.

Expand
titlePost 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)

...

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:

Code Block
languagejs
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:

Code Block
languagejs
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',
    },
  },
Info

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.