TypeError: Cannot read properties of null (reading 'nextSibling') during Percy DOM serialization with Cypress 14
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
@patrickPav-omos can you provide us with reproducible example?
@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')
})
})
We will check it and get back to you. Thanks for reproducible example @patrickPav-omos
@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.
@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
- 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.
- 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.
Build ID 1.30.9: 39747387_build_39747387_cli_f2a17fc0bed849479e5340 Build ID 1.30.7: 39747420_build_39747420_cli_9740835547e3ab7836d029
@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.
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.
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
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.
This issue was closed because it has been stalled for 28 days with no activity.