Cypress - Debugging

Cypress - Debugging Techniques

Cypress offers excellent debugging capabilities, primarily through its interactive Test Runner. This allows you to ‘time-travel’ through commands, inspect the application’s state at each step, and use familiar browser developer tools.

Key Debugging Features & Techniques:

• Time-Traveling Command Log: In the Test Runner, clicking on a command in the log shows a DOM snapshot of the application at that specific moment. You can see what Cypress saw.
• DOM Inspection: Pin a command in the log to keep its DOM snapshot active while you use browser dev tools to inspect elements.
• cy.pause(): Inserts a breakpoint in your test. Execution halts, allowing you to inspect the application, step through subsequent commands one by one, or resume full execution.
• cy.debug(): Logs information about the current subject yielded by the previous command to the console. It also inserts a debugger statement, pausing execution if browser dev tools are open.
• debugger; Statement: You can place a standard JavaScript debugger; statement anywhere in your test code (or application code). When browser dev tools are open, execution will pause at this line.
• Browser Developer Tools: Use the console (e.g., console.log()), network tab, and element inspector of your browser (within the Cypress Test Runner’s browser instance) just like you would during normal web development.

Debugging Example

Let’s illustrate with an example:

describe('Debugging Example Suite', function() {
  it('Demonstrates debugging tools', function() {
    cy.visit('https://example.cypress.io/commands/actions');

    // Find an element and interact with it
    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com');

    // Pause execution to inspect
    cy.log('Pausing execution...');
    cy.pause(); // Test execution will pause here

    // Use cy.debug() to inspect the subject of the previous command
    cy.get('.action-email').debug(); // Logs element and pauses if dev tools open

    cy.get('#couponCode1').type('MYCOUPON');

    // Using debugger statement
    cy.get('#couponCode1').then(($input) => {
      const value = $input.val();
      console.log('Coupon Value:', value);
      // debugger; // Execution will pause here if dev tools are open
    });

    cy.log('Test finished.');
  });
});

Execution and Debugging Flow:

1. When cy.pause() is encountered, the Test Runner will display ‘Paused’ and buttons to ‘Resume’ or ‘Step Over’ the next command. You can inspect the DOM, application state, and command log up to this point.

2. If you click ‘Resume’, the test continues. When cy.debug() is hit, it logs details about the .action-email element to the DevTools console and pauses if DevTools are open.

3. If the debugger; line is uncommented and DevTools are open, execution will pause there, allowing you to inspect variables like value in the DevTools ‘Sources’ panel.

Inspecting in Developer Tools: When a test is paused (e.g., via cy.pause(), cy.debug(), or debugger;), or when you click on a command in the Test Runner log:

• Console Output: The DevTools Console will show information for the command (e.g., ‘Command: get’, ‘Yielded: ’). For cy.debug(), it will show the yielded subject and information about it.
• DOM Snapshots: The Test Runner provides DOM snapshots. Clicking on a command shows the page state before and after the command. You can also pin a snapshot and inspect it with the browser’s element inspector.
• Network Requests: The Network tab in DevTools can be used to inspect XHRs and other requests made by your application during the test.

Common Learning Obstacle: Understanding the difference between Cypress commands (which are asynchronous and queued) and synchronous JavaScript code within .then() or hooks. debugger; is effective for synchronous code, while cy.pause() and cy.debug() are better for pausing the flow of Cypress commands.

Real-world Application: When a test fails unexpectedly, cy.pause() before the failing command or cy.debug() on the element selector can help you understand why the element is not found, not visible, or not in the expected state.

For more advanced debugging, such as Cypress’s own debugging logs, see the official documentation: [https://on.cypress.io/debugging]