How to Configure cypress with Microsoft Visual Editor Code

To configure or set up cypress with Microsoft Code Editor important prerequisite is machine should have cypress and visual editor code installed. Refer Installation of cypress on windows if not installed. You can download and setup Microsoft visual editor code from the official website and perform the setup.

Once both cypress and Editor are available on the machine then perform the below steps.

Step 1) Open Visual Studio Code.

Step 2) Create a new folder to store the project files or Open any existing project folder to store files.

Step 3) Click on New File menu as shown below.

Step 4) Type package.json and save it.

Step 5) In Package.json file need to mention cypress for dev dependency. To do this we have multiple ways. From Terminal Menu Click on New Terminal Menu. We can use this terminal within IDE.

Open Terminal in Code editor — Terminal within IDE

Step 6) Type command “npm install –save-dev cypress” on Terminal and Wait because this will search for package.json file to install the dev dependencies. so add the below code in a package.json file (use IntelliSense if require to type)

“devDependencies”: { “cypress”:”^9.1.1″ }

While writing this blog 9.1.1 was the latest version so use IntelliSense to get the latest version in place of copy-paste.

Save the file and Hit the command “npm install –save-dev cypress” on the terminal.

The terminal will display the below message after installation

PS E:\Cypress Projects> npm install –save-dev cypress
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should
use the URLSearchParams API instead.
added 163 packages, and audited 164 packages in 49s
24 packages are looking for funding
run npm fund for details
found 0 vulnerabilities
PS E:\Cypress Projects>

devDependencies in package.json file — Installing Cypress Dev Dependencies from Termal using Code Editor.

The above command will install the latest version of cypress within your project.

All helpful methods after pressing dot in code editor are coming from node_modules -> @types -> index.d.ts file.

index.d.ts file from where intellisense is coming from — Successful installation of cypress with dev dependencies within the project folder using the code editor.

Step 7) How to create Cypress package

In Terminal type command “npx cypress open” and press enter.

It will show a message like this

It looks like this is your first time using Cypress: 9.1.1

✔ Verified Cypress! C:\Users\Admin\AppData\Local\Cypress\Cache\9.1.1\Cypress

Opening Cypress…

In any case, if you receive an error message like

Cypress verification timed out.
This command failed with the following output:
C:\Users\Admin\AppData\Local\Cypress\Cache\9.1.1\Cypress\Cypress.exe –smoke-test –ping=221
Command timed out after 30000 milliseconds: C:\Users\Admin\AppData\Local\Cypress\Cache\9.1.1\Cypress\Cypress.exe –smoke-test –ping=221
Timed out
Platform: win32-x64 (10.0.19043)
Cypress Version: 9.1.1

Solution for the above error is Relaunch cypress one more time. If that doesn’t work then change

VERIFY_TEST_RUNNER_TIMEOUT_MS value to 100000 Which is by default is 30000. ” VERIFY_TEST_RUNNER_TIMEOUT_MS ” is available under verify.js file located “node_modules\cypress\lib\tasks\verify.js” Save the changes and type command “npx cypress open” and press enter.

After successful configuration, the user will see cypress Test runner window like below.

Example Specs by Cypress with industry standards — cypress window after successful configuration and installation with code

Refer to use package.json for more information.