feat: support snapshots and console props within multi-domain

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">

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')
+      })
+    })
+  })
 })

packages/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')
+        })
+      })
+    })
+  })
 })

packages/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')
+      })
+    })
+  })
 })

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')
+        })
+      })
+    })
+  })
 })

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"}')
+      })
+    })
+  })
 })