feat: support snapshots and console props within multi-domain (#20949)

* Empty commit to get a new percy nonce * Implement snapshots and consoleprops within multi origin further progress with getters cleaned up log/snapshot serialization attempt to pass and hydrate value state of serialized dom elements temp commit traversal dom by some stretch of a miracle this is working... still somehow working after massive performance issues with full tree serialization, fix here is to just attach values to inputs for reifying on primary now we are cookin test WIP tests WIP working multi-domain actions snapshots tests added more tests to verify snapshots add tests and refactor certain tests to make simpler added misc snapshot tests add navigation snapshot placeholder add network request snapshot tests add shadow querying snapshot tests update test names added snapshot querying spec added screenshot snapshot test add spies,clocks, and stubs tests implement snapshot tests for traversal commands rename local storeage snapshot tests to fit convention add viewport snapshot tests rename snapshot traversal to fit naming convention add snapshot waiting tests added window snapshot tests implement navigation snapshot tests now that sinon proxy issues internal to log are now fixed refactor multi-domain snapshot tests to leverage utility method over redefining in each spec * fix lint types issues on serializationKeys * rename switchToDomain to origin (might help with failing tests... ya know?) * rename snapshot files to fit origin paradigm and fix misname on primaryDomainCommunicator * fix .tick() snapshot/consoleProps test (figure out the deal with consoleProps sometimes being a function) * rename multiDomainCommunicator to origin primaryDomainCommunicator * don't invoke functions with arguments (we need to be more explicit about the functions we are invoking * opt for my explicit serialization behavior with functions, never attempt to serialize bluebird promises * move serialization to folder and change name to index * refactor log serialization to own file, clean up code and add comments to what is going on in this 'here be dragons' code * make sure to serialize functions for snapshots * fix pause snapshot test for multi origin * refactor postprocess snapshot into own method to handle in final state snapshot processing for cross origin * update snapshot comments to be more accurate * fix renamings within tests * fix path in log.ts serialization * revert about:blank changes in aut-iframe which was breaking session * move all log/snapshot serialization magic invokations into the communicator * update typos and fix namings of preprocess and reify * further name changes * fix snapshot generator to always reify snapshot (<body>) over attempting to match in the DOM * unskip test that was fixed with explicit function serialization for logs * fix flaky screenshot test that was screensize dependent * rename a few items in the log serialization file * clean up snapshot style reification to be more straightforward and remove redundancies * refactor snapshots code to be more readable * update reifyDomElement docs to actually explain what hte method does * fix typos within the log serialization file pertaining to comments * use Cypress._ over lodash import to reduce spec bundle size * remove snapshots test folder and migrate tests into commands directory with #consoleProps context blocks for each * change removeSrcAttributeFromAUTIframe name to removeSrcAttribute as it is implied on the AUT * update log consoleProps comment to better reflect cross origin nature * remove skipped consoleProps tests that do not have a command log to test against * add createSnapshot to internal types (might need more specifics on this) * refactor multi-domain consoleProp tests to use shouldWithTimeout custom command to avoid setTimeouts on command queue event to make test implementation cleaner * simplify DOM hydration for input based elements * update preprocessedHTMLElement type * clean up some documentation and remove TS ignores. added getStyles to internal-types. * add comment to aut-iframe on src attr removal for posterity * reverse snapshot ternary for readability * add shouldWithTimeout into spec-types and refactor out of internal-types * add getAll type to cypress spec-types * compare originPolicy of top and AUT instead of just origin to make snapshots work in subdomains * add comment to _storeOriginalState for future developers and to add clarity * add some basic log serialization tests that show full pre/reification of log, as well as state hydration for innerHTML. break out object/array methods from log like serialization into own methods * update variables to metasyntactic * add renderProps assertion for cy.request * apply suggestions from code review to clean up log serializer * make snapshot serialization more generic and typesafe * work around firefox 93 issues by unsetting the document in cy state as the document is in a cross origin context in the primary, which means accessing any elements will not work * clean up code and implement suggestions in code review * remove crossOriginLog in favor of nullish coalescing if visible on the log is not set * if get is null, return null for whole snapshot Co-authored-by: Ryan Manuel <ryanm@cypress.io> Co-authored-by: Matt Henkes <mjhenkes@gmail.com>
cypress-io · Apr 22, 2022 · a1101e6 · a1101e6
1 parent 885541e
commit a1101e6
Show file tree

Hide file tree

Showing 37 changed files with 3,621 additions and 81 deletions.
diff --git a/packages/driver/cypress/fixtures/dom.html b/packages/driver/cypress/fixtures/dom.html
@@ -437,8 +437,8 @@
       </select>
 
       <select name="foods">
-        <option value="Japanese">Ramen</option>
-        <option value="Ramen">Japanese</option>
+        <option value="Ramen">Ramen</option>
+        <option value="Japanese">Japanese</option>
       </select>
 
       <select name="names">

diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_actions.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_actions.spec.ts
diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_aliasing.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_aliasing.spec.ts
@@ -1,3 +1,5 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
 context('cy.origin aliasing', () => {
   beforeEach(() => {
     cy.visit('/fixtures/multi-domain.html')
@@ -10,4 +12,39 @@ context('cy.origin aliasing', () => {
       cy.get('@checkbox').click().should('be.checked')
     })
   })
+
+  context('#consoleProps', () => {
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.as()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#button').as('buttonAlias')
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { alias, aliasType, consoleProps, $el } = findCrossOriginLogs('get', logs, 'foobar.com')
+
+        // make sure $el is in fact a jquery instance to keep the logs happy
+        expect($el.jquery).to.be.ok
+
+        expect(alias).to.equal('buttonAlias')
+        expect(aliasType).to.equal('dom')
+        expect(consoleProps.Command).to.equal('get')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Selector).to.equal('#button')
+
+        // The Yielded value here SHOULD be correct as it will be reified from its props as it should not be found in the current DOM state
+        expect(consoleProps.Yielded.tagName).to.equal('BUTTON')
+        expect(consoleProps.Yielded.getAttribute('id')).to.equal('button')
+      })
+    })
+  })
 })
