Skip to main content
Home
  • Tutorials
    • Quality Assurance
    • Software Development
    • Machine Learning
    • Data Science
  • About Us
  • Contact
programsbuzz facebook programsbuzz twitter programsbuzz linkedin
  • Log in

Main navigation

  • Tutorials
    • Quality Assurance
    • Software Development
    • Machine Learning
    • Data Science
  • About Us
  • Contact

Cypress Before and After Hook

Profile picture for user arilio666
Written by arilio666 on 12/07/2021 - 08:48

Before

So in cypress, we have the hook called before where we can reach some test functionalities even before the test starts. This makes the test faster as the load gets executed before the test step.

  • Let us say we have multiple numbers of tests in a single spec file and in every test we have to open a page and test its integrity so we cannot rely on .visit every time.
  • So before hook comes into play which will open up the page before the load each and whenever we declare something inside this before hook block.
  • Note that when we use before hook it only gets loaded for the first test step alone and its state of the browser gets cleared after a test step meaning before can only be utilized once per test step.

So before we go into the code, we are going to automate three things in http://www.autopract.com/#/home/fashion.

Step 1:- We need to visit the page.
Step 2:- We are going to close the appearing popup.
Step 3:- We are going to click the side tab.
Step 4:- We will assert whether the two fashion items, footwear, and watches are visible or not.

Sounds fun, right? Let us dive in.

describe('Automate AutoPract',()=>{
    before(() => {
        cy.visit('http://www.autopract.com/#/home/fashion')
        cy.get('.close').as('Popup')
        
    })
    
    it('Should click POPUP',()=>{
        cy.get('@Popup').click()

    })
    it('Verify Footwear Fashion',()=>{

        cy.get('.bar-style').click()
        cy.get('a').contains(' footwear ').should('be.visible')
    })
    it('Verify Watches Fashion', ()=> {
        cy.get('a').contains(' watches ').should('be.visible')

    })
})
  • So here, we have implemented the following test steps ]with before hook.
  • Now, why did we use before hook to visit the page? Why not via the test step itself?
  • As we discussed earlier, using the test step rather than before the hook to visit the page takes a slight delay.
  • If we use it before hook like this, we can load it fast enough that cypress will finish the tests earlier than usual within a snap.

So as you can see, it works flawlessly.

After

  • There is a hook called "after" in cypress where we can fix this hook to run only once after all test cases have finished.
  • This hook is used for cleaning up the state of our application after each test.
  • After hook is also for asserting what is happening during the test.
  • This is also used to delete any data created by a test or to ensure that a specific element is no longer visible on the page.

Let us take the same example as before hook and automate autopract site.

describe('Automate AutoPract',()=>{
   before(() => {
       cy.visit('http://www.autopract.com/#/home/fashion')
       cy.get('.close').as('Popup')
       
   })
   
   it('Should click POPUP',()=>{
       cy.get('@Popup').click()
   })
   after(function(){
       cy.log('Test Ended')
   })
})

This should finish the test and print the log inside after the hook.

We can see after all hooks or after the hook has been triggered after the test is completed successfully.

Related Content
Cypress Tutorial
Cypress Create the Aliases before each test
Oracle: Aliases
Tags
Cypress
  • Log in or register to post comments

Choose Your Technology

  1. Agile
  2. Apache Groovy
  3. Apache Hadoop
  4. Apache HBase
  5. Apache Spark
  6. Appium
  7. AutoIt
  8. AWS
  9. Behat
  10. Cucumber Java
  11. Cypress
  12. DBMS
  13. Drupal
  14. GitHub
  15. GitLab
  16. GoLang
  17. Gradle
  18. HTML
  19. ISTQB Foundation
  20. Java
  21. JavaScript
  22. JMeter
  23. JUnit
  24. Karate
  25. Kotlin
  26. LoadRunner
  27. matplotlib
  28. MongoDB
  29. MS SQL Server
  30. MySQL
  31. Nightwatch JS
  32. PactumJS
  33. PHP
  34. Playwright
  35. Playwright Java
  36. Playwright Python
  37. Postman
  38. Project Management
  39. Protractor
  40. PyDev
  41. Python
  42. Python NumPy
  43. Python Pandas
  44. Python Seaborn
  45. R Language
  46. REST Assured
  47. Ruby
  48. Selenide
© Copyright By iVagus Services Pvt. Ltd. 2023. All Rights Reserved.

Footer

  • Cookie Policy
  • Privacy Policy
  • Terms of Use