Basic program in Cypress

In Cypress, we can use any type of frameworks such as mocha, jasmine, chai, etc.., But cypress prefers us to use the mocha framework. By default, the test programs execute in the electron browser. Cypress supports only a few browsers namely,

  • Electron
  • Chrome
  • Chromium
  • Canary.

Cypress insists us to use the electron browser since the electron browser and its dependencies are automatically downloaded while installing cypress. If you have any of the above-mentioned browsers in your PC, then you can do the execution in those browsers too.

Now let us try to do a simple test program in cypress using the mocha framework. Create a file named Test.js in the examples folder.Go to cypres>fixtures>integration/examples. It is mandatory to create the test files only in the examples folder. Since while executing, by default cypress executes all files which are in the examples folder.

creating-file-cypress

While giving any methods name in cypress, the word cy has to be given along with the method name. For Example :

cy.method name()

Example program: Let us visit a particular webpage in the browser by giving the URL of that page using a visit method.

describe(('My First Test suite'),
function() {
  it('My First testcase',
  function() {
    cy.visit("https://chercher.tech/");
  })
})

Execution of the test program in electron browser

Execution of a test program can be done in the test runner or the command line. By default, while executing an electron browser is prompted. Let us learn how to execute the program in different ways.

Execution in the test runner

In Cypress by selecting the desired file in the example folder the test runner automatically prompts.

test-runner-execution

Output: Execution in the test runner.

eg-test-output

Now, let us try to execute the same program using the command line.

Execution in the command line

While running the program via command line, by default the program runs in headless mode[Browser not prompted]. To run the program in the headed mode[Browser prompted], we have to specify --headed in the command line.

Headless execution in cypress

To run a specific spec file[Test file] in the example folder, the command which has to be given is

node_modules\.bin\cypress run --spec "cypress/integration/examples/Test.js"

[OR]

npx cypress run --spec "cypress/integration/examples/Test.js"

In the headless execution, the default browser used is always electron.

Output: Execution in headless mode

headless-commandline-output

Headed execution in cypress

To execute the program in headed mode, the below command should be given. The command is--headed makes the spec to run in headed mode.

node_modules\.bin\cypress run --headed --spec "cypress/integration/examples/Test.js"

[OR]

npx cypress run --headed --spec "cypress/integration/examples/Test.js"

Output: Execution in the headed mode

commandline-output-headed

Automatically browser prompts as below in the test runner,

browser-prompt-headed

Errors occurred while Executing in cypress

If you face any error while executing a test program in cypress as the below image,

error-run-execution

  • Rename the test file to .spec.js
    For example here the file Test.js is renamed to Test.spec.js
  • Run the file using the command
    npx cypress run --spec "**/*Test.spec.js"  [OR]
    npx cypress run --headed --spec "**/*Test.spec.js" [OR]
    
  • Now the file executes perfectly without any errors.

Intelligent code completion in cypress

IntelliSense in cypress is one of the cool features to get the auto-suggestion of the methods and to autocomplete the assertion chains while typing. This feature can be used in any javascript file by giving the code as below,

/// <reference types="cypress" />

Example :

cypress-intelligence-methods

This IntelliSense can also be achieved without giving the command in every javascript file.

  • Go to the cypress folder in the explorer of VS Code. Create a new file named tsconfig.json in the cypress folder.
  • In the tsconfig.json type the below content.
    {
        "compilerOptions": {
          "allowJs": true,
          "baseUrl": "../node_modules",
          "types": [
            "cypress"
          ]
        },
        "include": [
          "**/*.*"
        ]
      }​

    tsconfig-json

  • Restart the VS code editor to overcome any errors if you see.
  • Now you are good to use the Intellisense in your project files.
    alternate-intellisense-working

Code formatting using prettier in cypress

For the formatting of the code, most of the developers rely on the application named Prettier. Formatting makes the code more readable.

  • In the terminal give the command
    npm install prettier​

    installation-prettier

  • After the installation, create a new file named .prettierrc in the node_modules folder and write the below command in that file. The formatting is completely user-defined. The below style is preferred in cypress.
{
"semi": false,
  "singleQuote": true,
  "useTabs": true,
  "tabWidth": 2,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "trailingComma": "es5"
}​

prettier-formatting-nodemodules

Now we have successfully set the prettier package in VSCode.

In the next article, let us learn how to execute the test program in different browsers.

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions