End to End testing in CypressIO

When we completely test our application from scratch to the end to check whether the application or a webpage works perfectly is called End to End testing.

If you have completely followed our article from the introduction to the end you will have enough knowledge of how to do the testing in cypress. This article is like a practice session where it comprises almost all concepts from the beginning.

In this article, We are going to do E2E testing for the website Zerowebapp. On this website, we will check all the functions and tabs in that application.

Create a folder for End to End testing on your PC and open that folder in the VS Code. Now you have to install the cypress and set the base for the cypress in the VSCode. Follow the below steps to install and to do End to End testing in CypressIO.

In the terminal, type the below command.

npm init

Install both cypress and prettier.

npm install cypress prettier

Create a file named .prettierrc in the node modules folder of the VS Code and give the below setting.

{
  "semi": false,
  "singleQuote": true,
  "useTabs": true,
  "tabWidth": 2,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "trailingComma": "es5"
}

If you want, you can redefine the run command and the open command of the cypress as given below in the package.json file.

{
  "name": "e2e-testing",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "cypress open",
    "run": "cypress run"
  },
  "author": "Tharani",
  "license": "ISC",
  "dependencies": {
    "prettier": "^2.1.2"
  },
  "devDependencies": {
    "cypress": "^5.6.0"
  },
  "description": ""
}

In the cypress.json give the below configuration:

{
    "video":false,
    "defaultCommandTimeout":5000,
    "pageLoadTimeout": 10000,
    "waitForAnimations":true
}

Delete the example folder under the Integration folder of cypress because we won't need the example .js spec files which are automatically created when we install CypressIO.

I have created a folder named e2e_Tests in which we will be creating all the .js spec files.
folder-creation-e2e-cypress

Example program: This is a simple program where we will be visiting the website. Then access the search bar and verify whether the search bar provides results or not.

describe("search box",() => {
    before(function(){
        cy.visit("http://zero.webappsecurity.com/index.html")
    })
    it("should type into search box and submit with pressing enter",()=>{
        cy.get("#searchTerm").type("chercherTech{enter}")
    })
    it("should show search results page",()=>{
    cy.get("h2").contains("Search Results:")
    })
})

Output :
e2e-first-output-cypress

Example program: This is also a simple program where we will sign-in to the website by giving the credentials. Then we will check whether the forgot password element is working or not.

describe("Password Test", () => {
    before(function() {
        cy.visit("http://zero.webappsecurity.com/index.html")
    })
    it("Should Click on the sign in button", () => {
        cy.get("#signin_button").click()
    })
    it("Should click forgot password", () => {
        cy.get(".offset3 > a").click()
    })
    it("Should fill the email", () => {
        cy.get("#user_email").type("[email protected]")
    })
    it("Should submit the form", () => {
        cy.contains("Send Password").click()
    })
})

Output :
forgot-password-output-cypress

Example program: In this program, we are navigating to the tabs like Online Banking, Feedback, and the Home tab.

describe("Navbar Test", () => {
    before(function() {
        cy.visit("http://zero.webappsecurity.com/index.html")
    })
    it("Should display online banking content", () => {
        cy.contains("Online Banking").click()
        cy.url().should("include", "online-banking.html")
        cy.get("h1").should("be.visible")
    })
    it("Should display feedback content", () => {
        cy.contains("Feedback").click()
        cy.url().should("include", "feedback.html")
    })
    it("Should display homepage content", () => {
        cy.contains("Zero Bank").click()
        cy.url().should("include", "index.html")
    })
})

Output :
navbar-output-cypress

Example program: In this program, we are going to fill the feedback form by entering our credentials on the website.

describe("Feedback Test", () => {
    before(function() {
        cy.visit("http://zero.webappsecurity.com/index.html")
        cy.contains("Feedback").click()
    })
    it("Should load feedback form", () => {
        cy.get("form").should("be.visible")
    })
    it("Should fill the feedback form", () => {
        cy.get("#name").type("Tharani")
        cy.get("#email").type("email.com")
        cy.get("#subject").type("Hi")
        cy.get("#comment").type("chercher.tech")
    })
    it("Should submit feedback form", () => {
        cy.get(".btn-signin").click()
    })
    it("Should display feedback message", () => {
        cy.get("#feedback-title").contains("Feedback")
    })
})

Output :
feedback-output-cypress

Example program: In this program, we are going to pass the parameters from the fixture folder. Create a file named user.json under fixtures and give the below values.

{
    "id":"username",
    "pwd":"password"
}

In this program, we are going to log in to the website using the wrong credentials and then with the correct credentials. After that, we will be logging out from the account.

describe("Login /Logout Test", () => {
    before(function() {
        cy.visit("http://zero.webappsecurity.com/index.html")
        cy.url().should("include", "index.html");
        cy.get("#signin_button").click()
    })
    it("Should try to login with invalid data", () => {
        cy.get("#login_form").should("be.visible")
        cy.get("#user_login").type("invalid username")
        cy.get("#user_password").type("invalid password")
        cy.contains("Sign in").click()
    })
    it("Should display error message", () => {
        cy.get(".alert-error")
            .should("be.visible")
            .and("contain", "Login and/or password are wrong")
    })
    it("Should login to application", () => {
        cy.fixture("user").then(user => {
            const username = user.id
            const password = user.pwd
            cy.get("#user_login").type(username)
            cy.get("#user_password").type(password)
            cy.get("#user_remember_me").click()
            cy.contains("Sign in").click()
        })
        cy.get("ul.nav-tabs").should("be.visible")
    })
    it("Should logout from application", () => {
        cy.contains("username").click()
        cy.get("#logout_link").click()
        cy.url().should("include", "index.html")
    })
})

Output :
login-logout-output-cypress