diff --git a/...ages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_assertions.spec.ts b/...ages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_assertions.spec.ts
@@ -1,3 +1,5 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
 context('cy.origin assertions', () => {
   beforeEach(() => {
     cy.visit('/fixtures/multi-domain.html')
@@ -10,4 +12,45 @@ context('cy.origin assertions', () => {
       .should('not.be.checked').and('not.be.disabled')
     })
   })
+
+  context('#consoleProps', () => {
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.should() and .and()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get(':checkbox[name="colors"][value="blue"]')
+        .should('not.be.checked').and('not.be.disabled')
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const assertionLogs = findCrossOriginLogs('assert', logs, 'foobar.com')
+
+        expect(assertionLogs[0].consoleProps.Message).to.equal('expected <input> not to be checked')
+        expect(assertionLogs[1].consoleProps.Message).to.equal('expected <input> not to be disabled')
+
+        assertionLogs.forEach(({ $el, consoleProps }) => {
+          expect($el.jquery).to.be.ok
+
+          expect(consoleProps.Command).to.equal('assert')
+          expect(consoleProps.subject[0]).to.have.property('tagName').that.equals('INPUT')
+          expect(consoleProps.subject[0]).to.have.property('value').that.equals('blue')
+          expect(consoleProps.subject[0].getAttribute('name')).to.equal('colors')
+        })
+      })
+    })
+  })
 })
diff --git a/...ages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts b/...ages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts
@@ -1,3 +1,5 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
 context('cy.origin connectors', () => {
   beforeEach(() => {
     cy.visit('/fixtures/multi-domain.html')
@@ -43,4 +45,75 @@ context('cy.origin connectors', () => {
       })
     })
   })
