- install “Node js” from https://nodejs.
org/en choose recommended version
- install “Visual Studio Code” from https://code.visualstudio.com/
- from the terminal of visual studio code install Cypress and open it:
- npm init -y ------------------------------------------------- to create basic structure of the project
- Go to Package.jasn and delete script brackets
- npm install cypress ---------------------------------- install cypress in the machine
- npx cypress open ------------------------------------- open cypress objects
- create file name: spec.cy.js inside e2e folder ------------------------- to write test case inside it
- write /// <reference types="cypress"/> --------------------- to prevent describe auto-complete and write it in e2e.js file and
delete import ‘./commands’ also
- use (it) to describe and write test case: it("Test Case Name",function(){
steps cypress command cy.log(‘’);
});
user can write many it or it.only functional scripts inside the editor and save them to appear inside the runner
user can put group of test cases (it) inside one describe or context for example:
describe(‘test cases name or description’, function(){ it test cases }); or
describe(‘test cases name or description’, () =>{ it test cases}); or
context(‘test cases name or description’ , function() { it test cases}); or
context(‘test cases name or description’, () =>{ it test cases}); or
cy.log(‘to display output in the runner screen’); function written inside describe or context
before (function() { }); or before(()=>{ }); to execute something before the function
beforeEach (function() { }); or beforeEach(()=>{ }); to execute something before each function
after(function() { }); or after(()=>{ }); to execute something after executing the function
afterEach(function() { }); or afterEach(()=>{ }); to execute something after executing each function
------------------
Visit Command
it( “description test case” , function(){
cy.visit(‘https://google.com’);
});
------------------
Visit html private file:
Put the html file you created inside cypress and when you need to open it just write its path instead of https://google.com
It(“open html index file” , function() {
Cy.visit(‘cypress/index.html’);
});
Get Element Commands:
You can return any element in the page by using get command
1- Cy.get(‘ TagName ‘); find an element by using (tag name)
2- Cy.get(‘ #ID-Name ‘); find an element by using (ID Name)
3- Cy.get(‘ .ClassName ‘); find an element by using (Class name) and also when class name contains two words put . before the
first name and . before second name without spaces
4- Cy.get(‘ [name of attribute] ‘); find element by using (attribute)
5- Cy.get(‘TagName’).first(); find the first element from list of elements.
6- Cy.get(‘TagName’).last(); find the last element from list of elements.
7- Cy.get(‘TagName’).eq(number of elements index in array); find an element from a list of elements by index.
8- Cy.get(‘ClassTagName’).filter(‘.secondClassName); find specific element with specific class tag name
9- Cy.get(‘.FatherClassName’).children();
10- Cy.get(‘.FatherClassName’).children(‘.ChildrenClassTagName’ or ‘ID’ or ‘any css selector’)
11- Cy.get(‘.FatherClassName’).children( ).first() or last() or eq(element index number);
12- Cy.get(‘.FatherClassName’).find(‘.ChildrenClassTagName’ or ‘ID’ or ‘any css selector’)
13- Cy.get(‘.ChildClass1Name.Class2Name’).parent(); find parent element using parent command
14- Cy.get(‘.ChildClass1Name.Class2Name’).parents(); find all the parents of the css selector
15- Cy.Contains(‘ element ‘); find elements by text
16- Cy.get(‘#ID-Name’).should(‘contain’, ’word needed to be found’); find element with specific word not sure the sentence
17- Cy.get(‘#ID-Name’).should(‘have.text’ , ‘sentence you need’); find element with sentence you know accurate
Click button command:
You can return or get or find button class or #ID into cypress first then .click() to click on the button
1- Cy.get(‘ TagName of the button‘).click();
2- Cy.get(‘ TagName of the button‘).last().click(); click on the last button on the class of button
3- Cy.get(‘ TagName of the button‘).first().click(); click on the first button on the class of button
4- cy.get(‘TagNAme of the button’).eq(index).click(); click on specific button inside an array of elements
5- Cy.get(‘TagNAme of Multiple buttons’).click({multiple: true}) click on multiple buttons in the same time
6- Cy.get(‘TagNAme of Multiple buttons’).click({force: true}) click on hidden button.
Type on Text Box:
1- Cy.get(‘Text Box element #ID’).type(‘text required’); // text like email address
2- Cy.get(‘Text Box element #ID’).type(‘text required{option}’); // option here like “enter” and text like email
Select from Dropdown list:
1- Cy.get(‘drop down list element ID’).select(‘element name or #ID’); //selection will be using Index of element or Value or Text
Check and uncheck Commands for check box or radio button:
1- Cy.get(‘check box or radio button element #ID’).check(‘element name or #ID’);
2- Cy.get(‘check box or radio button element #ID’).uncheck(‘element name or #ID’);
Double Click Command on button:
1- Cy.get(‘button #ID or value or Name’).dbclick();
Right Click Command on button:
1- Cy.get(‘button #ID or value or Name’).rightclick();
Go Back or Forward on the page:
1- Cy.go(‘back’);
2- Cy.go(‘forward’);
Date/Time command: to run the automation on specific date or specific time
Let now= new Date (‘2019 05 02’); YY MM DD
Cy.clock(now);
Cy.visit(‘URL’); now you can run the URL in that specific date
Clear Visual Studio Code from previous projects
To Run Test Cases in Visual Studio Code Terminal
To run all test cases in the (browser) and (VS Code Terminal) with one command in Visual Studio Code
1- Create (spec file.cy.js) under e2e and import all test cases created previously inside this file
using this code:
1- import './1- RegisterParaBank.cy'
2- import './2- LoginAndOpenNewAccount.cy'
3- import './3- loginAndAccountOverview.cy'
4- import './4- LoginAndTransferFund.cy'
5- import './5- LoginAndBillPay.cy'
6- import './6- loginAndFindTransActions.cy'
2- write in VS code Terminal npx cypress open then choose the new spec file name to run all cases
3- In the terminal write this command and run it plus notice the result in terminal:
npx Cypress open: npx cypress run --spec .\cypress\e2e\FileName.js
To record the result as a trusted video, go to cypress.config.js write this command before e2e
1- Video:true,
2- Go to command prompt or visual studio code and write this command:
npx cypress run --browser chrome --headed --spec "cypress\e2e\AllParaBankSpecs.cy.js"
If Else Conditional testing:
Cypress Proxy command
1. npm config set strict-ssl false
2. npm --proxy http://hqproxy.myzatca.gov.sa:8080 install cypress
Note that: red color differs between company to another and all above commands written as is except the red
color
