cli icon indicating copy to clipboard operation
cli copied to clipboard

TypeError: Cannot read properties of null (reading 'nextSibling') during Percy DOM serialization with Cypress 14

Open patrickPav-omos opened this issue 9 months ago • 7 comments

The problem

When running Cypress tests with Percy integration against our company website, we're encountering DOM serialization errors that cause test failures. Specifically, we get TypeError: Cannot read properties of null (reading 'nextSibling') errors during Percy snapshot creation. Interestingly, the tests pass when running Cypress alone without Percy, indicating an issue with the Percy DOM serialization process rather than the Cypress tests themselves. The bug appears always on the last snapshot of the test, the snapshot is the last task before jumping to the next test.

Environment

  • Node version: v22.14.0
  • @percy/cli version: 1.30.9
  • Version of Percy SDK you're using: @percy/cypress 3.1.5
  • If needed, a build or snapshot ID: 39618715_build_39618715_cli_567912aff158ab92d3a5b0ef65e0d8fc7524e10a
  • OS version: macOS (Darwin 24.3.0)
  • Type of shell command-line [interface]: zsh

The Tests also fail running in a Google Cloud Container.

Debug logs

percy-logs.txt

Image

patrickPav-omos avatar Apr 02 '25 17:04 patrickPav-omos

@patrickPav-omos can you provide us with reproducible example?

prklm10 avatar Apr 02 '25 18:04 prklm10

@prklm10 thanks for your reply. Below is a reproducible example. It appears that the failing Percy snapshot is consistently linked to the Shopify checkout page. In other tests where no Shopify Checkout is involved, the issue does not occur. Unfortunately, our ability to modify this page is limited, as it is primarily controlled by Shopify.

import '@percy/cypress'
/// <reference types="cypress" />

describe('Percy Error Reproduction', () => {
  // Run before each test to set the viewport and visit the homepage
  beforeEach(() => {
    cy.viewport(1920, 1080)
  })

  it('should take a snapshot in the checkout', () => {
    cy.visit('https://metaflow.de/products/stoffwechsel-shake-suess?variant=43566287356171')
    // Allow time for dynamic elements to load
    cy.wait(4000)

    // Take Percy snapshot of the main page
    cy.percySnapshot('MF-0-Error-Reproduction-PDP')

    // Add product to the cart by clicking the "In den Warenkorb" button
    cy.contains('In den Warenkorb', { matchCase: false }).click({ force: true })

    // Wait for the cart to load before taking a snapshot
    cy.wait(3000)

    // Take Percy snapshot of the cart page
    cy.percySnapshot('MF-1-Error-Reproduction-Cart', {
      widths: [375, 1280],
      percyCSS: `
      :is(.drawer, .popover):not(:defined) { 
        display: block !important; 
      }
    `,
    })

    // Proceed to checkout by clicking the "Zur Kasse" button
    cy.contains('Zur Kasse').click()

    cy.wait(8000) // Ensure elements are loaded before snapshot

    // Take Percy snapshot of the checkout page
    cy.percySnapshot('MF-2-Error-Reproduction-Checkout')
  })
})

patrickPav-omos avatar Apr 03 '25 07:04 patrickPav-omos

We will check it and get back to you. Thanks for reproducible example @patrickPav-omos

prklm10 avatar Apr 04 '25 06:04 prklm10

@patrickPav-omos we are not able to replicate this issue. with the script that you have shared. Percy screenshot is working correctly. We will look into your log and get back to you regarding the issue.

prklm10 avatar Apr 08 '25 10:04 prklm10

@patrickPav-omos can you answer few questions ->

  • Is it failing all the time?
  • Issue happening with @percy/cli v 1.30.9 only or previous version as well. Can you try it with 1.30.7

prklm10 avatar Apr 09 '25 05:04 prklm10

@prklm10

  1. Yes, we are running a test suite once a day, in the night. Tests are constantly failing to get the last snapshot on the checkout page. You can access the report from today here.
  2. I downgraded the version and did another test-run, with the example I provided you. Same problem, same error. The log of the downgraded run is below.

percy-logs.txt

Build ID 1.30.9: 39747387_build_39747387_cli_f2a17fc0bed849479e5340 Build ID 1.30.7: 39747420_build_39747420_cli_9740835547e3ab7836d029

patrickPav-omos avatar Apr 09 '25 07:04 patrickPav-omos

@patrickPav-omos Can you create a support ticket on Percy, BrowseStack. Please mention this github issue and it has been discussed and we will need a call with percy engineering team for this.

prklm10 avatar Apr 11 '25 05:04 prklm10

This issue is stale because it has been open for more than 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

github-actions[bot] avatar Apr 29 '25 19:04 github-actions[bot]

To push this forward:
We are currently in communication and awaiting a response, as the issue continues to affect a significant portion of our tests and is blocking snapshot generation.
A reproduction repository has been provided to illustrate the problem:
👉 https://github.com/patrickPav-omos/percy-error-reproduction

patrickPav-omos avatar Apr 30 '25 07:04 patrickPav-omos

This issue is stale because it has been open for more than 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

github-actions[bot] avatar May 27 '25 19:05 github-actions[bot]

This issue was closed because it has been stalled for 28 days with no activity.

github-actions[bot] avatar Jun 17 '25 19:06 github-actions[bot]