Cypress – Debugging

Cypress has a very good debugging feature, where we can time travel and see what has actually happened during the test execution. This can be done by hovering the mouse over the Test Runner logs.

As we move through the steps in the Test Runner window, the elements get highlighted. We can also use the Cypress command pause. This pauses the execution, during which we can debug the previous steps. After that, we can again resume execution.

Implementation

The implementation of commands for debugging in Cypress is as follows โˆ’

describe('Adglob Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch the application
      cy.visit("https://accounts.google.com");
      // enable cookie logging
      Cypress.Cookies.debug(true)
      cy.getCookies
      //pause execution
      cy.pause()
      cy.setCookie('cookie1', 'value1' )
   });
});

The output logs show that the execution has been paused (denoted by Paused button). Then again, we can resume it after debugging the previous steps by clicking the Resume button (appear beside Paused button).

The output logs now have all the steps executed after resuming from pause.

If we open the Developer Console (pressing F12) on the browser, and select a step from the Test Runner, the Console shall show the Command used and the valued Yielded.

For example, for the setCookie step, the Console shows Command โˆ’ setCookie and Yielded shows the cookie name โˆ’ cookie1 and value โˆ’ value1.

Leave a Reply