Cypress Clock Command

The Clock command in cypress overrides the global function, which is time-related, allowing them to be controlled synchronously via the cy.tick() which comes yielded from the clock object.

We can control setTimeout, clearTimeout, setInterval, clearInterval, Date Objects. The clock starts at the Unix epoch, meaning when we instantiate a new Date in our application, it will have the date and time of January 1st, 1970.

Syntax

cy.clock()
cy.clock(now)
cy.clock(now, functionNames)
cy.clock(options)
cy.clock(now, options)
cy.clock(now, functionNames, options)

Correct Usage Of Clock:

cy.clock()

Arguments Used In Clock:

now: Timestamp specifying where the clock should begin.
functionNames: Native function name that the clock should override.
Options: Pass in an options object to change the default behavior of cy.clock() like a log that displays the command in the command log, and the default is true.

Examples

Tick:

• cy.tick() is used to move time which can be used between test steps.

describe('Clock',()=>{

    it('Scroll',()=>{

       

        cy.visit('http://www.autopract.com/#/home/fashion')
        cy.clock()
        cy.tick(2000)

        cy.get("button[aria-label='Close'] ").click()

        

        })
    })

• Accessing The Clock Object To Move Time Synchronously.

describe('Clock',()=>{

    it('Scroll',()=>{

       

        cy.visit('http://www.autopract.com/#/home/fashion')
        cy.clock()
        cy.clock().then((clock) => {
            clock.tick(1000)
          })

        cy.get("button[aria-label='Close'] ").click()
      

        

        })
    })

• We can also use the clock object yielded by cy.clock().
• cy.clock() can be called again for this purpose later in a chain if needed.

cy.get('form').then(($form) => {
  this.clock.tick(1000)
  // do something with $form ...
})

• You can also get the selector and then create an object to pass this.clock in any .then() callback.

Specify A Now TimeStamp:

const now = new Date(2022, 6, 17) // month is 0-indexed

cy.clock(now)
cy.visit('https://spicejet.com')
cy.get('#date').should('have.value', '04/14/2022')

Restore Clock:

• We can restore the clock and allow our application to resume without manipulating native global functions related to time.

describe('Clock',()=>{

    it('Scroll',()=>{

       

        cy.visit('http://www.autopract.com/#/home/fashion')
        cy.clock()
        cy.clock().then((clock) => {
            clock.tick(1000)
          })

        cy.get("button[aria-label='Close'] ").click()
        //restores the clock
        cy.clock().then((clock) => {
        clock.restore()
})

    

        })
    })

• We can also use the invoke() to invoke the restore function directly.

cy.clock().invoke('restore')

Rules For Using Clock:

• cy.clock() needs to be chained off with cy.
• cy.clock() will not accept assertions as it is a utility command.
• cy.clock() cannot timeout.