Fix: Add null check for cloneOwnerNode in serializeCSSOM (#2094)

- Adds null check before calling styleSheetFromNode() to prevent
  'Cannot read properties of null (reading sheet)' error
- Skips stylesheets when cloneOwnerNode is not found in cloned DOM
- Adds test case to verify the fix handles missing elements gracefully

Fixes: PER-6656

Author: pranavz28

packages/dom/src/serialize-cssom.js

@@ -61,6 +61,7 @@ export function serializeCSSOM(ctx) {
           styleId = styleSheet.ownerNode.getAttribute('data-percy-element-id');
           if (!styleId && ignoreStyleSheetSerializationErrors) continue;
           cloneOwnerNode = clone.querySelector(`[data-percy-element-id="${styleId}"]`);
+          if (!cloneOwnerNode) continue; // Skip if element not found in clone
           if (styleSheetsMatch(styleSheet, styleSheetFromNode(cloneOwnerNode))) continue;
           let style = document.createElement('style');
 

packages/dom/test/serialize-css.test.js

@@ -425,5 +425,39 @@ describe('serializeCSSOM', () => {
       document.head.removeChild(linkElement1);
       URL.revokeObjectURL(blobUrl1);
     });
+
+    it('skips stylesheet when cloneOwnerNode is not found in clone', () => {
+      withExample('<div class="box"></div>');
+      withCSSOM('.box { height: 500px; }');
+
+      const sheet = document.styleSheets[0];
+      const owner = sheet.ownerNode;
+      owner.setAttribute('data-percy-element-id', 'test-id');
+
+      // Create a clone without the matching element
+      const clone = document.createDocumentFragment();
+      const cloneBody = document.createElement('body');
+      clone.appendChild(cloneBody);
+
+      const resources = new Set();
+      const cache = new Map();
+      const warnings = new Set();
+
+      // Should not throw when element is missing from clone
+      expect(() => serializeCSSOM({ dom: document, clone, resources, cache, warnings })).not.toThrow();
+
+      // Verify no style element was added since the owner wasn't found
+      let found = false;
+      for (let node of clone.childNodes) {
+        if (node.querySelectorAll) {
+          const serializedStyles = node.querySelectorAll('[data-percy-cssom-serialized]');
+          if (serializedStyles.length > 0) {
+            found = true;
+            break;
+          }
+        }
+      }
+      expect(found).toBe(false);
+    });
   });
 });