+
+  context('#consoleProps', () => {
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.its()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#by-id>input').its('length')
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps, $el } = findCrossOriginLogs('its', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(consoleProps.Command).to.equal('its')
+        expect(consoleProps.Property).to.equal('.length')
+        expect(consoleProps.Yielded).to.equal(3)
+
+        expect(consoleProps.Subject.length).to.equal(3)
+
+        // make sure subject elements are indexed in the correct order
+        expect(consoleProps.Subject[0]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Subject[0]).to.have.property('id').that.equals('input')
+
+        expect(consoleProps.Subject[1]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Subject[1]).to.have.property('id').that.equals('name')
+
+        expect(consoleProps.Subject[2]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Subject[2]).to.have.property('id').that.equals('age')
+      })
+    })
+
+    it('.invoke()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#button').invoke('text')
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps, $el } = findCrossOriginLogs('invoke', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(consoleProps.Command).to.equal('invoke')
+        expect(consoleProps.Function).to.equal('.text()')
+        expect(consoleProps.Yielded).to.equal('button')
+
+        expect(consoleProps.Subject).to.have.property('tagName').that.equals('BUTTON')
+        expect(consoleProps.Subject).to.have.property('id').that.equals('button')
+      })
+    })
+  })
 })
diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_cookies.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_cookies.spec.ts
@@ -1,3 +1,5 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
 context('cy.origin cookies', () => {
   beforeEach(() => {
     cy.visit('/fixtures/multi-domain.html')
@@ -34,4 +36,142 @@ context('cy.origin cookies', () => {
       cy.getCookies().should('be.empty')
     })
   })
+
+  context('#consoleProps', () => {
+    const { _ } = Cypress
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.getCookie()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.getCookies().should('be.empty')
+        cy.setCookie('foo', 'bar')
+        cy.getCookie('foo')
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('getCookie', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('getCookie')
+        expect(consoleProps.Yielded).to.have.property('domain').that.includes('foobar.com')
+        expect(consoleProps.Yielded).to.have.property('expiry').that.is.a('number')
+        expect(consoleProps.Yielded).to.have.property('httpOnly').that.equals(false)
+        expect(consoleProps.Yielded).to.have.property('secure').that.equals(false)
+        expect(consoleProps.Yielded).to.have.property('name').that.equals('foo')
+        expect(consoleProps.Yielded).to.have.property('value').that.equals('bar')
+        expect(consoleProps.Yielded).to.have.property('path').that.is.a('string')
+      })
+    })
+
+    it('.getCookies()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.getCookies().should('be.empty')
+
+        cy.setCookie('foo', 'bar')
+        cy.getCookies()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // get the last 'getCookies' command, which is the one we care about for this test
+        const allGetCookieLogs = findCrossOriginLogs('getCookies', logs, 'foobar.com')
+
+        const { consoleProps } = allGetCookieLogs.pop() as any
+
+        expect(consoleProps.Command).to.equal('getCookies')
+        expect(consoleProps['Num Cookies']).to.equal(1)
+
+        // can't exactly assert on length() as this is a array proxy object
+        expect(consoleProps.Yielded.length).to.equal(1)
+        expect(consoleProps.Yielded[0]).to.have.property('expiry').that.is.a('number')
+        expect(consoleProps.Yielded[0]).to.have.property('httpOnly').that.equals(false)
+        expect(consoleProps.Yielded[0]).to.have.property('secure').that.equals(false)
+        expect(consoleProps.Yielded[0]).to.have.property('name').that.equals('foo')
+        expect(consoleProps.Yielded[0]).to.have.property('value').that.equals('bar')
+        expect(consoleProps.Yielded[0]).to.have.property('path').that.is.a('string')
+      })
+    })
+
+    it('.setCookie()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.getCookies().should('be.empty')
+
+        cy.setCookie('foo', 'bar')
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('setCookie', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('setCookie')
+        expect(consoleProps.Yielded).to.have.property('domain').that.includes('foobar.com')
+        expect(consoleProps.Yielded).to.have.property('expiry').that.is.a('number')
+        expect(consoleProps.Yielded).to.have.property('httpOnly').that.equals(false)
+        expect(consoleProps.Yielded).to.have.property('secure').that.equals(false)
+        expect(consoleProps.Yielded).to.have.property('name').that.equals('foo')
+        expect(consoleProps.Yielded).to.have.property('value').that.equals('bar')
+        expect(consoleProps.Yielded).to.have.property('path').that.is.a('string')
+      })
+    })
+
+    it('.clearCookie()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.setCookie('foo', 'bar')
+        cy.getCookie('foo').should('not.be.null')
+        cy.clearCookie('foo')
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('clearCookie', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('clearCookie')
+        expect(consoleProps.Yielded).to.equal('null')
+        expect(consoleProps['Cleared Cookie']).to.have.property('domain').that.includes('foobar.com')
+        expect(consoleProps['Cleared Cookie']).to.have.property('expiry').that.is.a('number')
+        expect(consoleProps['Cleared Cookie']).to.have.property('httpOnly').that.equals(false)
+        expect(consoleProps['Cleared Cookie']).to.have.property('secure').that.equals(false)
+        expect(consoleProps['Cleared Cookie']).to.have.property('name').that.equals('foo')
+        expect(consoleProps['Cleared Cookie']).to.have.property('value').that.equals('bar')
+        expect(consoleProps['Cleared Cookie']).to.have.property('path').that.is.a('string')
+      })
+    })
+
+    it('.clearCookies()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.setCookie('foo', 'bar')
+        cy.setCookie('faz', 'baz')
+
+        cy.getCookies().should('have.length', 2)
+        cy.clearCookies()
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('clearCookies', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('clearCookies')
+        expect(consoleProps['Num Cookies']).to.equal(2)
+
+        expect(consoleProps.Yielded).to.equal('null')
+
+        expect(consoleProps['Cleared Cookies'].length).to.equal(2)
+
+        expect(consoleProps['Cleared Cookies'][0]).to.have.property('name').that.equals('foo')
+        expect(consoleProps['Cleared Cookies'][0]).to.have.property('value').that.equals('bar')
+
+        expect(consoleProps['Cleared Cookies'][1]).to.have.property('name').that.equals('faz')
+        expect(consoleProps['Cleared Cookies'][1]).to.have.property('value').that.equals('baz')
+
+        _.forEach(consoleProps['Cleared Cookies'], (clearedCookie) => {
+          expect(clearedCookie).to.have.property('httpOnly').that.equals(false)
+          expect(clearedCookie).to.have.property('secure').that.equals(false)
+          expect(clearedCookie).to.have.property('path').that.is.a('string')
+        })
+      })
+    })
+  })
 })
diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_files.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_files.spec.ts
@@ -1,3 +1,5 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
 context('cy.origin files', () => {
   beforeEach(() => {
     cy.visit('/fixtures/multi-domain.html')
@@ -44,4 +46,51 @@ context('cy.origin files', () => {
       })
     })
   })
+
+  context('#consoleProps', () => {
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.readFile()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.readFile('cypress/fixtures/example.json')
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('readFile', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('readFile')
+        expect(consoleProps['File Path']).to.include('cypress/fixtures/example.json')
+        expect(consoleProps.Contents).to.deep.equal({ example: true })
+      })
+    })
+
+    it('.writeFile()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const contents = JSON.stringify({ foo: 'bar' })
+
+        cy.stub(Cypress, 'backend').resolves({
+          contents,
+          filePath: 'foo.json',
+        })
+
+        cy.writeFile('foo.json', contents)
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('writeFile', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('writeFile')
+        expect(consoleProps['File Path']).to.equal('foo.json')
+        expect(consoleProps.Contents).to.equal('{"foo":"bar"}')
+      })
+    })
+  })
 })