{"id":1095,"date":"2021-12-15T09:40:54","date_gmt":"2021-12-15T09:40:54","guid":{"rendered":"https:\/\/ethosspace.com\/programmers\/?p=1095"},"modified":"2022-03-23T08:18:30","modified_gmt":"2022-03-23T08:18:30","slug":"how-to-configure-cypress-with-microsoft-visual-editor-code","status":"publish","type":"post","link":"https:\/\/ethosspace.com\/programmers\/how-to-configure-cypress-with-microsoft-visual-editor-code\/","title":{"rendered":"How to Configure cypress with Microsoft Visual Editor Code"},"content":{"rendered":"\n

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<\/a> if not installed. You can download and setup Microsoft visual editor code <\/a>from the official website and perform the setup.<\/p>\n\n\n\n

Once both cypress and Editor are available on the machine then perform the below steps.<\/p>\n\n\n\n

Step 1) Open Visual Studio Code.<\/p>\n\n\n\n

Step 2) Create a new folder to store the project files or Open any existing project folder to store files.<\/p>\n\n\n\n

Step 3) Click on New File menu as shown below.<\/p>\n\n\n\n

\"Welcome
New file Code<\/figcaption><\/figure>\n\n\n\n

Step 4) Type package.json and save it.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"Open
Terminal within IDE<\/figcaption><\/figure>\n\n\n\n

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) <\/p>\n\n\n\n

   “devDependencies”: {    “cypress”:”^9.1.1″    }<\/p>\n\n\n\n

While writing this blog 9.1.1 was the latest version so use IntelliSense to get the latest version in place of copy-paste.<\/p>\n\n\n\n

Save the file and Hit the command “npm install –save-dev cypress” on the terminal.<\/p>\n\n\n\n

The terminal will display the below message after installation <\/p>\n\n\n\n

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.<\/p>

added 163 packages, and audited 164 packages in 49s<\/p>

24 packages are looking for funding
run npm fund<\/code> for details<\/p>

found 0 vulnerabilities
PS E:\\Cypress Projects><\/p><\/blockquote>\n\n\n\n

\"devDependencies
Installing Cypress Dev Dependencies from Termal using Code Editor.<\/figcaption><\/figure>\n\n\n\n

The above command will install the latest version of cypress within your project.<\/p>\n\n\n\n

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

\"index.d.ts
Successful installation of cypress with dev dependencies within the project folder using the code editor.<\/figcaption><\/figure>\n\n\n\n

Step 7) How to create Cypress package<\/p>\n\n\n\n

In Terminal type command “npx cypress open” and press enter.<\/p>\n\n\n\n

It will show a message like this <\/p>\n\n\n\n

It looks like this is your first time using Cypress: 9.1.1<\/p>\n\n\n\n

\u2714 Verified Cypress! C:\\Users\\Admin\\AppData\\Local\\Cypress\\Cache\\9.1.1\\Cypress<\/p>\n\n\n\n

Opening Cypress\u2026<\/p>\n\n\n\n

In any case, if you receive an error message like <\/p>\n\n\n\n

Cypress verification timed out.<\/p>

This command failed with the following output:<\/p>

C:\\Users\\Admin\\AppData\\Local\\Cypress\\Cache\\9.1.1\\Cypress\\Cypress.exe –smoke-test –ping=221<\/p>

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<\/p>

Platform: win32-x64 (10.0.19043)
Cypress Version: 9.1.1<\/p><\/blockquote>\n\n\n\n

Solution for the above error is <\/strong>Relaunch cypress one more time. If that doesn’t work then change<\/p>\n\n\n\n

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. <\/p>\n\n\n\n

After successful configuration, the user will see cypress Test runner window like below.<\/p>\n\n\n\n

\"Example
cypress window after successful configuration and installation with code<\/figcaption><\/figure>\n\n\n\n

Refer to use package.json<\/a> for more information.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[21,20],"tags":[],"class_list":["post-1095","post","type-post","status-publish","format-standard","hentry","category-cypress","category-software-automation-testing"],"aioseo_notices":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"sparkling-featured":false,"sparkling-featured-fullwidth":false,"tab-small":false},"uagb_author_info":{"display_name":"program45_-rt8nb","author_link":"https:\/\/ethosspace.com\/programmers\/author\/program45_-rt8nb\/"},"uagb_comment_info":0,"uagb_excerpt":"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…","_links":{"self":[{"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/posts\/1095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/comments?post=1095"}],"version-history":[{"count":9,"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/posts\/1095\/revisions"}],"predecessor-version":[{"id":1345,"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/posts\/1095\/revisions\/1345"}],"wp:attachment":[{"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/media?parent=1095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/categories?post=1095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/tags?post=1095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}