Example program: In this program, we are signing in and adding a new payee in the pay bills tab by giving the required credentials as in the below image.
paybills-tab-e2e-cypress

describe("New payee Test",()=> {
    before(function(){
        cy.visit("http://zero.webappsecurity.com/index.html")
        cy.get("#signin_button").click()
        cy.fixture("user").then(user => {
            const username = user.id
            const password =user.pwd
         cy.get("#user_login").type(username)
         cy.get("#user_password").type(password)
         cy.get("#user_remember_me").click()
         cy.contains("Sign in").click()
         }) 
    })
    it("should add new payee to the list",()=>{
        cy.get("#pay_bills_tab").click()
        cy.contains("Add New Payee").click()
        cy.get("#np_new_payee_name").type("Name")
        cy.get("#np_new_payee_address").type("Address")
        cy.get("#np_new_payee_account").type("12345678")
        cy.get("#np_new_payee_details").type("Detail")
        cy.get("#add_new_payee").click()
    })
    it("Should show success message",()=>{
        cy.get("#alert_content")
               .should("be.visible")
               .and("contain","The new payee Name was successfully created")
    })
})

Output :
new-payee-e2e-output-cypress

You have noticed that the sign-in process is repeating in every program. So we can create a new command named login In the command.js as below. So that we don't want to repeat each step of the sign-in process instead we can call the command.

Cypress.Commands.add("login",(username,password)=>{
    cy.get("#user_login").type(username)
    cy.get("#user_password").type(password)
    cy.get("#user_remember_me").click()
    cy.contains("Sign in").click()
})

Example program: In the above program we have created a new Payee. Now let us learn how to pay the amount to the saved payee.

describe("Payment test", () => {
    before(function() {
        cy.visit("http://zero.webappsecurity.com/index.html")
        cy.get("#signin_button").click()
        cy.fixture("user").then(user => {
            const username = user.id
            const password = user.pwd
            cy.login(username, password)
        })
    })
    it("should send new payment {fake}", () => {
        cy.get("#pay_bills_tab").click()
        cy.contains("Pay Saved Payee").click()
        cy.get("#sp_payee").select("wellsfargo")
        cy.get("#sp_account").select("Credit Card")
        cy.get("#sp_amount").type("2000000")
        cy.get("#sp_date").type("2020-11-21 {enter}")
        cy.get("#sp_description").type("some description")
        cy.get("#pay_saved_payees").click()
    })
    it("Should show success message", () => {
        cy.get("#alert_content")
            .should("be.visible")
            .and("contain", "The payment was successfully submitted")
    })
})

Output :
payement-test-e2e-output-cypress

Example program: In the above program we have sent the amount. What if you have to convert the amount from Great Britain (pound) to Dollar.

describe("Currency Exchange Test",()=> {
    before(function(){
        cy.visit("http://zero.webappsecurity.com/index.html")
        cy.get("#signin_button").click()
        cy.fixture("user").then(user => {
            const username = user.id
            const password =user.pwd
        cy.login(username, password)
         }) 
    })
    it("Should fill conversion form",()=>{
         cy.get("#pay_bills_tab").click()
         cy.contains("Purchase Foreign Currency").click()
         cy.get("#pc_currency").select("GBP")
         cy.get("#pc_amount").type("2000")
         cy.get("#pc_inDollars_true").click()
         cy.get("#pc_calculate_costs").click()
    })
    it("Should display conversion ammount",()=>{
        cy.get("#pc_conversion_amount")
        .should("contain","1180.50 pound (GBP) = 2000.00 U.S. dollar (USD)")   
    })
})

Output :
currencyexchange-e2e-output-cypress

Example program: In the below program, we are going to access the Transfer Funds tab. In this tab, we are going to send the amount from one bank account to another bank account.

describe("Transfer funds verification Test", () => {
    before(function() {
        cy.visit("http://zero.webappsecurity.com/index.html")
        cy.get("#signin_button").click()
        cy.fixture("user").then(user => {
            const username = user.id
            const password = user.pwd
            cy.login(username, password)
        })
    })
    it("Should fill transfer funds form", () => {
        cy.get("#transfer_funds_tab").click()
        cy.get("#tf_fromAccountId").select("2")
        cy.get("#tf_toAccountId").select("4")
        cy.get("#tf_amount").type("1000")
        cy.get("#tf_description").type("sample text")
        cy.get("#btn_submit").click()
    })
    it("should verify correct data", () => {
        cy.get("#tf_fromAccountId").should("have.value", "Checking")
        cy.get("#tf_toAccountId").should("have.value", "Loan")
        cy.get("#tf_amount").should("have.value", "1000")
    })
})

Output :
transferfund-e2e-output-cypress

Example program: Consider a scenario where you have to find a specific transaction from the account activity tab. Let us learn how to do it from the below program.

describe("Find Transaction Test",()=> {
    before(function(){
        cy.visit("http://zero.webappsecurity.com/index.html")
        cy.get("#signin_button").click()
        cy.fixture("user").then(user => {
            const username = user.id
            const password =user.pwd
        cy.login(username, password)
         }) 
    })
    it("should filter transactions",()=>{
        cy.get("#account_activity_tab").click()
        cy.contains("Find Transactions").click()
        cy.get("#aa_fromAmount").type("200")
        cy.get("#aa_toAmount").type("1000")
        cy.get('button[type="submit"]').click()
    })
    it("Should display results",()=>{
        cy.get("#filtered_transactions_for_account").should("be.visible")
        cy.get("tbody > tr").its("length").should("be.gt",0)
    })
})

Output :
filter-transaction-e2e-output-cypress

Now let us try to run all the .js files in the examples folder so that it seems like a complete end to end testing of the website.
executing-all-tests-cypress

Output :
complete-e2e-cypress

0 results
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions