chore: cypress test with fake angular tainting prototypes

.github/workflows/testcafe.yml

@@ -31,8 +31,6 @@ jobs:
             name: Firefox
           - browser: 'browserstack:ie'
             name: IE11
-          - browser: 'browserstack:safari'
-            name: Safari
 
     steps:
       - uses: actions/checkout@v4
@@ -59,7 +57,7 @@ jobs:
           BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
           RUN_ID: ${{ github.run_id }}
           BROWSER: ${{ matrix.browser }}
-        run: pnpm testcafe ${{ matrix.browser }} --stop-on-first-fail
+        run: pnpm testcafe "${{ matrix.browser }}" --stop-on-first-fail
 
       - name: Check ${{ matrix.name }} events
         timeout-minutes: 10

cypress.config.ts

@@ -6,4 +6,5 @@ export default defineConfig({
     e2e: {
         specPattern: 'cypress/e2e/**/*.cy.{js,ts}',
     },
+    experimentalWebKitSupport: true,
 })

cypress/e2e/session-recording.fake-angular.cy.ts

@@ -0,0 +1,63 @@
+/// <reference types="cypress" />
+
+import { start } from '../support/setup'
+
+/**
+ * We have seen that when Angular "taints" prototypes and rrweb loads fresh copies from an iframe
+ * That iOS and Safari were not providing a mutation observer, this created unplayable recordings
+ * let's assert that we do get mutations
+ */
+describe('Session recording', () => {
+    describe('with fake angular running', () => {
+        beforeEach(() => {
+            cy.window().then((win) => {
+                ;(win as any).Zone = { my: 'fake zone' }
+            })
+        })
+
+        it('captures session events despite getting untainted things from iframe', () => {
+            start({
+                options: {
+                    session_recording: {},
+                },
+                decideResponseOverrides: {
+                    isAuthenticated: false,
+                    sessionRecording: {
+                        endpoint: '/ses/',
+                    },
+                    capturePerformance: true,
+                    autocapture_opt_out: true,
+                },
+                url: './playground/cypress',
+            })
+            cy.wait('@recorder-script')
+
+            cy.get('[data-cy-change-dom-button]')
+                .click()
+                .wait('@session-recording')
+                .then(() => {
+                    cy.phCaptures({ full: true }).then((captures) => {
+                        expect(captures.map((c) => c.event)).to.deep.equal(['$pageview', '$snapshot'])
+
+                        expect(captures[1]['properties']['$snapshot_data']).to.have.length.above(9).and.below(20)
+                        // a meta and then a full snapshot
+                        expect(captures[1]['properties']['$snapshot_data'][0].type).to.equal(4) // meta
+                        expect(captures[1]['properties']['$snapshot_data'][1].type).to.equal(2) // full_snapshot
+                        expect(captures[1]['properties']['$snapshot_data'][2].type).to.equal(5) // custom event with options
+                        expect(captures[1]['properties']['$snapshot_data'][3].type).to.equal(5) // custom event with posthog config
+                        // Making a set from the rest should all be 3 - incremental snapshots
+                        const incrementalSnapshots = captures[1]['properties']['$snapshot_data'].slice(4)
+                        expect(Array.from(new Set(incrementalSnapshots.map((s) => s.type)))).to.deep.eq([3])
+
+                        const mutations = incrementalSnapshots.filter((s) => !!s.data && s.data.source === 0)
+                        expect(mutations).to.have.length(1)
+
+                        const { attributes, removes, adds } = mutations[0].data
+                        expect(attributes[0].attributes.style).to.eql({ 'background-color': 'blue' })
+                        expect(removes).to.have.length(1)
+                        expect(adds[0].node.textContent).to.eq('i r been changed')
+                    })
+                })
+        })
+    })
+})

package.json

@@ -100,6 +100,7 @@
         "localStorage": "1.0.4",
         "msw": "^1.3.3",
         "node-fetch": "^2.6.11",
+        "playwright-webkit": "^1.49.0",
         "posthog-js": "link:",
         "preact-render-to-string": "^6.3.1",
         "prettier": "^2.7.1",
@@ -130,5 +131,6 @@
             "@rrweb/[email protected]": "patches/@[email protected]",
             "@rrweb/[email protected]": "patches/@[email protected]"
         }
-    }
+    },
+    "packageManager": "[email protected]+sha512.c8180b3fbe4e4bca02c94234717896b5529740a6cbadf19fa78254270403ea2f27d4e1d46a08a0f56c89b63dc8ebfd3ee53326da720273794e6200fcf0d184ab"
 }

playground/cypress/index.html

@@ -23,6 +23,11 @@
     Make XHR post network call
 </button>
 
+    <div id="a-red-box" style="padding: 4px 8px; color: white;width: 250px; height: 75px; background-color: red;">I START RED, BUT CAN BE CHANGED BY A BUTTON BELOW</div>
+    <button data-cy-change-dom-button onclick="document.getElementById('a-red-box').style.backgroundColor='blue';document.getElementById('a-red-box').innerText='i r been changed'">
+        Change the DOM
+    </button>
+
 <script>
     function makeXHRNetworkPOST() {
         const xhr = new XMLHttpRequest();