0% found this document useful (0 votes)
7 views22 pages

1 CreateCypressPresentation

This document outlines the steps to create a Cypress project, including setting up the project folder, installing necessary packages, and configuring Cypress for E2E testing. It provides sample tests for GET and POST methods, as well as instructions for creating custom commands. Additionally, it includes commands for running tests and making HTTP requests using Cypress.

Uploaded by

July Moe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
7 views22 pages

1 CreateCypressPresentation

This document outlines the steps to create a Cypress project, including setting up the project folder, installing necessary packages, and configuring Cypress for E2E testing. It provides sample tests for GET and POST methods, as well as instructions for creating custom commands. Additionally, it includes commands for running tests and making HTTP requests using Cypress.

Uploaded by

July Moe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

CREATE

CYPRESS
PROJECT

Create project folder name


Open project folder by Vs code Studio

OPEN
INSTALL NPM PACKAGE.JSON

• write "npm -i init" in terminal then yes for y

OPEN
INSTALL CYPRESS

• "npm install cypress --save-dev" install Cypress locally as a dev


dependency for project.

OPEN
CYPRESS TERMINAL OPEN

Run “npx cypress open” in


terminal

OPEN
E2E TESTING

Cypress ui view open then choose "E2E Testing"

OPEN
ADD CYPRESS CONFIGURATION

click "Continue" to add configuration in project.

OPEN
SELECT BROWSER WITH E2E TESTING

Select Chrome and click "Start E2E Testing in Chrome".

OPEN
CREATE NEW SPEC

• Select "Create new spec" and type cypress js file name and
click "Create spec" button.

OPEN
GET METHOD SAMPLE TEST

• describe("Get Method", function(){


• it("cypress comments list" , function(){
• cy.request("GET", "https://jsonplaceholder.cypress.io/comments", {
• }).then((resp) => {
• expect(resp.status).to.eq(200)
• expect(resp).to.have.property('headers')
• expect(resp).to.have.property('duration')
• });
• })
• })

OPEN
POST METHOD SAMPLE TEST

• describe("Post Method", function(){


• it("Test post url", function(){
• cy.request('POST', 'https://jsonplaceholder.cypress.io/posts', {
• title: 'Cypress',
• body: 'Automation Tool',
• }).then(resp => {
• expect(resp).to.have.property("headers");
• expect(resp.body).to.have.property("title", "Cypress");
• });
• })
• });

OPEN
ADD SHORTCUT SCRIPT

• Add shortcut script to run "npx cypress open ” in


package.json

OPEN
RUN SHORTCUT COMMAND

• If “npm run cy:open” in terminal, select testing again.


OPEN
ADD SHORTCUT RUN ALL UNDER E2E FOLDER

Run “npm run cy:runAll” in terminal that can run all test file under e2e folder.

OPEN
CYPRESS REQUEST

Cypress make an HTTP request.


• cy.request(url)
• cy.request(url, body)
• cy.request(method, url)
• cy.request(method, url, body)
• cy.request(options)

OPEN
CY.REQUEST(URL)

• cy.visit("https://jsonplaceholder.cypress.io");
cy.request("comments");
//or
cy.request("https://jsonplaceholder.cypress.io/
comments");

OPEN
CY.REQUEST(URL, BODY)

• cy.request( "POST",
'https://jsonplaceholder.cypress.io/posts', {
"key": "value1",
"key2": "value2"
})

OPEN
CY.REQUEST(METHOD, URL)

cy.request( "GET",
'https://jsonplaceholder.cypress.io/posts')

OPEN
CY.REQUEST(METHOD, URL, BODY)

• cy.request( "GET",
'https://jsonplaceholder.cypress.io/posts', {"one":
"1 value","two": "2 value"})

OPEN
CY.REQUEST(OPTIONS)

cy.request( 'https://jsonplaceholder.cypress.io/posts',
{"first": ""}, {"second": ""})

OPEN
DEMO TEST

OPEN
CREATE CUSTOM COMMAND

Cypress.Commands.add("userInput", (searchTxt) => {


//to input search text in Google and perform search
cy.visit("https://www.google.com/");
cy.get('textarea[name="q"]').type(searchTxt +
'{enter}')
});

OPEN
USE CUSTOM COMMAND

• it('Test Command Use', function (){


cy.userInput('Qa automation')
});

OPEN

You might also like