Create a Cypress Project using Visual Studio Code

Run->Cmd

Press enter and then

Create a folder called Day2 in D Drive by using MKDIR command

C:\Users\Raghu\> mkdir D:\Day2

Launch Visual Studio Code ( VSC) , which you can do it by double clicking on VSC
icon placed on your desktop

1
 Double click on VSC Icon

Navigate to File Open Folder

Select recently created folder i.e. D\:Day2 and press select folder button

2
Now you should see like above image, so far we have created a folder and then
open the folder in VSC, now we will create a node js project in the open folder
using VSC , we need node js project because cypress is built based on node JS,
hence we will create a new node project with in D:\Day2

To do that navigate to TerminalNew Terminal, you should see like below

In the terminal window type” npm init -y “ , which will create node project you
can observer package.json file is created , which will be guiding factor for further
activity

3
Now will install cypress by typing npm install cypress

Once it is done, you should observe that in “package.json “

cypress is added as dependency

4
Now we will open cypress to do that type “npx cypress open” in the terminal
like below

What is NPX?

NPX is an NPM package used to execute any package on the NPM registry
directly without installing it.

Once you hit the enter button cypress will start and you should see like below

5
Now we are interested in E2E Testing , lets configure E2E Testing . To do that

 click on E2E Testing



 and click on continue and select the browser type , based on your system

6
  It will display available browser types , however Electron is default
browser for cypress…select chrome and click on Start E2E testing on
chrome


Now select Create new Spec option in the next dialog box

Leave the path value as is and click on create spec

7
 Now select Ok run the spec button

Now you should see cypress opening the chrome and navigated to
specified URL and finally it displays the time traversed result

8
 Now close this(cypress runner) and come back to VSC you should see
cypress folder structure has changed lets dig into the details

Terminate cypress in terminal by pressing ctrl+c and type Y

Now exapn cypress folder

9
  There are 3 major folders and one cypress.config.js file will be created
 E2e folder will contain your scripts
 Fixtures folder will be used for data driven testing mean your test data will
be stored in this folder , we will know more on this in coming days
 Support folder is used for your libraries and custom code
 Cypress.config.js will be used for configuring the project like your VCS and
CI/CD configurations, we will know more on this in coming days

Now go-ahead and expand e2e folder by clicking on e2e folder , you should see
spec.cy.js file which is created by cypress while we were configuring cypress

Important points

1. Naming conventions: Cypress test files should always have cy.js extension,
means if I want to create a test script called TC_1 I should always name it
as TC_1.cy.js
2. Framework: cypress by default supports Mocha a JavaScript testing
framework, that is the reason you are seeing describe and it blocks

10
 3. Describe block is equalling to test suite, hence you are free to give
appropriate name in describe block with in the quotes, for example we
can give
 describe('Smoke Suite, () => {
   it('passes', () => {
     cy.visit('https://example.cypress.io')
   })
 })

4. It block is equalling to test case name hence you are free to give
appropriate name in describe block with in the quotes, for example we
can give
 it('Login', () => {
     cy.visit('https://example.cypress.io')
   })

5. Now coming to coding conventions

You should write like this

Step#1.describe()
Step#2.describe({})
Step#3.describe(‘’,() =>{})
Same for it block

6. Don’t be confused, it is called as JavaScript arrow function ==.> which

facilitates shorter code instead of writing like this we can use function
directly

hello = function() {
  return "Hello World!";
}
can be represented as
hello = () => {
  return "Hello World!";
}

7. In cypress.config.js observe that

11
 Cypress library is imported by default , which facilities further use of
cypress commands in all our scripts

Now lets copy the spec.cy.js and rename it ti google.cy.js to do that select
speccy.js and right click and click on copy select e2e and right click and
click on paste , now select spec.cy.copy.js and rename it to google.cy.js
open the script by double clicking on the file and change the URL to
google.com and comeback to terminal and enter npx cypress open
Now you should see two files in cypress runner go a ahead and run them

12