From 50e74042e670b626ed9c0399b533c6c7a540f602 Mon Sep 17 00:00:00 2001 From: Ryan Manuel Date: Mon, 28 Mar 2022 14:23:42 -0500 Subject: [PATCH 01/54] Empty commit to get a new percy nonce From 638a36e3c88d8afc7017c2dfe27f0562062641ef Mon Sep 17 00:00:00 2001 From: Bill Glesias Date: Wed, 30 Mar 2022 16:59:56 -0400 Subject: [PATCH 02/54] 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 --- packages/driver/cypress/fixtures/dom.html | 4 +- .../multi_domain_snapshot_actions.spec.ts | 624 ++++++++++++++++++ .../multi_domain_snapshot_aliasing.spec.ts | 44 ++ .../multi_domain_snapshot_assertions.spec.ts | 48 ++ .../multi_domain_snapshot_connectors.spec.ts | 85 +++ .../multi_domain_snapshot_cookies.spec.ts | 174 +++++ .../multi_domain_snapshot_files.spec.ts | 69 ++ ...ulti_domain_snapshot_local_storage.spec.ts | 40 ++ .../multi_domain_snapshot_location.spec.ts | 84 +++ .../multi_domain_snapshot_misc.spec.ts | 157 +++++ .../multi_domain_snapshot_navigation.spec.ts | 91 +++ ...i_domain_snapshot_network_requests.spec.ts | 47 ++ .../multi_domain_snapshot_querying.spec.ts | 81 +++ ...ti_domain_snapshot_querying_shadow.spec.ts | 41 ++ .../multi_domain_snapshot_screenshot.spec.ts | 52 ++ ...domain_snapshot_spies_stubs_clocks.spec.ts | 122 ++++ .../multi_domain_snapshot_traversal.spec.ts | 529 +++++++++++++++ .../multi_domain_snapshot_viewport.spec.ts | 36 + .../multi_domain_snapshot_waiting.spec.ts | 35 + .../multi_domain_snapshot_window.spec.ts | 71 ++ packages/driver/cypress/support/utils.js | 14 + packages/driver/src/cy/snapshots.ts | 165 +++-- packages/driver/src/cypress/log.ts | 7 +- packages/driver/src/multi-domain/cypress.ts | 16 + .../driver/src/multi-domain/events/logs.ts | 16 +- packages/driver/src/util/serialization.ts | 266 +++++++- packages/runner-ct/src/iframe/iframes.tsx | 2 + packages/runner-shared/src/event-manager.js | 11 +- .../runner-shared/src/iframe/aut-iframe.js | 46 +- .../runner-shared/src/iframe/iframe-model.js | 38 +- packages/runner/src/iframe/iframes.jsx | 2 + 31 files changed, 2928 insertions(+), 89 deletions(-) create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_actions.spec.ts create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_aliasing.spec.ts create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_assertions.spec.ts create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_connectors.spec.ts create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_cookies.spec.ts create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_files.spec.ts create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_local_storage.spec.ts create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_location.spec.ts create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_misc.spec.ts create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_navigation.spec.ts create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_network_requests.spec.ts create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_querying.spec.ts create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_querying_shadow.spec.ts create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_screenshot.spec.ts create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_spies_stubs_clocks.spec.ts create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_traversal.spec.ts create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_viewport.spec.ts create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_waiting.spec.ts create mode 100644 packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_window.spec.ts diff --git a/packages/driver/cypress/fixtures/dom.html b/packages/driver/cypress/fixtures/dom.html index 1d3e241f2a46..6347924ceccf 100644 --- a/packages/driver/cypress/fixtures/dom.html +++ b/packages/driver/cypress/fixtures/dom.html @@ -437,8 +437,8 @@ not to be checked') + expect(assertionLogs[1].consoleProps.Message).to.equal('expected not to be disabled') + + assertionLogs.forEach(({ $el, crossOriginLog, consoleProps }) => { + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true + + 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') + }) + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get(':checkbox[name="colors"][value="blue"]') + .should('not.be.checked').and('not.be.disabled') + }) + }) +}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_connectors.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_connectors.spec.ts new file mode 100644 index 000000000000..ced164a4b4bd --- /dev/null +++ b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_connectors.spec.ts @@ -0,0 +1,85 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + +// @ts-ignore / session support is needed for visiting about:blank between tests +context('multi-domain snapshot connectors', { experimentalSessionSupport: true }, () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="dom-link"]').click() + }) + + // NOTE: there is no command log for .each() + it.skip('.each()', () => undefined) + + it('.its()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('its', logs, 'foobar.com') + + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true + + 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') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + // FIXME: snapshot of primary is showing for its + cy.get('#by-id>input').its('length') + }) + }) + + it('.invoke()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('invoke', logs, 'foobar.com') + + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true + + 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') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + // FIXME: snapshot of primary is showing for its + cy.get('#button').invoke('text') + }) + }) + + // NOTE: there is no command log for .spread() + it.skip('.spread()', () => undefined) + + // NOTE: there is no command log for .then() + it.skip('.then()', () => undefined) +}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_cookies.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_cookies.spec.ts new file mode 100644 index 000000000000..f40e6057d95f --- /dev/null +++ b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_cookies.spec.ts @@ -0,0 +1,174 @@ +import _ from 'lodash' +import { findCrossOriginLogs } from '../../../../support/utils' + +// @ts-ignore / session support is needed for visiting about:blank between tests +context('multi-domain snapshot cookies', { experimentalSessionSupport: true }, () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + + cy.clearCookies() + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="multi-domain-secondary-link"]').click() + }) + + it('.getCookie()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('getCookie', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + 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') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.getCookies().should('be.empty') + cy.setCookie('foo', 'bar') + cy.getCookie('foo') + }) + }) + + it('.getCookies()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + // get the last 'getCookies' command, which is the one we care about for this test + const allGetCookieLogs = findCrossOriginLogs('getCookies', logs, 'foobar.com') + + const { crossOriginLog, consoleProps } = allGetCookieLogs.pop() as any + + expect(crossOriginLog).to.be.true + + 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') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.getCookies().should('be.empty') + + cy.setCookie('foo', 'bar') + cy.getCookies() + }) + }) + + it('.setCookie()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('setCookie', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + 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') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.getCookies().should('be.empty') + + cy.setCookie('foo', 'bar') + }) + }) + + it('.clearCookie()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('clearCookie', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + 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') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.setCookie('foo', 'bar') + cy.getCookie('foo').should('not.be.null') + cy.clearCookie('foo') + }) + }) + + it('.clearCookies()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('clearCookies', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + 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') + }) + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.setCookie('foo', 'bar') + cy.setCookie('faz', 'baz') + + cy.getCookies().should('have.length', 2) + cy.clearCookies() + }) + }) +}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_files.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_files.spec.ts new file mode 100644 index 000000000000..8bf9692a7d7d --- /dev/null +++ b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_files.spec.ts @@ -0,0 +1,69 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + +// @ts-ignore / session support is needed for visiting about:blank between tests +context('multi-domain snapshot files', { experimentalSessionSupport: true }, () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="multi-domain-secondary-link"]').click() + }) + + // NOTE: there is no command log for .fixture(). shows up as a (new url) + it.skip('.fixture()', () => undefined) + + it('.readFile()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('readFile', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('readFile') + expect(consoleProps['File Path']).to.include('cypress/fixtures/example.json') + expect(consoleProps.Contents).to.deep.equal({ example: true }) + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.readFile('cypress/fixtures/example.json') + }) + }) + + // FIXME: this test hangs and needs investigation + it.skip('.writeFile()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('writeFile', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('writeFile') + expect(consoleProps['File Path']).to.equal('foo.json') + expect(consoleProps.Contents).to.equal('{"foo":"bar"}') + + done() + }, 250) + }) + + // FIXME: this test hangs when the console is open. + cy.switchToDomain('http://foobar.com:3500', () => { + const contents = JSON.stringify({ foo: 'bar' }) + + cy.stub(Cypress, 'backend').resolves({ + contents, + filePath: 'foo.json', + }) + + cy.writeFile('foo.json', contents) + }) + }) +}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_local_storage.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_local_storage.spec.ts new file mode 100644 index 000000000000..d883e5069814 --- /dev/null +++ b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_local_storage.spec.ts @@ -0,0 +1,40 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + +// @ts-ignore / session support is needed for visiting about:blank between tests +context('multi-domain snapshot local storage', { experimentalSessionSupport: true }, () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="multi-domain-secondary-link"]').click() + }) + + it('.clearLocalStorage()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('clearLocalStorage', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('clearLocalStorage') + expect(consoleProps.Yielded).to.be.null + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.window().then((win) => { + win.localStorage.setItem('foo', 'bar') + expect(win.localStorage.getItem('foo')).to.equal('bar') + }) + + cy.clearLocalStorage() + }) + }) +}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_location.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_location.spec.ts new file mode 100644 index 000000000000..b0def68d89d1 --- /dev/null +++ b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_location.spec.ts @@ -0,0 +1,84 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + +// @ts-ignore / session support is needed for visiting about:blank between tests +context('multi-domain snapshot location', { experimentalSessionSupport: true }, () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="multi-domain-secondary-link"]').click() + }) + + it('.hash()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('hash', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('hash') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.hash() + }) + }) + + it('.location()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('location', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('location') + + expect(consoleProps.Yielded).to.have.property('auth').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('authObj').that.is.undefined + expect(consoleProps.Yielded).to.have.property('hash').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('host').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('hostname').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('href').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('origin').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('originPolicy').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('pathname').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('port').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('protocol').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('search').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('superDomain').that.is.a('string') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.location() + }) + }) + + it('.url()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('url', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('url') + + expect(consoleProps.Yielded).to.equal('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.url() + }) + }) +}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_misc.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_misc.spec.ts new file mode 100644 index 000000000000..4363365c2cd9 --- /dev/null +++ b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_misc.spec.ts @@ -0,0 +1,157 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + +// @ts-ignore / session support is needed for visiting about:blank between tests +context('multi-domain snapshot misc', { experimentalSessionSupport: true }, () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="dom-link"]').click() + }) + + // NOTE: there is no log for .end() + it.skip('.end()', () => undefined) + + it('.exec()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('exec', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('exec') + expect(consoleProps['Shell Used']).to.be.undefined + expect(consoleProps.Yielded).to.have.property('code').that.equals(0) + expect(consoleProps.Yielded).to.have.property('stderr').that.equals('') + expect(consoleProps.Yielded).to.have.property('stdout').that.equals('foobar') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.exec('echo foobar') + }) + }) + + it('.focused()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('focused', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('focused') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('BUTTON') + expect(consoleProps.Yielded).to.have.property('id').that.equals('button') + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#button').click().focused() + }) + }) + + it('.wrap()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('wrap', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('wrap') + expect(consoleProps.Yielded[0]).to.equal('foo') + expect(consoleProps.Yielded[1]).to.equal('bar') + expect(consoleProps.Yielded[2]).to.equal('baz') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + const arr = ['foo', 'bar', 'baz'] + + cy.wrap(arr).spread((foo, bar, baz) => { + expect(foo).to.equal('foo') + expect(bar).to.equal('bar') + expect(baz).to.equal('baz') + }) + }) + }) + + it('.debug()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('debug', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('debug') + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('BUTTON') + expect(consoleProps.Yielded).to.have.property('id').that.equals('button') + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#button').debug() + }) + }) + + it('.pause()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('pause', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('pause') + expect(consoleProps.Yielded).to.be.undefined + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + const afterPaused = new Promise((resolve) => { + cy.once('paused', () => { + Cypress.emit('resume:all') + resolve() + }) + }) + + cy.pause().wrap({}).should('deep.eq', {}) + // pause is a noop in run mode, so only wait for it if in open mode + if (Cypress.config('isInteractive')) { + cy.wrap(afterPaused) + } + }) + }) + + it('.task()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('task', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('task') + expect(consoleProps.Yielded).to.equal('works') + expect(consoleProps.arg).to.equal('works') + expect(consoleProps.task).to.equal('return:arg') + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.task('return:arg', 'works') + }) + }) +}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_navigation.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_navigation.spec.ts new file mode 100644 index 000000000000..095f8ffc0b2c --- /dev/null +++ b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_navigation.spec.ts @@ -0,0 +1,91 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + +// @ts-ignore +context('multi-domain navigation', { experimentalSessionSupport: true }, () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + }) + + it('.go()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog, ...attrs } = findCrossOriginLogs('go', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(attrs.name).to.equal('go') + expect(attrs.message).to.equal('back') + + expect(consoleProps.Command).to.equal('go') + expect(consoleProps.Yielded).to.be.null + + done() + }, 250) + }) + + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="multi-domain-secondary-link"]').click() + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.visit('http://www.foobar.com:3500/fixtures/dom.html') + + cy.go('back') + }) + }) + + it('.reload()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog, ...attrs } = findCrossOriginLogs('reload', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(attrs.name).to.equal('reload') + expect(attrs.message).to.equal('') + + expect(consoleProps.Command).to.equal('reload') + expect(consoleProps.Yielded).to.be.null + + done() + }, 250) + }) + + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="dom-link"]').click() + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.reload() + }) + }) + + it('visit()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog, ...attrs } = findCrossOriginLogs('visit', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(attrs.name).to.equal('visit') + expect(attrs.message).to.equal('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') + + expect(consoleProps.Command).to.equal('visit') + expect(consoleProps).to.have.property('Cookies Set').that.is.an('object') + expect(consoleProps).to.have.property('Redirects').that.is.an('object') + expect(consoleProps).to.have.property('Resolved Url').that.equals('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') + + done() + }, 250) + }) + + cy.visit('/fixtures/multi-domain.html') + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.visit('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') + + cy.get('[data-cy="dom-check"]').should('have.text', 'From a secondary domain') + }) + }) +}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_network_requests.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_network_requests.spec.ts new file mode 100644 index 000000000000..ed3bbfd36a94 --- /dev/null +++ b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_network_requests.spec.ts @@ -0,0 +1,47 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + +// @ts-ignore / session support is needed for visiting about:blank between tests +context('multi-domain snapshot network requests', { experimentalSessionSupport: true }, () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="request-link"]').click() + }) + + it('.request()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('request', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('request') + + expect(consoleProps.Request).to.have.property('Request Body').that.equals(null) + expect(consoleProps.Request).to.have.property('Request Headers').that.is.a('object') + expect(consoleProps.Request).to.have.property('Request URL').that.equals('http://www.foobar.com:3500/fixtures/example.json') + expect(consoleProps.Request).to.have.property('Response Body').that.is.a('string') + expect(consoleProps.Request).to.have.property('Response Headers').that.is.a('object') + expect(consoleProps.Request).to.have.property('Response Status').that.equals(200) + + expect(consoleProps.Yielded).to.have.property('body').that.deep.equals({ example: true }) + expect(consoleProps.Yielded).to.have.property('duration').that.is.a('number') + expect(consoleProps.Yielded).to.have.property('headers').that.is.a('object') + expect(consoleProps.Yielded).to.have.property('status').that.equals(200) + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.request('http://www.foobar.com:3500/fixtures/example.json') + }) + }) +}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_querying.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_querying.spec.ts new file mode 100644 index 000000000000..b06cbd3d9c53 --- /dev/null +++ b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_querying.spec.ts @@ -0,0 +1,81 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + +// @ts-ignore / session support is needed for visiting about:blank between tests +context('multi-domain snapshot querying', { experimentalSessionSupport: true }, () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="dom-link"]').click() + }) + + it('.contains()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('contains', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('contains') + expect(consoleProps['Applied To']).to.be.undefined + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Content).to.equal('Nested Find') + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('DIV') + expect(consoleProps.Yielded).to.have.property('id').that.equals('nested-find') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.contains('Nested Find') + }) + }) + + it('.within()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('within', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('within') + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('FORM') + expect(consoleProps.Yielded).to.have.property('id').that.equals('by-id') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#by-id').within(() => { + cy.get('#input') + }) + }) + }) + + it('.root()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('root', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('root') + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('HTML') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.root() + }) + }) +}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_querying_shadow.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_querying_shadow.spec.ts new file mode 100644 index 000000000000..45edbbe349a9 --- /dev/null +++ b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_querying_shadow.spec.ts @@ -0,0 +1,41 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + +// @ts-ignore / session support is needed for visiting about:blank between tests +context('multi-domain snapshot shadow dom', { experimentalSessionSupport: true }, () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="shadow-dom-link"]').click() + }) + + it('.shadow()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('shadow', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('shadow') + expect(consoleProps.Elements).to.equal(1) + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('CY-TEST-ELEMENT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('shadow-element-1') + + expect(consoleProps.Yielded).to.be.null + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#shadow-element-1').shadow() + }) + }) +}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_screenshot.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_screenshot.spec.ts new file mode 100644 index 000000000000..5f17b1350d2a --- /dev/null +++ b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_screenshot.spec.ts @@ -0,0 +1,52 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + +// @ts-ignore / session support is needed for visiting about:blank between tests +context('multi-domain snapshot screenshot', { experimentalSessionSupport: true }, () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + + cy.viewport(600, 200) + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="screenshots-link"]').click() + }) + + it('.screenshot()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('screenshot', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('screenshot') + + expect(consoleProps).to.have.property('blackout') + expect(consoleProps).to.have.property('capture').that.equals('fullPage') + expect(consoleProps).to.have.property('dimensions').that.equals('600px x 480px') + expect(consoleProps).to.have.property('disableTimersAndAnimations').that.is.a('boolean') + expect(consoleProps).to.have.property('duration').that.is.a('string') + expect(consoleProps).to.have.property('multipart').that.is.a('boolean') + expect(consoleProps).to.have.property('name').to.be.null + expect(consoleProps).to.have.property('path').that.is.a('string') + expect(consoleProps).to.have.property('pixelRatio').that.is.a('number') + expect(consoleProps).to.have.property('scaled').that.is.a('boolean') + expect(consoleProps).to.have.property('size').that.is.a('string') + expect(consoleProps).to.have.property('specName').that.is.a('string') + expect(consoleProps).to.have.property('takenAt').that.is.a('string') + expect(consoleProps).to.have.property('testAttemptIndex').that.is.a('number') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + // FIXME: viewports don't seems correct after taking screenshot when in snapshot mode + cy.screenshot({ capture: 'fullPage' }) + }) + }) +}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_spies_stubs_clocks.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_spies_stubs_clocks.spec.ts new file mode 100644 index 000000000000..a3b456190f1d --- /dev/null +++ b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_spies_stubs_clocks.spec.ts @@ -0,0 +1,122 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + +// @ts-ignore / session support is needed for visiting about:blank between tests +context('multi-domain snapshot spies, stubs, and clock', { experimentalSessionSupport: true }, () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + // cy.clock only adds a log and does NOT update + cy.on('log:added', (attrs, log) => { + logs.set(attrs.id, log) + }) + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + + cy.clearCookies() + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="multi-domain-secondary-link"]').click() + }) + + it('spy()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const spyLog = findCrossOriginLogs('spy-1', logs, 'foobar.com') + + expect(spyLog.crossOriginLog).to.be.true + expect(spyLog.consoleProps.Command).to.equal('spy-1') + expect(spyLog.callCount).to.be.a('number') + expect(spyLog.functionName).to.equal('bar') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + const foo = { bar () { } } + + cy.spy(foo, 'bar') + foo.bar() + expect(foo.bar).to.be.called + }) + }) + + it('.stub()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const stubLog = findCrossOriginLogs('stub-1', logs, 'foobar.com') + + expect(stubLog.crossOriginLog).to.be.true + expect(stubLog.consoleProps.Command).to.equal('stub-1') + expect(stubLog.callCount).to.be.a('number') + expect(stubLog.functionName).to.equal('bar') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + const foo = { bar () { } } + + cy.stub(foo, 'bar') + foo.bar() + expect(foo.bar).to.be.called + }) + }) + + it('.clock()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const clockLog = findCrossOriginLogs('clock', logs, 'foobar.com') + + expect(clockLog.crossOriginLog).to.be.true + expect(clockLog.name).to.equal('clock') + + const consoleProps = clockLog.consoleProps() + + expect(consoleProps.Command).to.equal('clock') + expect(consoleProps).to.have.property('Methods replaced').that.is.a('object') + expect(consoleProps).to.have.property('Now').that.is.a('number') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + const now = Date.UTC(2022, 0, 12) + + cy.clock(now) + }) + }) + + it('.tick()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const tickLog = findCrossOriginLogs('tick', logs, 'foobar.com') + + expect(tickLog.crossOriginLog).to.be.true + expect(tickLog.name).to.equal('tick') + + const consoleProps = tickLog.consoleProps + + expect(consoleProps.Command).to.equal('tick') + expect(consoleProps).to.have.property('Methods replaced').that.is.a('object') + expect(consoleProps).to.have.property('Now').that.is.a('number') + expect(consoleProps).to.have.property('Ticked').that.is.a('string') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + const now = Date.UTC(2022, 0, 12) + + cy.clock(now) + + cy.tick(10000) + }) + }) +}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_traversal.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_traversal.spec.ts new file mode 100644 index 000000000000..5372a1b67069 --- /dev/null +++ b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_traversal.spec.ts @@ -0,0 +1,529 @@ +import _ from 'lodash' +import { findCrossOriginLogs } from '../../../../support/utils' + +// @ts-ignore / session support is needed for visiting about:blank between tests +context('multi-domain snapshot traversal', { experimentalSessionSupport: true }, () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="dom-link"]').click() + }) + + it('.children()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('children', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') + expect(consoleProps.Command).to.equal('children') + expect(consoleProps.Elements).to.equal(3) + expect(consoleProps.Selector).to.equal('') + expect(consoleProps.Yielded.length).to.equal(3) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('input') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('name') + expect(consoleProps.Yielded[2]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[2]).to.have.property('id').that.equals('age') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#by-id').children() + }) + }) + + it('.closest()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('closest', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') + expect(consoleProps.Command).to.equal('closest') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('form') + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('FORM') + expect(consoleProps.Yielded).to.have.property('id').that.equals('by-id') + expect(consoleProps.Yielded.querySelector('input#input')).to.be.ok + expect(consoleProps.Yielded.querySelector('input#name')).to.be.ok + expect(consoleProps.Yielded.querySelector('input#age')).to.be.ok + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#by-id').closest('form') + }) + }) + + it('.eq()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('eq', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps['Applied To'].length).to.equal(3) + expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') + expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') + expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') + + expect(consoleProps.Command).to.equal('eq') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('1') + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('name') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#by-id>input').eq(1) + }) + }) + + it('.filter()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('filter', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To'].length).to.equal(12) + expect(consoleProps.Command).to.equal('filter') + expect(consoleProps.Elements).to.equal(4) + expect(consoleProps.Selector).to.equal('[name="dogs"]') + + expect(consoleProps.Yielded.length).to.equal(4) + + _.forEach(consoleProps.Yielded, (yielded) => { + expect(yielded).to.have.property('tagName').that.equals('INPUT') + expect(yielded).to.have.property('name').that.equals('dogs') + }) + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#by-name>input') + .filter('[name="dogs"]') + }) + }) + + it('.find()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('find', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') + + expect(consoleProps.Command).to.equal('find') + expect(consoleProps.Elements).to.equal(3) + expect(consoleProps.Selector).to.equal('input') + + expect(consoleProps.Yielded.length).to.equal(3) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('input') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('name') + expect(consoleProps.Yielded[2]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[2]).to.have.property('id').that.equals('age') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#by-id').find('input') + }) + }) + + it('.first()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('first', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To'].length).to.equal(3) + expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') + expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') + expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') + + expect(consoleProps.Command).to.equal('first') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('input') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#by-id>input').first() + }) + }) + + it('.last()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('last', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To'].length).to.equal(3) + expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') + expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') + expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') + + expect(consoleProps.Command).to.equal('last') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('age') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#by-id>input').last() + }) + }) + + it('.next()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('next', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') + + expect(consoleProps.Command).to.equal('next') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('name') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#input').next() + }) + }) + + it('.nextAll()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('nextAll', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') + + expect(consoleProps.Command).to.equal('nextAll') + expect(consoleProps.Elements).to.equal(2) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded.length).to.equal(2) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('name') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('age') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#input').nextAll() + }) + }) + + it('.nextUntil()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('nextUntil', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') + + expect(consoleProps.Command).to.equal('nextUntil') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('#age') + + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('name') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#input').nextUntil('#age') + }) + }) + + it('.not()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('not', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To'].length).to.equal(3) + expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') + expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') + expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') + + expect(consoleProps.Command).to.equal('not') + expect(consoleProps.Elements).to.equal(2) + expect(consoleProps.Selector).to.equal('#age') + + expect(consoleProps.Yielded.length).to.equal(2) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('input') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('name') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#by-id>input').not('#age') + }) + }) + + it('.parent()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('parent', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') + + expect(consoleProps.Command).to.equal('parent') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('DIV') + expect(consoleProps.Yielded).to.have.property('id').that.equals('dom') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#by-id').parent() + }) + }) + + it('.parents()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('parents', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') + + expect(consoleProps.Command).to.equal('parents') + expect(consoleProps.Elements).to.equal(3) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded.length).to.equal(3) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('DIV') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('dom') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('BODY') + expect(consoleProps.Yielded[2]).to.have.property('tagName').that.equals('HTML') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#by-id').parents() + }) + }) + + it('.parentsUntil()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('parentsUntil', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') + + expect(consoleProps.Command).to.equal('parentsUntil') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('body') + + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('DIV') + expect(consoleProps.Yielded).to.have.property('id').that.equals('dom') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#by-id').parentsUntil('body') + }) + }) + + it('.prev()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('prev', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('age') + + expect(consoleProps.Command).to.equal('prev') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('name') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#age').prev() + }) + }) + + it('.prevAll()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('prevAll', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('age') + + expect(consoleProps.Command).to.equal('prevAll') + expect(consoleProps.Elements).to.equal(2) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded.length).to.equal(2) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('name') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('input') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#age').prevAll() + }) + }) + + it('.prevUntil()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('prevUntil', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('age') + + expect(consoleProps.Command).to.equal('prevUntil') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('#input') + + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('name') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#age').prevUntil('#input') + }) + }) + + it('.siblings()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('siblings', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') + + expect(consoleProps.Command).to.equal('siblings') + expect(consoleProps.Elements).to.equal(2) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded.length).to.equal(2) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('name') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('age') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.get('#input').siblings() + }) + }) +}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_viewport.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_viewport.spec.ts new file mode 100644 index 000000000000..f0634646ff15 --- /dev/null +++ b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_viewport.spec.ts @@ -0,0 +1,36 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + +// @ts-ignore / session support is needed for visiting about:blank between tests +context('multi-domain snapshot viewport', { experimentalSessionSupport: true }, () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="multi-domain-secondary-link"]').click() + }) + + it('.viewport()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('viewport', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('viewport') + expect(consoleProps.Width).to.equal(320) + expect(consoleProps.Height).to.equal(480) + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.viewport(320, 480) + }) + }) +}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_waiting.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_waiting.spec.ts new file mode 100644 index 000000000000..e37e57c7ddf7 --- /dev/null +++ b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_waiting.spec.ts @@ -0,0 +1,35 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + +// @ts-ignore / session support is needed for visiting about:blank between tests +context('multi-domain snapshot waiting', { experimentalSessionSupport: true }, () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="multi-domain-secondary-link"]').click() + }) + + it('.wait()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('wait', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('wait') + expect(consoleProps).to.have.property('Waited For').to.equal('500ms before continuing') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.wait(500) + }) + }) +}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_window.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_window.spec.ts new file mode 100644 index 000000000000..c2f8eab94d50 --- /dev/null +++ b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_window.spec.ts @@ -0,0 +1,71 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + +// @ts-ignore / session support is needed for visiting about:blank between tests +context('multi-domain snapshot window', { experimentalSessionSupport: true }, () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="dom-link"]').click() + }) + + it('.window()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('window', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('window') + expect(consoleProps.Yielded).to.be.null + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.window() + }) + }) + + it('.document()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('document', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('document') + expect(consoleProps.Yielded).to.be.null + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.document() + }) + }) + + it('.title()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('title', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('title') + expect(consoleProps.Yielded).to.equal('DOM Fixture') + + done() + }, 250) + }) + + cy.switchToDomain('http://foobar.com:3500', () => { + cy.title() + }) + }) +}) diff --git a/packages/driver/cypress/support/utils.js b/packages/driver/cypress/support/utils.js index c358c3d657c8..ae4fc4974117 100644 --- a/packages/driver/cypress/support/utils.js +++ b/packages/driver/cypress/support/utils.js @@ -72,6 +72,20 @@ export const assertLogLength = (logs, expectedLength) => { expect(logs.length).to.eq(expectedLength, `received ${logs.length} logs when we expected ${expectedLength}: [${receivedLogs}]`) } +export const findCrossOriginLogs = (consolePropCommand, logMap, matchingOrigin) => { + const matchedLogs = Array.from(logMap.values()).filter((log) => { + const props = log.get() + + let consoleProps = _.isFunction(props?.consoleProps) ? props.consoleProps() : props?.consoleProps + + return consoleProps.Command === consolePropCommand && props.id.includes(matchingOrigin) + }) + + const logAttrs = matchedLogs.map((log) => log.get()) + + return logAttrs.length === 1 ? logAttrs[0] : logAttrs +} + export const attachListeners = (listenerArr) => { return (els) => { _.each(els, (el, elName) => { diff --git a/packages/driver/src/cy/snapshots.ts b/packages/driver/src/cy/snapshots.ts index 6d8edd3a421b..f581da0078a2 100644 --- a/packages/driver/src/cy/snapshots.ts +++ b/packages/driver/src/cy/snapshots.ts @@ -5,6 +5,8 @@ import { create as createSnapshotsCSS } from './snapshots_css' export const HIGHLIGHT_ATTR = 'data-cypress-el' +export const FINAL_SNAPSHOT_NAME = 'final state' + export const create = ($$, state) => { const snapshotsCss = createSnapshotsCSS($$, state) const snapshotsMap = new WeakMap() @@ -99,15 +101,20 @@ export const create = ($$, state) => { } const getStyles = (snapshot) => { - const styleIds = snapshotsMap.get(snapshot) + const stylesOrStyleIds = snapshotsMap.get(snapshot) - if (!styleIds) { + if (!stylesOrStyleIds) { return {} } + // TODO: clean up. If cross origin process snapshot, styles are directly added into the CSS map + if (stylesOrStyleIds?.headStyles || stylesOrStyleIds.bodyStyles) { + return stylesOrStyleIds + } + return { - headStyles: snapshotsCss.getStylesByIds(styleIds.headStyleIds), - bodyStyles: snapshotsCss.getStylesByIds(styleIds.bodyStyleIds), + headStyles: snapshotsCss.getStylesByIds(stylesOrStyleIds.headStyleIds), + bodyStyles: snapshotsCss.getStylesByIds(stylesOrStyleIds.bodyStyleIds), } } @@ -119,7 +126,7 @@ export const create = ($$, state) => { $body.find('script,link[rel="stylesheet"],style').remove() const snapshot = { - name: 'final state', + name: FINAL_SNAPSHOT_NAME, htmlAttrs, body: { get: () => $body.detach(), @@ -131,8 +138,7 @@ export const create = ($$, state) => { return snapshot } - const createSnapshot = (name, $elToHighlight) => { - Cypress.action('cy:snapshot', name) + const createSnapshotBody = ($elToHighlight) => { // create a unique selector for this el // but only IF the subject is truly an element. For example // we might be wrapping a primitive like "$([1, 2]).first()" @@ -141,64 +147,83 @@ export const create = ($$, state) => { // jQuery v3 runs in strict mode and throws an error if you attempt to set a property // TODO: in firefox sometimes this throws a cross-origin access error - try { - const isJqueryElement = $dom.isElement($elToHighlight) && $dom.isJquery($elToHighlight) + const isJqueryElement = $dom.isElement($elToHighlight) && $dom.isJquery($elToHighlight) - if (isJqueryElement) { - ($elToHighlight as JQuery).attr(HIGHLIGHT_ATTR, 'true') - } + if (isJqueryElement) { + ($elToHighlight as JQuery).attr(HIGHLIGHT_ATTR, 'true') + } - // TODO: throw error here if cy is undefined! - - // cloneNode can actually trigger functions attached to custom elements - // so we have to use importNode to clone the element - // https://github.com/cypress-io/cypress/issues/7187 - // https://github.com/cypress-io/cypress/issues/1068 - // we import it to a transient document (snapshotDocument) so that there - // are no side effects from cloning it. see below for how we re-attach - // it to the AUT document - // https://github.com/cypress-io/cypress/issues/8679 - // this can fail if snapshotting before the page has fully loaded, - // so we catch this below and return null for the snapshot - // https://github.com/cypress-io/cypress/issues/15816 - const $body = $$(snapshotDocument.importNode($$('body')[0], true)) - - // for the head and body, get an array of all CSS, - // whether it's links or style tags - // if it's same-origin, it will get the actual styles as a string - // it it's cross-origin, it will get a reference to the link's href - const { headStyleIds, bodyStyleIds } = snapshotsCss.getStyleIds() - - // replaces iframes with placeholders - replaceIframes($body) - - // remove tags we don't want in body - $body.find('script,link[rel=\'stylesheet\'],style').remove() - - // here we need to figure out if we're in a remote manual environment - // if so we need to stringify the DOM: - // 1. grab all inputs / textareas / options and set their value on the element - // 2. convert DOM to string: body.prop("outerHTML") - // 3. send this string via websocket to our server - // 4. server rebroadcasts this to our client and its stored as a property - - // its also possible for us to store the DOM string completely on the server - // without ever sending it back to the browser (until its requests). - // we could just store it in memory and wipe it out intelligently. - // this would also prevent having to store the DOM structure on the client, - // which would reduce memory, and some CPU operations - - // now remove it after we clone - if (isJqueryElement) { - ($elToHighlight as JQuery).removeAttr(HIGHLIGHT_ATTR) - } + // TODO: throw error here if cy is undefined! + + // cloneNode can actually trigger functions attached to custom elements + // so we have to use importNode to clone the element + // https://github.com/cypress-io/cypress/issues/7187 + // https://github.com/cypress-io/cypress/issues/1068 + // we import it to a transient document (snapshotDocument) so that there + // are no side effects from cloning it. see below for how we re-attach + // it to the AUT document + // https://github.com/cypress-io/cypress/issues/8679 + // this can fail if snapshotting before the page has fully loaded, + // so we catch this below and return null for the snapshot + // https://github.com/cypress-io/cypress/issues/15816 + const $body = $$(snapshotDocument.importNode($$('body')[0], true)) + // for the head and body, get an array of all CSS, + // whether it's links or style tags + // if it's same-origin, it will get the actual styles as a string + // it it's cross-domain, it will get a reference to the link's href + const { headStyleIds, bodyStyleIds } = snapshotsCss.getStyleIds() + + // replaces iframes with placeholders + replaceIframes($body) + + // remove tags we don't want in body + $body.find('script,link[rel=\'stylesheet\'],style').remove() + + // here we need to figure out if we're in a remote manual environment + // if so we need to stringify the DOM: + // 1. grab all inputs / textareas / options and set their value on the element + // 2. convert DOM to string: body.prop("outerHTML") + // 3. send this string via websocket to our server + // 4. server rebroadcasts this to our client and its stored as a property + + // its also possible for us to store the DOM string completely on the server + // without ever sending it back to the browser (until its requests). + // we could just store it in memory and wipe it out intelligently. + // this would also prevent having to store the DOM structure on the client, + // which would reduce memory, and some CPU operations + + // now remove it after we clone + if (isJqueryElement) { + ($elToHighlight as JQuery).removeAttr(HIGHLIGHT_ATTR) + } + + const $htmlAttrs = getHtmlAttrs($$('html')[0]) - // preserve attributes on the tag - const htmlAttrs = getHtmlAttrs($$('html')[0]) - // the body we clone via importNode above is attached to a transient document - // so that there are no side effects from cloning it. we only attach it back - // to the AUT document at the last moment (when restoring the snapshot) - // https://github.com/cypress-io/cypress/issues/8679 + return { + $body, + $htmlAttrs, + headStyleIds, + bodyStyleIds, + } + } + + const reifySnapshotBody = (preprocessedSnapshot) => { + const $body = preprocessedSnapshot.body.get() + const $htmlAttrs = preprocessedSnapshot.htmlAttrs + + return { + $body, + $htmlAttrs, + headStyleIds: null, + bodyStyleIds: null, + } + } + + const createSnapshot = (name, $elToHighlight, preprocessedSnapshot) => { + Cypress.action('cy:snapshot', name) + + try { + const { $body, $htmlAttrs, headStyleIds, bodyStyleIds } = !preprocessedSnapshot ? createSnapshotBody($elToHighlight) : reifySnapshotBody(preprocessedSnapshot) let attachedBody const body = { get: () => { @@ -212,11 +237,23 @@ export const create = ($$, state) => { const snapshot = { name, - htmlAttrs, + htmlAttrs: $htmlAttrs, body, } - snapshotsMap.set(snapshot, { headStyleIds, bodyStyleIds }) + // TODO: figure out styles + if (headStyleIds && bodyStyleIds) { + snapshotsMap.set(snapshot, { headStyleIds, bodyStyleIds }) + } + + if (preprocessedSnapshot) { + // snapshot is being reified from cross origin. get inline styles of reified snapshot + const { headStyles, bodyStyles } = preprocessedSnapshot.styles + + snapshotsMap.set(snapshot, { headStyles, bodyStyles }) + } else { + snapshotsMap.set(snapshot, { headStyleIds, bodyStyleIds }) + } return snapshot } catch (e) { diff --git a/packages/driver/src/cypress/log.ts b/packages/driver/src/cypress/log.ts index 66a00e464af0..a9cbdd657a15 100644 --- a/packages/driver/src/cypress/log.ts +++ b/packages/driver/src/cypress/log.ts @@ -444,7 +444,7 @@ class Log { this.obj = { highlightAttr: HIGHLIGHT_ATTR, numElements: $el.length, - visible: $el.length === $el.filter(':visible').length, + visible: this.get('crossOriginLog') ? this.get('visible') : $el.length === $el.filter(':visible').length, } return this.set(this.obj, { silent: true }) @@ -505,8 +505,11 @@ class Log { consoleObj[key] = _this.get('name') + // in the case a log is being recreated from the specbridge to the primary, consoleProps may be an Object + const consoleObjDefaults = _.isFunction(consoleProps) ? consoleProps.apply(this, args) : consoleProps + // merge in the other properties from consoleProps - _.extend(consoleObj, consoleProps.apply(this, args)) + _.extend(consoleObj, consoleObjDefaults) // TODO: right here we need to automatically // merge in "Yielded + Element" if there is an $el diff --git a/packages/driver/src/multi-domain/cypress.ts b/packages/driver/src/multi-domain/cypress.ts index b841aed464a8..9b4207adf736 100644 --- a/packages/driver/src/multi-domain/cypress.ts +++ b/packages/driver/src/multi-domain/cypress.ts @@ -6,10 +6,12 @@ import '../config/lodash' import $Cypress from '../cypress' import { $Cy } from '../cypress/cy' +import { $Location } from '../cypress/location' import $Commands from '../cypress/commands' import { create as createLog } from '../cypress/log' import { bindToListeners } from '../cy/listeners' import { handleOriginFn } from './domain_fn' +import { FINAL_SNAPSHOT_NAME } from '../cy/snapshots' import { handleLogs } from './events/logs' import { handleSocketEvents } from './events/socket' import { handleSpecWindowEvents } from './events/spec_window' @@ -18,6 +20,7 @@ import { handleScreenshots } from './events/screenshots' import { handleTestEvents } from './events/test' import { handleMiscEvents } from './events/misc' import { handleUnsupportedAPIs } from './unsupported_apis' +import { preprocessSnapshotForSerialization } from '../util/serialization' import $Mocha from '../cypress/mocha' import * as cors from '@packages/network/lib/cors' @@ -30,6 +33,19 @@ const createCypress = () => { setup(config, env) }) + Cypress.specBridgeCommunicator.on('generate:final:snapshot', (snapshotUrl: string) => { + const specBridgeLocation = $Location.create(window.location.href) + const requestedSnapshotUrlLocation = $Location.create(snapshotUrl) + + if (requestedSnapshotUrlLocation.originPolicy === specBridgeLocation.originPolicy) { + // if true, this is the correct specbridge to take the snapshot and send it back + // @ts-ignore + const finalSnapshot = cy.createSnapshot(FINAL_SNAPSHOT_NAME) + + Cypress.specBridgeCommunicator.toPrimary('final:snapshot:generated', preprocessSnapshotForSerialization(finalSnapshot)) + } + }) + Cypress.specBridgeCommunicator.toPrimary('bridge:ready') } diff --git a/packages/driver/src/multi-domain/events/logs.ts b/packages/driver/src/multi-domain/events/logs.ts index 62e98ded8318..c511565765b1 100644 --- a/packages/driver/src/multi-domain/events/logs.ts +++ b/packages/driver/src/multi-domain/events/logs.ts @@ -1,22 +1,12 @@ -import { LogUtils } from '../../cypress/log' +import { preprocessLogForSerialization } from '../../util/serialization' export const handleLogs = (Cypress: Cypress.Cypress) => { const onLogAdded = (attrs) => { - // TODO: - // - handle printing console props (need to add to runner) - // this.runner.addLog(args[0], this.config('isInteractive')) - - Cypress.specBridgeCommunicator.toPrimary('log:added', LogUtils.getDisplayProps(attrs)) + Cypress.specBridgeCommunicator.toPrimary('log:added', preprocessLogForSerialization(attrs)) } const onLogChanged = (attrs) => { - // TODO: - // - add invocation stack if error: - // let parsedError = correctStackForCrossOriginError(log.get('err'), this.userInvocationStack) - // - notify runner? maybe not - // this.runner.addLog(args[0], this.config('isInteractive')) - - Cypress.specBridgeCommunicator.toPrimary('log:changed', LogUtils.getDisplayProps(attrs)) + Cypress.specBridgeCommunicator.toPrimary('log:changed', preprocessLogForSerialization(attrs)) } Cypress.on('log:added', onLogAdded) diff --git a/packages/driver/src/util/serialization.ts b/packages/driver/src/util/serialization.ts index 16d82f3e8bf7..a5a3577bb734 100644 --- a/packages/driver/src/util/serialization.ts +++ b/packages/driver/src/util/serialization.ts @@ -1,4 +1,5 @@ import _ from 'lodash' +import $dom from '../dom' import structuredClonePonyfill from 'core-js-pure/actual/structured-clone' import $stackUtils from '../cypress/stack_utils' import $errUtils from '../cypress/error_utils' @@ -106,7 +107,8 @@ export const preprocessForSerialization = (valueToSanitize: { [key: string]: // Even if native errors can be serialized through postMessage, many properties are omitted on structuredClone(), including prototypical hierarchy // because of this, we preprocess native errors to objects and postprocess them once they come back to the primary origin - if (_.isArray(valueToSanitize)) { + // see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays. This is important for commands like .selectFile() using buffer streams + if (_.isArray(valueToSanitize) || _.isTypedArray(valueToSanitize)) { return _.map(valueToSanitize, preprocessForSerialization) as unknown as T } @@ -156,3 +158,265 @@ export const reifySerializedError = (serializedError: any, userInvocationStack: return reifiedError } + +export const preProcessDomElement = (props: any) => { + // hydrate values in HTML copy so when serialized they show up correctly in snapshot. This is important for input boxes with typing and other 'value' attributes + props.querySelectorAll('input').forEach((input) => { + input.setAttribute('value', input.value) + if (input.checked) { + input.setAttribute('checked', input.checked) + } + }) + + // TODO: figure out reifying option selection + // props.querySelectorAll('option').forEach((option) => { + // if (option.selected) { + // option.setAttribute('selected', option.selected) + // } + // }) + + const el = { + value: props?.value, + type: props?.type, + id: props?.id, + tagName: props.tagName, + attributes: {}, + innerHTML: props.innerHTML, + } + + // get all attributes and classes off the element + props.getAttributeNames().forEach((attributeName) => { + el.attributes[attributeName] = props.getAttribute(attributeName) + }) + + return el +} + +export const postProcessDomElement = (props: any) => { + const reifiedEl = document.createElement(props.tagName) + + if (props.value) { + reifiedEl.value = props.value + } + + try { + if (props.type) { + reifiedEl.type = props.type + } + } catch (e) { + // swallow this. certain elements this is a read-only property on (such as ) - } - - if (props.id) { - reifiedEl.id = props.id - } - - reifiedEl.innerHTML = props.innerHTML - - Object.keys(props.attributes).forEach((attribute) => { - reifiedEl.setAttribute(attribute, props.attributes[attribute]) - }) - - return reifiedEl -} - -export const preprocessLogLikeForSerialization = (props, attemptToSerializeFunctions = false) => { - try { - if (_.isArray(props)) { - return props.map((prop) => { - try { - return preprocessLogLikeForSerialization(prop, attemptToSerializeFunctions) - } catch (e) { - return null - } - }) - } - - if (_.isPlainObject(props)) { - // only attempt to try and serialize dom elements and function (if attemptToSerializeFunctions is set to true) - let objWithPossiblySerializableProps = _.pickBy(props, (value) => { - const isSerializable = isSerializableInCurrentBrowser(value) - - if (!isSerializable && $dom.isDom(value) || _.isFunction(value) || _.isObject(value)) { - return true - } - - return false - }) - - let objWithOnlySerializableProps = _.pickBy(props, (value) => isSerializableInCurrentBrowser(value)) - - // get the onces we know we can serialize here - let preprocessed: any = preprocessForSerialization(objWithOnlySerializableProps) - - _.forIn(objWithPossiblySerializableProps, (value, key) => { - try { - preprocessed[key] = preprocessLogLikeForSerialization(value, attemptToSerializeFunctions) - } catch (e) { - preprocessed[key] = null - } - }) - - return preprocessed - } - - if ($dom.isDom(props)) { - // in the case we are dealing with a jQuery array - if (props.length !== undefined && $dom.isJquery(props)) { - const serializableArray: any[] = [] - - // Nuke any prevObjects or unserializable values. common with assertion 'Subject' - props.each((key) => serializableArray.push(preprocessLogLikeForSerialization(props[key], attemptToSerializeFunctions))) - - return serializableArray - } - - const serializableDOM = preProcessDomElement(props) - - // @ts-ignore - serializableDOM.serializationKey = 'dom' - - return serializableDOM - } - - /** - * When preprocessing a log, there might be certain functions we want to attempt to serialize. - * One of these instances is the 'table' key in consoleProps, which has contents that CAN be serialized. - * If there are other functions that have serializable contents, the invoker/developer will need to be EXPLICIT - * in what needs serialization. Otherwise, functions should NOT be serialized. - */ - if (_.isFunction(props)) { - if (attemptToSerializeFunctions) { - return { - value: preprocessLogLikeForSerialization(props(), attemptToSerializeFunctions), - serializationKey: 'function', - } - } - - return null - } - - return preprocessForSerialization(props) - } catch (e) { - return null - } -} - -export const postprocessLogLikeFromSerialization = (props) => { - try { - if (props?.serializationKey === 'dom') { - props.html = function () { - let reifiedElement - - // if snapshots exists, this element needs to be matched against the rendered snapshot on the page LAZILY. - // a bit of a hack, but we attach the snapshot to the page and then LAZILY select the element - - const attributes = Object.keys(props.attributes).map((attribute) => { - return `[${attribute}="${props.attributes[attribute]}"]` - }).join('') - - const selector = `${props.tagName}${attributes}` - - reifiedElement = Cypress.$(selector) - - if (reifiedElement.length) { - return reifiedElement.length > 1 ? reifiedElement : reifiedElement[0] - } - - // if the element couldn't be found, return a synthetic copy that doesn't actually exist on the page - return postProcessDomElement(props) - } - - return props - } - - if (props?.serializationKey === 'function') { - const reifiedFunctionData = postprocessLogLikeFromSerialization(props.value) - - return () => reifiedFunctionData - } - - // NOTE: transforms arrays into objects to have defined getters for DOM els - if (_.isObject(props)) { - let postProcessed = {} - - _.forIn(props, (value, key) => { - const val = postprocessLogLikeFromSerialization(value) - - if (val?.serializationKey === 'dom') { - postProcessed = { - ...postProcessed, - get [key] () { - // only calculate the requested $el from console props AFTER the snapshot has been rendered into the AUT - return val.html() - }, - } - } else { - postProcessed[key] = postprocessLogLikeFromSerialization(value) - } - }) - - if (_.isArray(props)) { - // if an array, map the array to or special getter object - return new Proxy(postProcessed, { - get (target, name) { - return target[name] || props[name] - }, - }) - } - - // otherwise, just returned the object with our special getter - return postProcessed - } - - return props - } catch (e) { - return null - } -} - -// needs its own method as it needs to be used by the spec bridge on request for the 'final state' snapshot -export const preprocessSnapshotForSerialization = (snapshot) => { - const preprocessedSnapshot = preprocessLogLikeForSerialization(snapshot) - - try { - preprocessedSnapshot.body.get.value[0] = preprocessLogLikeForSerialization(snapshot.body.get()[0]) - } catch (e) { - return null - } - - // @ts-ignore - preprocessedSnapshot.styles = cy.getStyles(snapshot) - - return preprocessedSnapshot -} - -// attempt here is to be very EXPLICIT on what DOM elements and Functions we wish to serialize. -// If not explicitly handled in this function for something that is otherwise unserializable, the value will be omitted -export const preprocessLogForSerialization = (logAttrs) => { - let { snapshots, consoleProps, $el, ...logAttrsRest } = logAttrs - - const preprocessed = preprocessLogLikeForSerialization(logAttrsRest) - - if (preprocessed) { - if (snapshots) { - preprocessed.snapshots = snapshots.map((snapshot) => preprocessSnapshotForSerialization(snapshot)) - } - - if (consoleProps) { - const { table, ...consolePropsRest } = consoleProps - - preprocessed.consoleProps = preprocessLogLikeForSerialization(consolePropsRest) - - if (table) { - preprocessed.consoleProps.table = preprocessLogLikeForSerialization(table, true) - } - } - - preprocessed.$el = preprocessLogLikeForSerialization($el) - } - - return preprocessed -} - -export const postprocessLogFromSerialization = (logAttrs) => { - /** - * consoleProp DOM elements needs to be reified at console printing runtime AFTER the serialized snapshot - * is attached to the DOM so the element can be located. - * - * In most cases, the HIGHLIGHT_ATTR is used to located the element in the snapshot. If that fails or does not locate an element, - * then a new element is created against the snapshot context. This element will NOT be found on the page, but will represent what the element - * looked like at the time of the snapshot. - */ - let { snapshots, ... logAttrsRest } = logAttrs - - if (snapshots) { - // @ts-ignore - snapshots = snapshots.filter((snapshot) => !!snapshot).map((snapshot) => { - snapshot.body = postprocessLogLikeFromSerialization(snapshot.body) - - // @ts-ignore - return cy.createSnapshot(snapshot.name, null, snapshot) - }) - } - - const reified = postprocessLogLikeFromSerialization(logAttrsRest) - - if (reified.$el && reified.$el.length) { - // make sure $els are jQuery Arrays to keep was is expected in the log - reified.$el = Cypress.$(reified.$el.map((el) => el)) - } - - reified.snapshots = snapshots - reified.crossOriginLog = true - - return reified -} diff --git a/packages/driver/src/util/serialization/log.ts b/packages/driver/src/util/serialization/log.ts new file mode 100644 index 000000000000..470f4bd89e63 --- /dev/null +++ b/packages/driver/src/util/serialization/log.ts @@ -0,0 +1,384 @@ +import _ from 'lodash' +import { isSerializableInCurrentBrowser, preprocessForSerialization } from '.' +import $dom from '../../dom' + +interface PreprocessedHTMLElement { + value?: any + type?: any + id?: string + tagName: string + attributes: { [key: string]: string } + innerHTML: string + serializationKey: 'dom' +} + +interface PreprocessedFunction { + value: any + serializationKey: 'function' +} + +/** + * Takes an HTMLElement that might be a for a given snapshot or any other element, likely pertaining to log consoleProps, + * on the page that needs to be preprocessed for serialization. The method here is to do a very shallow serialization, + * by trying to make the HTML as stateful as possible before preprocessing. + * + * @param {HTMLElement} props - an HTMLElement + * @returns {PreprocessedHTMLElement} a preprocessed element that can be fed through postMessage() that can be reified in the primary. + */ +const preProcessDomElement = (props: HTMLElement) => { + // hydrate values in HTML copy so when serialized they show up correctly in snapshot. This is important for input boxes with typing and other 'value' attributes + props.querySelectorAll('input').forEach((input: HTMLInputElement) => { + input.setAttribute('value', input.value) + if (input.checked) { + input.setAttribute('checked', `${input.checked}`) + } + }) + + // TODO: figure out reifying option selection + // props.querySelectorAll('option').forEach((option) => { + // if (option.selected) { + // option.setAttribute('selected', option.selected) + // } + // }) + + const el: PreprocessedHTMLElement = { + value: (props as HTMLInputElement)?.value, + type: (props as HTMLInputElement)?.type, + id: props?.id, + tagName: props.tagName, + attributes: {}, + innerHTML: props.innerHTML, + serializationKey: 'dom', + } + + // get all attributes and classes off the element + props.getAttributeNames().forEach((attributeName) => { + el.attributes[attributeName] = props.getAttribute(attributeName) || '' + }) + + return el +} + +/** + * Takes an HTMLElement that might be a for a given snapshot or any other element, likely pertaining to log consoleProps, + * on the page that needs to be preprocessed for serialization. The method here is to do a very shallow serialization, + * by trying to make the HTML as stateful as possible before preprocessing. + * + * @param {PreprocessedHTMLElement} props - a preprocessed element that was fed through postMessage() that need to be reified in the primary. + * @returns {HTMLElement} a reified element that can be used in a snapshot body or consoleProps. + */ +const postProcessDomElement = (props: any) => { + const reifiedEl = document.createElement(props.tagName) + + if (props.value) { + reifiedEl.value = props.value + } + + try { + if (props.type) { + reifiedEl.type = props.type + } + } catch (e) { + // swallow this. certain elements this is a read-only property on (such as not to be checked') + expect(assertionLogs[1].consoleProps.Message).to.equal('expected not to be disabled') + + assertionLogs.forEach(({ $el, crossOriginLog, consoleProps }) => { + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true + + 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') + }) + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get(':checkbox[name="colors"][value="blue"]') + .should('not.be.checked').and('not.be.disabled') + }) + }) + }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts index 732ce983827e..a290bdbaa912 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts +++ b/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,84 @@ context('cy.origin connectors', () => { }) }) }) + + context('#consoleProps', () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + }) + + // NOTE: there is no command log for .each() + it.skip('.each()', () => undefined) + + it('.its()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('its', logs, 'foobar.com') + + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true + + 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') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + // FIXME: snapshot of primary is showing for its + cy.get('#by-id>input').its('length') + }) + }) + + it('.invoke()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('invoke', logs, 'foobar.com') + + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true + + 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') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + // FIXME: snapshot of primary is showing for its + cy.get('#button').invoke('text') + }) + }) + + // NOTE: there is no command log for .spread() + it.skip('.spread()', () => undefined) + + // NOTE: there is no command log for .then() + it.skip('.then()', () => undefined) + }) }) 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 index b068abb275db..04a5c483e6ab 100644 --- 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,172 @@ context('cy.origin cookies', () => { cy.getCookies().should('be.empty') }) }) + + context('#consoleProps', () => { + const { _ } = Cypress + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + }) + + it('.getCookie()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('getCookie', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + 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') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.getCookies().should('be.empty') + cy.setCookie('foo', 'bar') + cy.getCookie('foo') + }) + }) + + it('.getCookies()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + // get the last 'getCookies' command, which is the one we care about for this test + const allGetCookieLogs = findCrossOriginLogs('getCookies', logs, 'foobar.com') + + const { crossOriginLog, consoleProps } = allGetCookieLogs.pop() as any + + expect(crossOriginLog).to.be.true + + 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') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.getCookies().should('be.empty') + + cy.setCookie('foo', 'bar') + cy.getCookies() + }) + }) + + it('.setCookie()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('setCookie', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + 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') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.getCookies().should('be.empty') + + cy.setCookie('foo', 'bar') + }) + }) + + it('.clearCookie()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('clearCookie', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + 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') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.setCookie('foo', 'bar') + cy.getCookie('foo').should('not.be.null') + cy.clearCookie('foo') + }) + }) + + it('.clearCookies()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('clearCookies', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + 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') + }) + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.setCookie('foo', 'bar') + cy.setCookie('faz', 'baz') + + cy.getCookies().should('have.length', 2) + cy.clearCookies() + }) + }) + }) }) 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 index 611bcf83cdda..17e22c99b545 100644 --- 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,66 @@ context('cy.origin files', () => { }) }) }) + + context('#consoleProps', () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + }) + + // NOTE: there is no command log for .fixture(). shows up as a (new url) + it.skip('.fixture()', () => undefined) + + it('.readFile()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('readFile', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('readFile') + expect(consoleProps['File Path']).to.include('cypress/fixtures/example.json') + expect(consoleProps.Contents).to.deep.equal({ example: true }) + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.readFile('cypress/fixtures/example.json') + }) + }) + + it('.writeFile()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('writeFile', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('writeFile') + expect(consoleProps['File Path']).to.equal('foo.json') + expect(consoleProps.Contents).to.equal('{"foo":"bar"}') + + done() + }, 250) + }) + + 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) + }) + }) + }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_local_storage.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_local_storage.spec.ts index 7996d9aed2d9..498ea6f9eb7c 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_local_storage.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_local_storage.spec.ts @@ -1,3 +1,5 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + context('cy.origin local storage', () => { beforeEach(() => { cy.visit('/fixtures/multi-domain.html') @@ -17,4 +19,39 @@ context('cy.origin local storage', () => { }) }) }) + + context('#consoleProps', () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + }) + + it('.clearLocalStorage()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('clearLocalStorage', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('clearLocalStorage') + expect(consoleProps.Yielded).to.be.null + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.window().then((win) => { + win.localStorage.setItem('foo', 'bar') + expect(win.localStorage.getItem('foo')).to.equal('bar') + }) + + cy.clearLocalStorage() + }) + }) + }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_location.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_location.spec.ts index ba4b9a9b5b6e..7bf6eed6aff6 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_location.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_location.spec.ts @@ -1,3 +1,5 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + context('cy.origin location', () => { beforeEach(() => { cy.visit('/fixtures/multi-domain.html') @@ -24,4 +26,83 @@ context('cy.origin location', () => { cy.url().should('equal', 'http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') }) }) + + context('#consoleProps', () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + }) + + it('.hash()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('hash', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('hash') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.hash() + }) + }) + + it('.location()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('location', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('location') + + expect(consoleProps.Yielded).to.have.property('auth').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('authObj').that.is.undefined + expect(consoleProps.Yielded).to.have.property('hash').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('host').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('hostname').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('href').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('origin').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('originPolicy').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('pathname').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('port').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('protocol').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('search').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('superDomain').that.is.a('string') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.location() + }) + }) + + it('.url()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('url', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('url') + + expect(consoleProps.Yielded).to.equal('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.url() + }) + }) + }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts index beca1cf6cf05..38144c81848b 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts @@ -1,3 +1,5 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + context('cy.origin misc', () => { beforeEach(() => { cy.visit('/fixtures/multi-domain.html') @@ -56,6 +58,165 @@ context('cy.origin misc', () => { cy.task('return:arg', 'works').should('eq', 'works') }) }) + + context('#consoleProps', () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + }) + + // NOTE: there is no log for .end() + it.skip('.end()', () => undefined) + + it('.exec()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('exec', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('exec') + expect(consoleProps['Shell Used']).to.be.undefined + expect(consoleProps.Yielded).to.have.property('code').that.equals(0) + expect(consoleProps.Yielded).to.have.property('stderr').that.equals('') + expect(consoleProps.Yielded).to.have.property('stdout').that.equals('foobar') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.exec('echo foobar') + }) + }) + + it('.focused()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('focused', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('focused') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('BUTTON') + expect(consoleProps.Yielded).to.have.property('id').that.equals('button') + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#button').click().focused() + }) + }) + + it('.wrap()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('wrap', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('wrap') + expect(consoleProps.Yielded[0]).to.equal('foo') + expect(consoleProps.Yielded[1]).to.equal('bar') + expect(consoleProps.Yielded[2]).to.equal('baz') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + const arr = ['foo', 'bar', 'baz'] + + cy.wrap(arr).spread((foo, bar, baz) => { + expect(foo).to.equal('foo') + expect(bar).to.equal('bar') + expect(baz).to.equal('baz') + }) + }) + }) + + it('.debug()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('debug', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('debug') + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('BUTTON') + expect(consoleProps.Yielded).to.have.property('id').that.equals('button') + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#button').debug() + }) + }) + + it('.pause()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + if (Cypress.config('isInteractive')) { + // if `isInteractive`, the .pause() will NOT show up in the command log in this case. Essentially a no-op. + done() + + return + } + + const { consoleProps, crossOriginLog } = findCrossOriginLogs('pause', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('pause') + expect(consoleProps.Yielded).to.be.undefined + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + const afterPaused = new Promise((resolve) => { + cy.once('paused', () => { + Cypress.emit('resume:all') + resolve() + }) + }) + + cy.pause().wrap({}).should('deep.eq', {}) + // pause is a noop in run mode, so only wait for it if in open mode + if (Cypress.config('isInteractive')) { + cy.wrap(afterPaused) + } + }) + }) + + it('.task()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('task', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('task') + expect(consoleProps.Yielded).to.equal('works') + expect(consoleProps.arg).to.equal('works') + expect(consoleProps.task).to.equal('return:arg') + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.task('return:arg', 'works') + }) + }) + }) }) it('verifies number of cy commands', () => { diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_navigation.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_navigation.spec.ts index febb6e19e1af..f39e44540908 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_navigation.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_navigation.spec.ts @@ -1,4 +1,5 @@ const { stripIndent } = require('common-tags') +import { findCrossOriginLogs } from '../../../../support/utils' context('cy.origin navigation', () => { it('.go()', () => { @@ -423,4 +424,93 @@ context('cy.origin navigation', () => { cy.location('pathname').should('equal', '/fixtures/dom.html') }) }) + + context('#consoleProps', () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + }) + + it('.go()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog, ...attrs } = findCrossOriginLogs('go', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(attrs.name).to.equal('go') + expect(attrs.message).to.equal('back') + + expect(consoleProps.Command).to.equal('go') + expect(consoleProps.Yielded).to.be.null + + done() + }, 250) + }) + + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="cross-origin-secondary-link"]').click() + + cy.origin('http://foobar.com:3500', () => { + cy.visit('http://www.foobar.com:3500/fixtures/dom.html') + + cy.go('back') + }) + }) + + it('.reload()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog, ...attrs } = findCrossOriginLogs('reload', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(attrs.name).to.equal('reload') + expect(attrs.message).to.equal('') + + expect(consoleProps.Command).to.equal('reload') + expect(consoleProps.Yielded).to.be.null + + done() + }, 250) + }) + + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="dom-link"]').click() + + cy.origin('http://foobar.com:3500', () => { + cy.reload() + }) + }) + + it('visit()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog, ...attrs } = findCrossOriginLogs('visit', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(attrs.name).to.equal('visit') + expect(attrs.message).to.equal('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') + + expect(consoleProps.Command).to.equal('visit') + expect(consoleProps).to.have.property('Cookies Set').that.is.an('object') + expect(consoleProps).to.have.property('Redirects').that.is.an('object') + expect(consoleProps).to.have.property('Resolved Url').that.equals('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') + + done() + }, 250) + }) + + cy.visit('/fixtures/multi-domain.html') + + cy.origin('http://foobar.com:3500', () => { + cy.visit('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') + + cy.get('[data-cy="dom-check"]').should('have.text', 'From a secondary origin') + }) + }) + }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_network_requests.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_network_requests.spec.ts index 1afecedf3cb8..8e43d6471988 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_network_requests.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_network_requests.spec.ts @@ -1,3 +1,5 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + context('cy.origin network requests', () => { beforeEach(() => { cy.visit('/fixtures/multi-domain.html') @@ -30,4 +32,46 @@ context('cy.origin network requests', () => { }) }) }) + + context('#consoleProps', () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + }) + + it('.request()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('request', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('request') + + expect(consoleProps.Request).to.have.property('Request Body').that.equals(null) + expect(consoleProps.Request).to.have.property('Request Headers').that.is.a('object') + expect(consoleProps.Request).to.have.property('Request URL').that.equals('http://www.foobar.com:3500/fixtures/example.json') + expect(consoleProps.Request).to.have.property('Response Body').that.is.a('string') + expect(consoleProps.Request).to.have.property('Response Headers').that.is.a('object') + expect(consoleProps.Request).to.have.property('Response Status').that.equals(200) + + expect(consoleProps.Yielded).to.have.property('body').that.deep.equals({ example: true }) + expect(consoleProps.Yielded).to.have.property('duration').that.is.a('number') + expect(consoleProps.Yielded).to.have.property('headers').that.is.a('object') + expect(consoleProps.Yielded).to.have.property('status').that.equals(200) + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.request('http://www.foobar.com:3500/fixtures/example.json') + }) + }) + }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying.spec.ts index e22baad757ec..a3fe961ffdcc 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying.spec.ts @@ -1,3 +1,5 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + context('cy.origin querying', () => { beforeEach(() => { cy.visit('/fixtures/multi-domain.html') @@ -29,4 +31,80 @@ context('cy.origin querying', () => { cy.root().should('match', 'html') }) }) + + context('#consoleProps', () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + }) + + it('.contains()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('contains', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('contains') + expect(consoleProps['Applied To']).to.be.undefined + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Content).to.equal('Nested Find') + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('DIV') + expect(consoleProps.Yielded).to.have.property('id').that.equals('nested-find') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.contains('Nested Find') + }) + }) + + it('.within()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('within', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('within') + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('FORM') + expect(consoleProps.Yielded).to.have.property('id').that.equals('by-id') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#by-id').within(() => { + cy.get('#input') + }) + }) + }) + + it('.root()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('root', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('root') + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('HTML') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.root() + }) + }) + }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying_shadow.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying_shadow.spec.ts index a7ec229ebad2..b55ece31b548 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying_shadow.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying_shadow.spec.ts @@ -1,3 +1,5 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + context('cy.origin shadow dom', () => { beforeEach(() => { cy.visit('/fixtures/multi-domain.html') @@ -10,4 +12,40 @@ context('cy.origin shadow dom', () => { .should('have.text', 'Shadow Content 1') }) }) + + context('#consoleProps', () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + }) + + it('.shadow()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('shadow', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('shadow') + expect(consoleProps.Elements).to.equal(1) + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('CY-TEST-ELEMENT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('shadow-element-1') + + expect(consoleProps.Yielded).to.be.null + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#shadow-element-1').shadow() + }) + }) + }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_screenshot.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_screenshot.spec.ts index ecbeffff9919..375fcd4bd867 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_screenshot.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_screenshot.spec.ts @@ -275,4 +275,54 @@ context('cy.origin screenshot', () => { }) }) }) + + context('#consoleProps', () => { + const { findCrossOriginLogs } = require('../../../../support/utils') + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + + cy.visit('/fixtures/multi-domain.html') + cy.get('a[data-cy="screenshots-link"]').click() + }) + + it('.screenshot()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('screenshot', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('screenshot') + + expect(consoleProps).to.have.property('blackout') + expect(consoleProps).to.have.property('capture').that.equals('fullPage') + expect(consoleProps).to.have.property('dimensions').that.is.a('string') + expect(consoleProps).to.have.property('disableTimersAndAnimations').that.is.a('boolean') + expect(consoleProps).to.have.property('duration').that.is.a('string') + expect(consoleProps).to.have.property('multipart').that.is.a('boolean') + expect(consoleProps).to.have.property('name').to.be.null + expect(consoleProps).to.have.property('path').that.is.a('string') + expect(consoleProps).to.have.property('pixelRatio').that.is.a('number') + expect(consoleProps).to.have.property('scaled').that.is.a('boolean') + expect(consoleProps).to.have.property('size').that.is.a('string') + expect(consoleProps).to.have.property('specName').that.is.a('string') + expect(consoleProps).to.have.property('takenAt').that.is.a('string') + expect(consoleProps).to.have.property('testAttemptIndex').that.is.a('number') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + // FIXME: viewports don't seems correct after taking screenshot when in snapshot mode + cy.screenshot({ capture: 'fullPage' }) + }) + }) + }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_spies_stubs_clocks.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_spies_stubs_clocks.spec.ts index 34bfa8b9bf55..51659f447e7d 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_spies_stubs_clocks.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_spies_stubs_clocks.spec.ts @@ -1,3 +1,5 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + context('cy.origin spies, stubs, and clock', () => { beforeEach(() => { cy.visit('/fixtures/multi-domain.html') @@ -80,4 +82,121 @@ context('cy.origin spies, stubs, and clock', () => { }) }) }) + + context('#consoleProps', () => { + const { _ } = Cypress + let logs: Map + + beforeEach(() => { + logs = new Map() + + // cy.clock only adds a log and does NOT update + cy.on('log:added', (attrs, log) => { + logs.set(attrs.id, log) + }) + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + }) + + it('spy()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const spyLog = findCrossOriginLogs('spy-1', logs, 'foobar.com') + + expect(spyLog.crossOriginLog).to.be.true + expect(spyLog.consoleProps.Command).to.equal('spy-1') + expect(spyLog.callCount).to.be.a('number') + expect(spyLog.functionName).to.equal('bar') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + const foo = { bar () { } } + + cy.spy(foo, 'bar') + foo.bar() + expect(foo.bar).to.be.called + }) + }) + + it('.stub()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const stubLog = findCrossOriginLogs('stub-1', logs, 'foobar.com') + + expect(stubLog.crossOriginLog).to.be.true + expect(stubLog.consoleProps.Command).to.equal('stub-1') + expect(stubLog.callCount).to.be.a('number') + expect(stubLog.functionName).to.equal('bar') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + const foo = { bar () { } } + + cy.stub(foo, 'bar') + foo.bar() + expect(foo.bar).to.be.called + }) + }) + + it('.clock()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const clockLog = findCrossOriginLogs('clock', logs, 'foobar.com') + + expect(clockLog.crossOriginLog).to.be.true + expect(clockLog.name).to.equal('clock') + + const consoleProps = clockLog.consoleProps() + + expect(consoleProps.Command).to.equal('clock') + expect(consoleProps).to.have.property('Methods replaced').that.is.a('object') + expect(consoleProps).to.have.property('Now').that.is.a('number') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + const now = Date.UTC(2022, 0, 12) + + cy.clock(now) + }) + }) + + it('.tick()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const tickLog = findCrossOriginLogs('tick', logs, 'foobar.com') + + expect(tickLog.crossOriginLog).to.be.true + expect(tickLog.name).to.equal('tick') + + const consoleProps = _.isFunction(tickLog.consoleProps) ? tickLog.consoleProps() : tickLog.consoleProps + + expect(consoleProps.Command).to.equal('tick') + expect(consoleProps).to.have.property('Methods replaced').that.is.a('object') + expect(consoleProps).to.have.property('Now').that.is.a('number') + expect(consoleProps).to.have.property('Ticked').that.is.a('string') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + const now = Date.UTC(2022, 0, 12) + + cy.clock(now) + + cy.tick(10000) + }) + }) + }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_traversal.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_traversal.spec.ts index 9e06a6acbd6c..94f4df23eadf 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_traversal.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_traversal.spec.ts @@ -1,3 +1,5 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + context('cy.origin traversal', () => { beforeEach(() => { cy.visit('/fixtures/multi-domain.html') @@ -112,4 +114,528 @@ context('cy.origin traversal', () => { cy.get('#input').siblings().should('have.length', 2) }) }) + + context('#consoleProps', () => { + const { _ } = Cypress + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + }) + + it('.children()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('children', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') + expect(consoleProps.Command).to.equal('children') + expect(consoleProps.Elements).to.equal(3) + expect(consoleProps.Selector).to.equal('') + expect(consoleProps.Yielded.length).to.equal(3) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('input') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('name') + expect(consoleProps.Yielded[2]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[2]).to.have.property('id').that.equals('age') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#by-id').children() + }) + }) + + it('.closest()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('closest', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') + expect(consoleProps.Command).to.equal('closest') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('form') + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('FORM') + expect(consoleProps.Yielded).to.have.property('id').that.equals('by-id') + expect(consoleProps.Yielded.querySelector('input#input')).to.be.ok + expect(consoleProps.Yielded.querySelector('input#name')).to.be.ok + expect(consoleProps.Yielded.querySelector('input#age')).to.be.ok + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#by-id').closest('form') + }) + }) + + it('.eq()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('eq', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps['Applied To'].length).to.equal(3) + expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') + expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') + expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') + + expect(consoleProps.Command).to.equal('eq') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('1') + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('name') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#by-id>input').eq(1) + }) + }) + + it('.filter()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('filter', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To'].length).to.equal(12) + expect(consoleProps.Command).to.equal('filter') + expect(consoleProps.Elements).to.equal(4) + expect(consoleProps.Selector).to.equal('[name="dogs"]') + + expect(consoleProps.Yielded.length).to.equal(4) + + _.forEach(consoleProps.Yielded, (yielded) => { + expect(yielded).to.have.property('tagName').that.equals('INPUT') + expect(yielded).to.have.property('name').that.equals('dogs') + }) + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#by-name>input') + .filter('[name="dogs"]') + }) + }) + + it('.find()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('find', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') + + expect(consoleProps.Command).to.equal('find') + expect(consoleProps.Elements).to.equal(3) + expect(consoleProps.Selector).to.equal('input') + + expect(consoleProps.Yielded.length).to.equal(3) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('input') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('name') + expect(consoleProps.Yielded[2]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[2]).to.have.property('id').that.equals('age') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#by-id').find('input') + }) + }) + + it('.first()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('first', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To'].length).to.equal(3) + expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') + expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') + expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') + + expect(consoleProps.Command).to.equal('first') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('input') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#by-id>input').first() + }) + }) + + it('.last()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('last', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To'].length).to.equal(3) + expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') + expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') + expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') + + expect(consoleProps.Command).to.equal('last') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('age') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#by-id>input').last() + }) + }) + + it('.next()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('next', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') + + expect(consoleProps.Command).to.equal('next') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('name') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#input').next() + }) + }) + + it('.nextAll()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('nextAll', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') + + expect(consoleProps.Command).to.equal('nextAll') + expect(consoleProps.Elements).to.equal(2) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded.length).to.equal(2) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('name') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('age') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#input').nextAll() + }) + }) + + it('.nextUntil()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('nextUntil', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') + + expect(consoleProps.Command).to.equal('nextUntil') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('#age') + + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('name') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#input').nextUntil('#age') + }) + }) + + it('.not()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('not', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To'].length).to.equal(3) + expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') + expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') + expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') + + expect(consoleProps.Command).to.equal('not') + expect(consoleProps.Elements).to.equal(2) + expect(consoleProps.Selector).to.equal('#age') + + expect(consoleProps.Yielded.length).to.equal(2) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('input') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('name') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#by-id>input').not('#age') + }) + }) + + it('.parent()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('parent', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') + + expect(consoleProps.Command).to.equal('parent') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('DIV') + expect(consoleProps.Yielded).to.have.property('id').that.equals('dom') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#by-id').parent() + }) + }) + + it('.parents()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('parents', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') + + expect(consoleProps.Command).to.equal('parents') + expect(consoleProps.Elements).to.equal(3) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded.length).to.equal(3) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('DIV') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('dom') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('BODY') + expect(consoleProps.Yielded[2]).to.have.property('tagName').that.equals('HTML') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#by-id').parents() + }) + }) + + it('.parentsUntil()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('parentsUntil', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') + + expect(consoleProps.Command).to.equal('parentsUntil') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('body') + + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('DIV') + expect(consoleProps.Yielded).to.have.property('id').that.equals('dom') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#by-id').parentsUntil('body') + }) + }) + + it('.prev()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('prev', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('age') + + expect(consoleProps.Command).to.equal('prev') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('name') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#age').prev() + }) + }) + + it('.prevAll()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('prevAll', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('age') + + expect(consoleProps.Command).to.equal('prevAll') + expect(consoleProps.Elements).to.equal(2) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded.length).to.equal(2) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('name') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('input') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#age').prevAll() + }) + }) + + it('.prevUntil()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('prevUntil', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('age') + + expect(consoleProps.Command).to.equal('prevUntil') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('#input') + + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('name') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#age').prevUntil('#input') + }) + }) + + it('.siblings()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('siblings', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') + + expect(consoleProps.Command).to.equal('siblings') + expect(consoleProps.Elements).to.equal(2) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded.length).to.equal(2) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('name') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('age') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.get('#input').siblings() + }) + }) + }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_viewport.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_viewport.spec.ts index e49a346b961a..3283be982833 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_viewport.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_viewport.spec.ts @@ -1,3 +1,5 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + context('cy.origin viewport', () => { it('syncs the viewport from the primary to secondary', () => { // change the viewport in the primary first @@ -178,5 +180,36 @@ context('cy.origin viewport', () => { }) }) }) + + context('#consoleProps', () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + }) + + it('.viewport()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('viewport', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('viewport') + expect(consoleProps.Width).to.equal(320) + expect(consoleProps.Height).to.equal(480) + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.viewport(320, 480) + }) + }) + }) }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_waiting.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_waiting.spec.ts index 54a7f51bcb7c..9e5a86cbbbf2 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_waiting.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_waiting.spec.ts @@ -1,3 +1,5 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + context('cy.origin waiting', () => { beforeEach(() => { cy.visit('/fixtures/multi-domain.html') @@ -9,4 +11,34 @@ context('cy.origin waiting', () => { cy.wait(500) }) }) + + context('#consoleProps', () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + }) + + it('.wait()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('wait', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('wait') + expect(consoleProps).to.have.property('Waited For').to.equal('500ms before continuing') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.wait(500) + }) + }) + }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_window.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_window.spec.ts index 95b56f279d36..45f4e1ff6e3b 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_window.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_window.spec.ts @@ -1,3 +1,5 @@ +import { findCrossOriginLogs } from '../../../../support/utils' + context('cy.origin window', () => { beforeEach(() => { cy.visit('/fixtures/multi-domain.html') @@ -21,4 +23,70 @@ context('cy.origin window', () => { cy.title().should('include', 'DOM Fixture') }) }) + + context('#consoleProps', () => { + let logs: Map + + beforeEach(() => { + logs = new Map() + + cy.on('log:changed', (attrs, log) => { + logs.set(attrs.id, log) + }) + }) + + it('.window()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('window', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('window') + expect(consoleProps.Yielded).to.be.null + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.window() + }) + }) + + it('.document()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('document', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('document') + expect(consoleProps.Yielded).to.be.null + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.document() + }) + }) + + it('.title()', (done) => { + cy.on('command:queue:end', () => { + setTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('title', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('title') + expect(consoleProps.Yielded).to.equal('DOM Fixture') + + done() + }, 250) + }) + + cy.origin('http://foobar.com:3500', () => { + cy.title() + }) + }) + }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_actions.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_actions.spec.ts deleted file mode 100644 index 78cf73ab03c9..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_actions.spec.ts +++ /dev/null @@ -1,624 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -describe('cross-origin snapshot actions', () => { - const { _ } = Cypress - let logs: Map - - beforeEach(() => { - logs = new Map() - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - - cy.visit('/fixtures/multi-domain.html') - }) - - it('.get()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = 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(crossOriginLog).to.be.true - - 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') - done() - }, 250) - }) - - cy.get('a[data-cy="dom-link"]').click() - cy.origin('http://foobar.com:3500', () => { - cy.get('#button') - }) - }) - - it('.alias()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { alias, aliasType, consoleProps, $el, crossOriginLog } = 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(crossOriginLog).to.be.true - - 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') - done() - }, 250) - }) - - cy.get('a[data-cy="dom-link"]').click() - cy.origin('http://foobar.com:3500', () => { - cy.get('#button').as('buttonAlias') - }) - }) - - it('.click()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { alias, aliasType, consoleProps, $el, crossOriginLog } = findCrossOriginLogs('click', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - expect(alias).to.equal(undefined) - expect(aliasType).to.equal(undefined) - - expect(consoleProps.Command).to.equal('click') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Coords).to.have.property('x').that.is.a('number') - expect(consoleProps.Coords).to.have.property('y').that.is.a('number') - - expect(consoleProps.Selector).to.be.undefined - expect(consoleProps.Yielded).to.be.undefined - expect(consoleProps.Options).to.be.undefined - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') - // TODO: test class list serialization - // expect(consoleProps['Applied To']).to.have.property('classList').that.contains(['my-custom-button-css', 'class2', '@class3']) - expect(consoleProps['Applied To'].getAttribute('id')).to.contain('button-inside-a') - expect(consoleProps['Applied To'].innerHTML).to.contain('click button') - - expect(consoleProps.table[1]).to.be.a('function') - - const tableContents = consoleProps.table[1]() - - expect(tableContents.name).to.equal('Mouse Events') - // can't exactly assert that is an Array because it is a Proxy object to an array - expect(tableContents.data).to.be.a('object') - - tableContents.data.forEach((datum) => { - expect(datum).to.have.property('Active Modifiers').that.equals(null) - expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click']) - expect(datum).to.have.property('Prevented Default').that.equals(null) - expect(datum).to.have.property('Stopped Propagation').that.equals(null) - expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) - }) - - done() - }, 250) - }) - - cy.get('a[data-cy="dom-link"]').click() - cy.origin('http://foobar.com:3500', () => { - cy.get('#button-inside-a').click() - }) - }) - - it('.dblclick()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('dblclick', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('dblclick') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Coords).to.have.property('x').that.is.a('number') - expect(consoleProps.Coords).to.have.property('y').that.is.a('number') - - expect(consoleProps.Selector).to.be.undefined - expect(consoleProps.Yielded).to.be.undefined - expect(consoleProps.Options).to.be.undefined - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('BUTTON') - expect(consoleProps['Applied To'].getAttribute('id')).to.contain('button') - expect(consoleProps['Applied To'].innerHTML).to.contain('button') - - expect(consoleProps.table[1]).to.be.a('function') - - const tableContents = consoleProps.table[1]() - - expect(tableContents.name).to.equal('Mouse Events') - // can't exactly assert that is an Array because it is a Proxy object to an array - expect(tableContents.data).to.be.a('object') - - tableContents.data.forEach((datum) => { - expect(datum).to.have.property('Active Modifiers').that.equals(null) - expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'dblclick']) - expect(datum).to.have.property('Prevented Default').that.equals(null) - expect(datum).to.have.property('Stopped Propagation').that.equals(null) - expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) - }) - - done() - }, 250) - }) - - cy.get('a[data-cy="dom-link"]').click() - cy.origin('http://foobar.com:3500', () => { - cy.get('#button').dblclick() - }) - }) - - it('.rightclick()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('rightclick', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('rightclick') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Coords).to.have.property('x').that.is.a('number') - expect(consoleProps.Coords).to.have.property('y').that.is.a('number') - - expect(consoleProps.Selector).to.be.undefined - expect(consoleProps.Yielded).to.be.undefined - expect(consoleProps.Options).to.be.undefined - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('BUTTON') - expect(consoleProps['Applied To'].getAttribute('id')).to.contain('button') - expect(consoleProps['Applied To'].innerHTML).to.contain('button') - - expect(consoleProps.table[1]).to.be.a('function') - - const tableContents = consoleProps.table[1]() - - expect(tableContents.name).to.equal('Mouse Events') - // can't exactly assert that is an Array because it is a Proxy object to an array - expect(tableContents.data).to.be.a('object') - - tableContents.data.forEach((datum) => { - expect(datum).to.have.property('Active Modifiers').that.equals(null) - expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'contextmenu']) - expect(datum).to.have.property('Prevented Default').that.equals(null) - expect(datum).to.have.property('Stopped Propagation').that.equals(null) - expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) - }) - - done() - }, 250) - }) - - cy.get('a[data-cy="dom-link"]').click() - cy.origin('http://foobar.com:3500', () => { - cy.get('#button').rightclick() - }) - }) - - it('.type()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { alias, aliasType, consoleProps, $el, crossOriginLog } = findCrossOriginLogs('type', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - expect(alias).to.equal(undefined) - expect(aliasType).to.equal(undefined) - - expect(consoleProps.Command).to.equal('type') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Coords).to.have.property('x').that.is.a('number') - expect(consoleProps.Coords).to.have.property('y').that.is.a('number') - - expect(consoleProps.Typed).to.equal('foo') - expect(consoleProps.Options).to.be.undefined - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'].getAttribute('id')).to.equal('input') - expect(consoleProps['Applied To'].innerHTML).to.equals('') - expect(consoleProps['Applied To'].type).to.equal('text') - - expect(consoleProps.table[1]).to.be.a('function') - expect(consoleProps.table[2]).to.be.a('function') - - const mouseEventsTable = consoleProps.table[1]() - const KeyboardEventsTable = consoleProps.table[2]() - - expect(mouseEventsTable.name).to.equal('Mouse Events') - expect(KeyboardEventsTable.name).to.equal('Keyboard Events') - // can't exactly assert that is an Array because it is a Proxy object to an array - expect(mouseEventsTable.data).to.be.a('object') - expect(KeyboardEventsTable.data).to.be.a('object') - - _.forEach(mouseEventsTable.data, (datum) => { - expect(datum).to.have.property('Active Modifiers').that.equals(null) - expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click']) - expect(datum).to.have.property('Prevented Default').that.equals(null) - expect(datum).to.have.property('Stopped Propagation').that.equals(null) - expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) - }) - - _.forEach(KeyboardEventsTable.data, (datum) => { - expect(datum).to.have.property('Active Modifiers').that.equals(null) - expect(datum).to.have.property('Events Fired').that.equals('keydown, keypress, beforeinput, textInput, input, keyup') - expect(datum).to.have.property('Prevented Default').that.equals(null) - expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) - }) - - expect(KeyboardEventsTable.data[1]).to.have.property('Details').that.equals('{ code: KeyF, which: 70 }') - expect(KeyboardEventsTable.data[1]).to.have.property('Typed').that.equals('f') - - expect(KeyboardEventsTable.data[2]).to.have.property('Details').that.equals('{ code: KeyO, which: 79 }') - expect(KeyboardEventsTable.data[2]).to.have.property('Typed').that.equals('o') - - expect(KeyboardEventsTable.data[3]).to.have.property('Details').that.equals('{ code: KeyO, which: 79 }') - expect(KeyboardEventsTable.data[3]).to.have.property('Typed').that.equals('o') - - done() - }, 250) - }) - - cy.get('a[data-cy="dom-link"]').click() - cy.origin('http://foobar.com:3500', () => { - cy.get('input#input').type('foo') - }) - }) - - it('.submit()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('submit', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('submit') - expect(consoleProps.Elements).to.equal(1) - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') - expect(consoleProps['Applied To'].getAttribute('id')).to.equal('multiple-inputs-and-input-submit') - expect(consoleProps['Applied To'].querySelector('input[name="fname"]')).to.be.ok - expect(consoleProps['Applied To'].querySelector('input[name="lname"]')).to.be.ok - expect(consoleProps['Applied To'].querySelector('input[type="submit"]')).to.be.ok - - // make sure input values are passed along into the serialized snapshot/element - expect(consoleProps['Applied To'].querySelector('input[name="fname"]').value).to.equal('foo') - expect(consoleProps['Applied To'].querySelector('input[name="lname"]').value).to.equal('bar') - expect(consoleProps['Applied To'].querySelector('input[type="submit"]').value).to.equal('submit me') - done() - }, 250) - }) - - cy.get('a[data-cy="dom-link"]').click() - cy.origin('http://foobar.com:3500', () => { - cy.get('form#multiple-inputs-and-input-submit input[name="fname"]').type('foo') - cy.get('form#multiple-inputs-and-input-submit input[name="lname"]').type('bar') - cy.get('form#multiple-inputs-and-input-submit').submit() - }) - }) - - it('.focus()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('focus', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('focus') - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'].getAttribute('id')).to.equal('input') - done() - }, 250) - }) - - cy.get('a[data-cy="dom-link"]').click() - cy.origin('http://foobar.com:3500', () => { - // FIXME: snapshot shows the primary domain. Should be secondary - cy.get('#input').focus() - }) - }) - - it('.blur()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('blur', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('blur') - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'].getAttribute('id')).to.equal('input') - done() - }, 250) - }) - - cy.get('a[data-cy="dom-link"]').click() - cy.origin('http://foobar.com:3500', () => { - // FIXME: snapshot shows the primary domain (before type). Should be secondary - cy.get('#input').type('foo').blur() - }) - }) - - it('.clear()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('clear', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('clear') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Options).to.be.undefined - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'].getAttribute('id')).to.equal('input') - done() - }, 250) - }) - - cy.get('a[data-cy="dom-link"]').click() - cy.origin('http://foobar.com:3500', () => { - // FIXME: snapshot shows the primary domain. Should be secondary - cy.get('#input').type('foo').clear() - }) - }) - - it('.check()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('check', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('check') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Coords).to.have.property('x').that.is.a('number') - expect(consoleProps.Coords).to.have.property('y').that.is.a('number') - - expect(consoleProps.Options).to.be.undefined - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - - expect(consoleProps.table[1]).to.be.a('function') - - const tableContents = consoleProps.table[1]() - - expect(tableContents.name).to.equal('Mouse Events') - // can't exactly assert that is an Array because it is a Proxy object to an array - expect(tableContents.data).to.be.a('object') - - tableContents.data.forEach((datum) => { - expect(datum).to.have.property('Active Modifiers').that.equals(null) - expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'contextmenu']) - expect(datum).to.have.property('Prevented Default').that.equals(null) - expect(datum).to.have.property('Stopped Propagation').that.equals(null) - expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) - }) - - done() - }, 250) - }) - - cy.get('a[data-cy="dom-link"]').click() - cy.origin('http://foobar.com:3500', () => { - cy.get(':checkbox[name="colors"][value="blue"]').check() - }) - }) - - it('.uncheck()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('uncheck', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('uncheck') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Coords).to.have.property('x').that.is.a('number') - expect(consoleProps.Coords).to.have.property('y').that.is.a('number') - - expect(consoleProps.Options).to.be.undefined - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - - expect(consoleProps.table[1]).to.be.a('function') - - const tableContents = consoleProps.table[1]() - - expect(tableContents.name).to.equal('Mouse Events') - // can't exactly assert that is an Array because it is a Proxy object to an array - expect(tableContents.data).to.be.a('object') - - tableContents.data.forEach((datum) => { - expect(datum).to.have.property('Active Modifiers').that.equals(null) - expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'contextmenu']) - expect(datum).to.have.property('Prevented Default').that.equals(null) - expect(datum).to.have.property('Stopped Propagation').that.equals(null) - expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) - }) - - done() - }, 250) - }) - - cy.get('a[data-cy="dom-link"]').click() - cy.origin('http://foobar.com:3500', () => { - cy.get(':checkbox[name="colors"][value="blue"]') - .check().uncheck() - }) - }) - - it('.select()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('select', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('select') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Coords).to.have.property('x').that.is.a('number') - expect(consoleProps.Coords).to.have.property('y').that.is.a('number') - - expect(consoleProps.Options).to.be.undefined - expect(consoleProps.Selected[0]).to.equal('Japanese') - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('SELECT') - - expect(consoleProps.table[1]).to.be.a('function') - - const tableContents = consoleProps.table[1]() - - expect(tableContents.name).to.equal('Mouse Events') - // can't exactly assert that is an Array because it is a Proxy object to an array - expect(tableContents.data).to.be.a('object') - - tableContents.data.forEach((datum) => { - expect(datum).to.have.property('Active Modifiers').that.equals(null) - expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'contextmenu']) - expect(datum).to.have.property('Prevented Default').that.equals(null) - expect(datum).to.have.property('Stopped Propagation').that.equals(null) - expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) - }) - - done() - }, 250) - }) - - cy.get('a[data-cy="dom-link"]').click() - cy.origin('http://foobar.com:3500', () => { - // TODO: wrong selected value is displayed in the snapshot after - cy.get('select[name="foods"]').select('Japanese') - }) - }) - - it('.scrollIntoView()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('scrollIntoView', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('scrollIntoView') - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('H5') - expect(consoleProps['Scrolled Element']).to.have.property('tagName').that.equals('H5') - - done() - }, 250) - }) - - cy.get('a[data-cy="scrolling-link"]').click() - cy.origin('http://foobar.com:3500', () => { - // FIXME: snapshot of primary is showing for scrollIntoView - cy.get('#scroll-into-view-vertical h5') - .should('not.be.visible') - .scrollIntoView() - }) - }) - - it('.scrollTo()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('scrollTo', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('scrollTo') - expect(consoleProps.X).to.equal(0) - expect(consoleProps.Y).to.equal(300) - expect(consoleProps['Scrolled Element']).to.have.property('tagName').that.equals('DIV') - - done() - }, 250) - }) - - cy.get('a[data-cy="scrolling-link"]').click() - - cy.origin('http://foobar.com:3500', () => { - cy.get('#scroll-into-view-vertical h5').should('not.be.visible') - cy.get('#scroll-into-view-vertical').scrollTo(0, 300) - }) - }) - - it('.trigger()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('trigger', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('trigger') - expect(consoleProps['Event options']).to.have.property('bubbles').that.is.a('boolean') - expect(consoleProps['Event options']).to.have.property('cancelable').that.is.a('boolean') - expect(consoleProps['Event options']).to.have.property('clientX').that.is.a('number') - expect(consoleProps['Event options']).to.have.property('clientY').that.is.a('number') - expect(consoleProps['Event options']).to.have.property('pageX').that.is.a('number') - expect(consoleProps['Event options']).to.have.property('pageY').that.is.a('number') - expect(consoleProps['Event options']).to.have.property('screenX').that.is.a('number') - expect(consoleProps['Event options']).to.have.property('screenY').that.is.a('number') - expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('BUTTON') - - done() - }, 250) - }) - - cy.get('a[data-cy="dom-link"]').click() - - cy.origin('http://foobar.com:3500', () => { - cy.get('#button').trigger('click') - }) - }) - - it('.selectFile()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('selectFile', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('selectFile') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Target).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Target).to.have.property('id').that.equals('basic') - - done() - }, 250) - }) - - cy.get('a[data-cy="files-form-link"]').click() - - cy.origin('http://foobar.com:3500', () => { - cy.get('#basic').selectFile({ contents: Cypress.Buffer.from('foo'), fileName: 'foo.txt' }) - }) - }) -}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_aliasing.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_aliasing.spec.ts deleted file mode 100644 index 55d5da45cdc9..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_aliasing.spec.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -// @ts-ignore / session support is needed for visiting about:blank between tests -context('cross-origin snapshot aliasing', { experimentalSessionSupport: true }, () => { - let logs: Map - - beforeEach(() => { - logs = new Map() - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="dom-link"]').click() - }) - - it('.as()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { alias, aliasType, consoleProps, $el, crossOriginLog } = 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(crossOriginLog).to.be.true - - 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') - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#button').as('buttonAlias') - }) - }) -}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_assertions.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_assertions.spec.ts deleted file mode 100644 index 45e37286a22e..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_assertions.spec.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -// @ts-ignore / session support is needed for visiting about:blank between tests -context('cross-origin snapshot assertions', { experimentalSessionSupport: true }, () => { - let logs: Map - - beforeEach(() => { - logs = new Map() - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="dom-link"]').click() - }) - - it('.should() and .and()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const assertionLogs = findCrossOriginLogs('assert', logs, 'foobar.com') - - expect(assertionLogs[0].consoleProps.Message).to.equal('expected not to be checked') - expect(assertionLogs[1].consoleProps.Message).to.equal('expected not to be disabled') - - assertionLogs.forEach(({ $el, crossOriginLog, consoleProps }) => { - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - 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') - }) - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get(':checkbox[name="colors"][value="blue"]') - .should('not.be.checked').and('not.be.disabled') - }) - }) -}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_connectors.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_connectors.spec.ts deleted file mode 100644 index 6eb9942610c7..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_connectors.spec.ts +++ /dev/null @@ -1,85 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -// @ts-ignore / session support is needed for visiting about:blank between tests -context('cross-origin snapshot connectors', { experimentalSessionSupport: true }, () => { - let logs: Map - - beforeEach(() => { - logs = new Map() - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="dom-link"]').click() - }) - - // NOTE: there is no command log for .each() - it.skip('.each()', () => undefined) - - it('.its()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('its', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - 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') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - // FIXME: snapshot of primary is showing for its - cy.get('#by-id>input').its('length') - }) - }) - - it('.invoke()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('invoke', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - 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') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - // FIXME: snapshot of primary is showing for its - cy.get('#button').invoke('text') - }) - }) - - // NOTE: there is no command log for .spread() - it.skip('.spread()', () => undefined) - - // NOTE: there is no command log for .then() - it.skip('.then()', () => undefined) -}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_cookies.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_cookies.spec.ts deleted file mode 100644 index 70a86adbbf1e..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_cookies.spec.ts +++ /dev/null @@ -1,174 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -// @ts-ignore / session support is needed for visiting about:blank between tests -context('cross-origin snapshot cookies', { experimentalSessionSupport: true }, () => { - const { _ } = Cypress - let logs: Map - - beforeEach(() => { - logs = new Map() - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - - cy.clearCookies() - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="cross-origin-secondary-link"]').click() - }) - - it('.getCookie()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('getCookie', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - 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') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.getCookies().should('be.empty') - cy.setCookie('foo', 'bar') - cy.getCookie('foo') - }) - }) - - it('.getCookies()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - // get the last 'getCookies' command, which is the one we care about for this test - const allGetCookieLogs = findCrossOriginLogs('getCookies', logs, 'foobar.com') - - const { crossOriginLog, consoleProps } = allGetCookieLogs.pop() as any - - expect(crossOriginLog).to.be.true - - 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') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.getCookies().should('be.empty') - - cy.setCookie('foo', 'bar') - cy.getCookies() - }) - }) - - it('.setCookie()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('setCookie', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - 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') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.getCookies().should('be.empty') - - cy.setCookie('foo', 'bar') - }) - }) - - it('.clearCookie()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('clearCookie', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - 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') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.setCookie('foo', 'bar') - cy.getCookie('foo').should('not.be.null') - cy.clearCookie('foo') - }) - }) - - it('.clearCookies()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('clearCookies', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - 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') - }) - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.setCookie('foo', 'bar') - cy.setCookie('faz', 'baz') - - cy.getCookies().should('have.length', 2) - cy.clearCookies() - }) - }) -}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_files.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_files.spec.ts deleted file mode 100644 index f7133c7b24c7..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_files.spec.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -// @ts-ignore / session support is needed for visiting about:blank between tests -context('cross-origin snapshot files', { experimentalSessionSupport: true }, () => { - let logs: Map - - beforeEach(() => { - logs = new Map() - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="cross-origin-secondary-link"]').click() - }) - - // NOTE: there is no command log for .fixture(). shows up as a (new url) - it.skip('.fixture()', () => undefined) - - it('.readFile()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('readFile', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('readFile') - expect(consoleProps['File Path']).to.include('cypress/fixtures/example.json') - expect(consoleProps.Contents).to.deep.equal({ example: true }) - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.readFile('cypress/fixtures/example.json') - }) - }) - - it('.writeFile()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('writeFile', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('writeFile') - expect(consoleProps['File Path']).to.equal('foo.json') - expect(consoleProps.Contents).to.equal('{"foo":"bar"}') - - done() - }, 250) - }) - - 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) - }) - }) -}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_local_storage.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_local_storage.spec.ts deleted file mode 100644 index 0414b9793e88..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_local_storage.spec.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -// @ts-ignore / session support is needed for visiting about:blank between tests -context('cross-origin snapshot local storage', { experimentalSessionSupport: true }, () => { - let logs: Map - - beforeEach(() => { - logs = new Map() - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="cross-origin-secondary-link"]').click() - }) - - it('.clearLocalStorage()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('clearLocalStorage', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('clearLocalStorage') - expect(consoleProps.Yielded).to.be.null - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.window().then((win) => { - win.localStorage.setItem('foo', 'bar') - expect(win.localStorage.getItem('foo')).to.equal('bar') - }) - - cy.clearLocalStorage() - }) - }) -}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_location.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_location.spec.ts deleted file mode 100644 index 0541946343ad..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_location.spec.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -// @ts-ignore / session support is needed for visiting about:blank between tests -context('cross-origin snapshot location', { experimentalSessionSupport: true }, () => { - let logs: Map - - beforeEach(() => { - logs = new Map() - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="cross-origin-secondary-link"]').click() - }) - - it('.hash()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('hash', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('hash') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.hash() - }) - }) - - it('.location()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('location', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('location') - - expect(consoleProps.Yielded).to.have.property('auth').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('authObj').that.is.undefined - expect(consoleProps.Yielded).to.have.property('hash').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('host').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('hostname').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('href').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('origin').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('originPolicy').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('pathname').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('port').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('protocol').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('search').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('superDomain').that.is.a('string') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.location() - }) - }) - - it('.url()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('url', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('url') - - expect(consoleProps.Yielded).to.equal('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.url() - }) - }) -}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_misc.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_misc.spec.ts deleted file mode 100644 index 7ef6ace05796..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_misc.spec.ts +++ /dev/null @@ -1,164 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -// @ts-ignore / session support is needed for visiting about:blank between tests -context('cross-origin snapshot misc', { experimentalSessionSupport: true }, () => { - let logs: Map - - beforeEach(() => { - logs = new Map() - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="dom-link"]').click() - }) - - // NOTE: there is no log for .end() - it.skip('.end()', () => undefined) - - it('.exec()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('exec', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('exec') - expect(consoleProps['Shell Used']).to.be.undefined - expect(consoleProps.Yielded).to.have.property('code').that.equals(0) - expect(consoleProps.Yielded).to.have.property('stderr').that.equals('') - expect(consoleProps.Yielded).to.have.property('stdout').that.equals('foobar') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.exec('echo foobar') - }) - }) - - it('.focused()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('focused', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('focused') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('BUTTON') - expect(consoleProps.Yielded).to.have.property('id').that.equals('button') - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#button').click().focused() - }) - }) - - it('.wrap()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('wrap', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('wrap') - expect(consoleProps.Yielded[0]).to.equal('foo') - expect(consoleProps.Yielded[1]).to.equal('bar') - expect(consoleProps.Yielded[2]).to.equal('baz') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - const arr = ['foo', 'bar', 'baz'] - - cy.wrap(arr).spread((foo, bar, baz) => { - expect(foo).to.equal('foo') - expect(bar).to.equal('bar') - expect(baz).to.equal('baz') - }) - }) - }) - - it('.debug()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('debug', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('debug') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('BUTTON') - expect(consoleProps.Yielded).to.have.property('id').that.equals('button') - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#button').debug() - }) - }) - - it('.pause()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - if (Cypress.config('isInteractive')) { - // if `isInteractive`, the .pause() will NOT show up in the command log in this case. Essentially a no-op. - done() - - return - } - - const { consoleProps, crossOriginLog } = findCrossOriginLogs('pause', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('pause') - expect(consoleProps.Yielded).to.be.undefined - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - const afterPaused = new Promise((resolve) => { - cy.once('paused', () => { - Cypress.emit('resume:all') - resolve() - }) - }) - - cy.pause().wrap({}).should('deep.eq', {}) - // pause is a noop in run mode, so only wait for it if in open mode - if (Cypress.config('isInteractive')) { - cy.wrap(afterPaused) - } - }) - }) - - it('.task()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('task', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('task') - expect(consoleProps.Yielded).to.equal('works') - expect(consoleProps.arg).to.equal('works') - expect(consoleProps.task).to.equal('return:arg') - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.task('return:arg', 'works') - }) - }) -}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_navigation.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_navigation.spec.ts deleted file mode 100644 index 0f9988515231..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_navigation.spec.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -// @ts-ignore -context('multi-origin snapshot navigation', { experimentalSessionSupport: true }, () => { - let logs: Map - - beforeEach(() => { - logs = new Map() - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - }) - - it('.go()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog, ...attrs } = findCrossOriginLogs('go', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(attrs.name).to.equal('go') - expect(attrs.message).to.equal('back') - - expect(consoleProps.Command).to.equal('go') - expect(consoleProps.Yielded).to.be.null - - done() - }, 250) - }) - - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="cross-origin-secondary-link"]').click() - - cy.origin('http://foobar.com:3500', () => { - cy.visit('http://www.foobar.com:3500/fixtures/dom.html') - - cy.go('back') - }) - }) - - it('.reload()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog, ...attrs } = findCrossOriginLogs('reload', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(attrs.name).to.equal('reload') - expect(attrs.message).to.equal('') - - expect(consoleProps.Command).to.equal('reload') - expect(consoleProps.Yielded).to.be.null - - done() - }, 250) - }) - - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="dom-link"]').click() - - cy.origin('http://foobar.com:3500', () => { - cy.reload() - }) - }) - - it('visit()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog, ...attrs } = findCrossOriginLogs('visit', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(attrs.name).to.equal('visit') - expect(attrs.message).to.equal('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') - - expect(consoleProps.Command).to.equal('visit') - expect(consoleProps).to.have.property('Cookies Set').that.is.an('object') - expect(consoleProps).to.have.property('Redirects').that.is.an('object') - expect(consoleProps).to.have.property('Resolved Url').that.equals('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') - - done() - }, 250) - }) - - cy.visit('/fixtures/multi-domain.html') - - cy.origin('http://foobar.com:3500', () => { - cy.visit('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') - - cy.get('[data-cy="dom-check"]').should('have.text', 'From a secondary origin') - }) - }) -}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_network_requests.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_network_requests.spec.ts deleted file mode 100644 index fd93bfa49a61..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_network_requests.spec.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -// @ts-ignore / session support is needed for visiting about:blank between tests -context('cross-origin snapshot network requests', { experimentalSessionSupport: true }, () => { - let logs: Map - - beforeEach(() => { - logs = new Map() - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="request-link"]').click() - }) - - it('.request()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('request', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('request') - - expect(consoleProps.Request).to.have.property('Request Body').that.equals(null) - expect(consoleProps.Request).to.have.property('Request Headers').that.is.a('object') - expect(consoleProps.Request).to.have.property('Request URL').that.equals('http://www.foobar.com:3500/fixtures/example.json') - expect(consoleProps.Request).to.have.property('Response Body').that.is.a('string') - expect(consoleProps.Request).to.have.property('Response Headers').that.is.a('object') - expect(consoleProps.Request).to.have.property('Response Status').that.equals(200) - - expect(consoleProps.Yielded).to.have.property('body').that.deep.equals({ example: true }) - expect(consoleProps.Yielded).to.have.property('duration').that.is.a('number') - expect(consoleProps.Yielded).to.have.property('headers').that.is.a('object') - expect(consoleProps.Yielded).to.have.property('status').that.equals(200) - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.request('http://www.foobar.com:3500/fixtures/example.json') - }) - }) -}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_querying.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_querying.spec.ts deleted file mode 100644 index bd9044ed4cd0..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_querying.spec.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -// @ts-ignore / session support is needed for visiting about:blank between tests -context('cross-origin snapshot querying', { experimentalSessionSupport: true }, () => { - let logs: Map - - beforeEach(() => { - logs = new Map() - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="dom-link"]').click() - }) - - it('.contains()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('contains', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('contains') - expect(consoleProps['Applied To']).to.be.undefined - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Content).to.equal('Nested Find') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('DIV') - expect(consoleProps.Yielded).to.have.property('id').that.equals('nested-find') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.contains('Nested Find') - }) - }) - - it('.within()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('within', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('within') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('FORM') - expect(consoleProps.Yielded).to.have.property('id').that.equals('by-id') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#by-id').within(() => { - cy.get('#input') - }) - }) - }) - - it('.root()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('root', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('root') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('HTML') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.root() - }) - }) -}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_querying_shadow.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_querying_shadow.spec.ts deleted file mode 100644 index 96ac69ed1ad6..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_querying_shadow.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -// @ts-ignore / session support is needed for visiting about:blank between tests -context('cross-origin snapshot shadow dom', { experimentalSessionSupport: true }, () => { - let logs: Map - - beforeEach(() => { - logs = new Map() - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="shadow-dom-link"]').click() - }) - - it('.shadow()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('shadow', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('shadow') - expect(consoleProps.Elements).to.equal(1) - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('CY-TEST-ELEMENT') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('shadow-element-1') - - expect(consoleProps.Yielded).to.be.null - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#shadow-element-1').shadow() - }) - }) -}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_screenshot.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_screenshot.spec.ts deleted file mode 100644 index 1ad3066fd212..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_screenshot.spec.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -// @ts-ignore / session support is needed for visiting about:blank between tests -context('cross-origin snapshot screenshot', { experimentalSessionSupport: true }, () => { - let logs: Map - - beforeEach(() => { - logs = new Map() - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - - // cy.viewport(600, 200) - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="screenshots-link"]').click() - }) - - it('.screenshot()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('screenshot', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('screenshot') - - expect(consoleProps).to.have.property('blackout') - expect(consoleProps).to.have.property('capture').that.equals('fullPage') - expect(consoleProps).to.have.property('dimensions').that.is.a('string') - expect(consoleProps).to.have.property('disableTimersAndAnimations').that.is.a('boolean') - expect(consoleProps).to.have.property('duration').that.is.a('string') - expect(consoleProps).to.have.property('multipart').that.is.a('boolean') - expect(consoleProps).to.have.property('name').to.be.null - expect(consoleProps).to.have.property('path').that.is.a('string') - expect(consoleProps).to.have.property('pixelRatio').that.is.a('number') - expect(consoleProps).to.have.property('scaled').that.is.a('boolean') - expect(consoleProps).to.have.property('size').that.is.a('string') - expect(consoleProps).to.have.property('specName').that.is.a('string') - expect(consoleProps).to.have.property('takenAt').that.is.a('string') - expect(consoleProps).to.have.property('testAttemptIndex').that.is.a('number') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - // FIXME: viewports don't seems correct after taking screenshot when in snapshot mode - cy.screenshot({ capture: 'fullPage' }) - }) - }) -}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_spies_stubs_clocks.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_spies_stubs_clocks.spec.ts deleted file mode 100644 index 7f5906d1882f..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_spies_stubs_clocks.spec.ts +++ /dev/null @@ -1,123 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -// @ts-ignore / session support is needed for visiting about:blank between tests -context('cross-origin snapshot spies, stubs, and clock', { experimentalSessionSupport: true }, () => { - const { _ } = Cypress - let logs: Map - - beforeEach(() => { - logs = new Map() - - // cy.clock only adds a log and does NOT update - cy.on('log:added', (attrs, log) => { - logs.set(attrs.id, log) - }) - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - - cy.clearCookies() - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="cross-origin-secondary-link"]').click() - }) - - it('spy()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const spyLog = findCrossOriginLogs('spy-1', logs, 'foobar.com') - - expect(spyLog.crossOriginLog).to.be.true - expect(spyLog.consoleProps.Command).to.equal('spy-1') - expect(spyLog.callCount).to.be.a('number') - expect(spyLog.functionName).to.equal('bar') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - const foo = { bar () { } } - - cy.spy(foo, 'bar') - foo.bar() - expect(foo.bar).to.be.called - }) - }) - - it('.stub()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const stubLog = findCrossOriginLogs('stub-1', logs, 'foobar.com') - - expect(stubLog.crossOriginLog).to.be.true - expect(stubLog.consoleProps.Command).to.equal('stub-1') - expect(stubLog.callCount).to.be.a('number') - expect(stubLog.functionName).to.equal('bar') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - const foo = { bar () { } } - - cy.stub(foo, 'bar') - foo.bar() - expect(foo.bar).to.be.called - }) - }) - - it('.clock()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const clockLog = findCrossOriginLogs('clock', logs, 'foobar.com') - - expect(clockLog.crossOriginLog).to.be.true - expect(clockLog.name).to.equal('clock') - - const consoleProps = clockLog.consoleProps() - - expect(consoleProps.Command).to.equal('clock') - expect(consoleProps).to.have.property('Methods replaced').that.is.a('object') - expect(consoleProps).to.have.property('Now').that.is.a('number') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - const now = Date.UTC(2022, 0, 12) - - cy.clock(now) - }) - }) - - it('.tick()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const tickLog = findCrossOriginLogs('tick', logs, 'foobar.com') - - expect(tickLog.crossOriginLog).to.be.true - expect(tickLog.name).to.equal('tick') - - const consoleProps = _.isFunction(tickLog.consoleProps) ? tickLog.consoleProps() : tickLog.consoleProps - - expect(consoleProps.Command).to.equal('tick') - expect(consoleProps).to.have.property('Methods replaced').that.is.a('object') - expect(consoleProps).to.have.property('Now').that.is.a('number') - expect(consoleProps).to.have.property('Ticked').that.is.a('string') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - const now = Date.UTC(2022, 0, 12) - - cy.clock(now) - - cy.tick(10000) - }) - }) -}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_traversal.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_traversal.spec.ts deleted file mode 100644 index 0eaed6223510..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_traversal.spec.ts +++ /dev/null @@ -1,529 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -// @ts-ignore / session support is needed for visiting about:blank between tests -context('cross-origin snapshot traversal', { experimentalSessionSupport: true }, () => { - const { _ } = Cypress - let logs: Map - - beforeEach(() => { - logs = new Map() - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="dom-link"]').click() - }) - - it('.children()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('children', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') - expect(consoleProps.Command).to.equal('children') - expect(consoleProps.Elements).to.equal(3) - expect(consoleProps.Selector).to.equal('') - expect(consoleProps.Yielded.length).to.equal(3) - expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('input') - expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('name') - expect(consoleProps.Yielded[2]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[2]).to.have.property('id').that.equals('age') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#by-id').children() - }) - }) - - it('.closest()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('closest', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') - expect(consoleProps.Command).to.equal('closest') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('form') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('FORM') - expect(consoleProps.Yielded).to.have.property('id').that.equals('by-id') - expect(consoleProps.Yielded.querySelector('input#input')).to.be.ok - expect(consoleProps.Yielded.querySelector('input#name')).to.be.ok - expect(consoleProps.Yielded.querySelector('input#age')).to.be.ok - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#by-id').closest('form') - }) - }) - - it('.eq()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('eq', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps['Applied To'].length).to.equal(3) - expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') - expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') - expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') - - expect(consoleProps.Command).to.equal('eq') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('1') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded).to.have.property('id').that.equals('name') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#by-id>input').eq(1) - }) - }) - - it('.filter()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('filter', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps['Applied To'].length).to.equal(12) - expect(consoleProps.Command).to.equal('filter') - expect(consoleProps.Elements).to.equal(4) - expect(consoleProps.Selector).to.equal('[name="dogs"]') - - expect(consoleProps.Yielded.length).to.equal(4) - - _.forEach(consoleProps.Yielded, (yielded) => { - expect(yielded).to.have.property('tagName').that.equals('INPUT') - expect(yielded).to.have.property('name').that.equals('dogs') - }) - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#by-name>input') - .filter('[name="dogs"]') - }) - }) - - it('.find()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('find', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') - - expect(consoleProps.Command).to.equal('find') - expect(consoleProps.Elements).to.equal(3) - expect(consoleProps.Selector).to.equal('input') - - expect(consoleProps.Yielded.length).to.equal(3) - expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('input') - expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('name') - expect(consoleProps.Yielded[2]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[2]).to.have.property('id').that.equals('age') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#by-id').find('input') - }) - }) - - it('.first()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('first', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps['Applied To'].length).to.equal(3) - expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') - expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') - expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') - - expect(consoleProps.Command).to.equal('first') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('') - - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded).to.have.property('id').that.equals('input') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#by-id>input').first() - }) - }) - - it('.last()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('last', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps['Applied To'].length).to.equal(3) - expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') - expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') - expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') - - expect(consoleProps.Command).to.equal('last') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('') - - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded).to.have.property('id').that.equals('age') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#by-id>input').last() - }) - }) - - it('.next()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('next', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') - - expect(consoleProps.Command).to.equal('next') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('') - - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded).to.have.property('id').that.equals('name') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#input').next() - }) - }) - - it('.nextAll()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('nextAll', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') - - expect(consoleProps.Command).to.equal('nextAll') - expect(consoleProps.Elements).to.equal(2) - expect(consoleProps.Selector).to.equal('') - - expect(consoleProps.Yielded.length).to.equal(2) - expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('name') - expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('age') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#input').nextAll() - }) - }) - - it('.nextUntil()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('nextUntil', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') - - expect(consoleProps.Command).to.equal('nextUntil') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('#age') - - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded).to.have.property('id').that.equals('name') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#input').nextUntil('#age') - }) - }) - - it('.not()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('not', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps['Applied To'].length).to.equal(3) - expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') - expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') - expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') - - expect(consoleProps.Command).to.equal('not') - expect(consoleProps.Elements).to.equal(2) - expect(consoleProps.Selector).to.equal('#age') - - expect(consoleProps.Yielded.length).to.equal(2) - expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('input') - expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('name') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#by-id>input').not('#age') - }) - }) - - it('.parent()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('parent', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') - - expect(consoleProps.Command).to.equal('parent') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('') - - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('DIV') - expect(consoleProps.Yielded).to.have.property('id').that.equals('dom') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#by-id').parent() - }) - }) - - it('.parents()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('parents', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') - - expect(consoleProps.Command).to.equal('parents') - expect(consoleProps.Elements).to.equal(3) - expect(consoleProps.Selector).to.equal('') - - expect(consoleProps.Yielded.length).to.equal(3) - expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('DIV') - expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('dom') - expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('BODY') - expect(consoleProps.Yielded[2]).to.have.property('tagName').that.equals('HTML') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#by-id').parents() - }) - }) - - it('.parentsUntil()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('parentsUntil', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') - - expect(consoleProps.Command).to.equal('parentsUntil') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('body') - - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('DIV') - expect(consoleProps.Yielded).to.have.property('id').that.equals('dom') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#by-id').parentsUntil('body') - }) - }) - - it('.prev()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('prev', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('age') - - expect(consoleProps.Command).to.equal('prev') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('') - - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded).to.have.property('id').that.equals('name') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#age').prev() - }) - }) - - it('.prevAll()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('prevAll', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('age') - - expect(consoleProps.Command).to.equal('prevAll') - expect(consoleProps.Elements).to.equal(2) - expect(consoleProps.Selector).to.equal('') - - expect(consoleProps.Yielded.length).to.equal(2) - expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('name') - expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('input') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#age').prevAll() - }) - }) - - it('.prevUntil()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('prevUntil', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('age') - - expect(consoleProps.Command).to.equal('prevUntil') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('#input') - - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded).to.have.property('id').that.equals('name') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#age').prevUntil('#input') - }) - }) - - it('.siblings()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('siblings', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') - - expect(consoleProps.Command).to.equal('siblings') - expect(consoleProps.Elements).to.equal(2) - expect(consoleProps.Selector).to.equal('') - - expect(consoleProps.Yielded.length).to.equal(2) - expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('name') - expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('age') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#input').siblings() - }) - }) -}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_viewport.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_viewport.spec.ts deleted file mode 100644 index b02d4b41f983..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_viewport.spec.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -// @ts-ignore / session support is needed for visiting about:blank between tests -context('cross-origin snapshot viewport', { experimentalSessionSupport: true }, () => { - let logs: Map - - beforeEach(() => { - logs = new Map() - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="cross-origin-secondary-link"]').click() - }) - - it('.viewport()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('viewport', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('viewport') - expect(consoleProps.Width).to.equal(320) - expect(consoleProps.Height).to.equal(480) - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.viewport(320, 480) - }) - }) -}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_waiting.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_waiting.spec.ts deleted file mode 100644 index ccef62aa803a..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_waiting.spec.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -// @ts-ignore / session support is needed for visiting about:blank between tests -context('cross-origin snapshot waiting', { experimentalSessionSupport: true }, () => { - let logs: Map - - beforeEach(() => { - logs = new Map() - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="cross-origin-secondary-link"]').click() - }) - - it('.wait()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('wait', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('wait') - expect(consoleProps).to.have.property('Waited For').to.equal('500ms before continuing') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.wait(500) - }) - }) -}) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_window.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_window.spec.ts deleted file mode 100644 index 5939b93d73cc..000000000000 --- a/packages/driver/cypress/integration/e2e/multi-domain/snapshots/multi_domain_snapshot_window.spec.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { findCrossOriginLogs } from '../../../../support/utils' - -// @ts-ignore / session support is needed for visiting about:blank between tests -context('cross-origin snapshot window', { experimentalSessionSupport: true }, () => { - let logs: Map - - beforeEach(() => { - logs = new Map() - - cy.on('log:changed', (attrs, log) => { - logs.set(attrs.id, log) - }) - - cy.visit('/fixtures/multi-domain.html') - cy.get('a[data-cy="dom-link"]').click() - }) - - it('.window()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('window', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('window') - expect(consoleProps.Yielded).to.be.null - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.window() - }) - }) - - it('.document()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('document', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('document') - expect(consoleProps.Yielded).to.be.null - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.document() - }) - }) - - it('.title()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('title', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('title') - expect(consoleProps.Yielded).to.equal('DOM Fixture') - - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.title() - }) - }) -}) From 5c0588a00f98865933cbb9fa911bf1e71738a544 Mon Sep 17 00:00:00 2001 From: Bill Glesias Date: Thu, 14 Apr 2022 13:48:44 -0400 Subject: [PATCH 32/54] change removeSrcAttributeFromAUTIframe name to removeSrcAttribute as it is implied on the AUT --- packages/runner-ct/src/iframe/iframes.tsx | 2 +- packages/runner-shared/src/iframe/aut-iframe.js | 4 ++-- packages/runner/src/iframe/iframes.jsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/runner-ct/src/iframe/iframes.tsx b/packages/runner-ct/src/iframe/iframes.tsx index ba5652d06e99..2658c9a269b3 100644 --- a/packages/runner-ct/src/iframe/iframes.tsx +++ b/packages/runner-ct/src/iframe/iframes.tsx @@ -134,7 +134,7 @@ export const Iframes = namedObserver('Iframes', ({ highlightEl: autIframe.current.highlightEl, detachDom: autIframe.current.detachDom, isAUTSameOrigin: autIframe.current.doesAUTMatchTopOriginPolicy, - removeSrc: autIframe.current.removeSrcAttributeFromAUTIframe, + removeSrc: autIframe.current.removeSrcAttribute, snapshotControls: (snapshotProps) => ( { + removeSrcAttribute = () => { this.$iframe.removeAttr('src') } @@ -130,7 +130,7 @@ export class AutIframe { }) // The iframe is in a cross origin state. Remove the src attribute to adhere to same origin policy. NOTE: This should only be done ONCE. - this.removeSrcAttributeFromAUTIframe() + this.removeSrcAttribute() return } diff --git a/packages/runner/src/iframe/iframes.jsx b/packages/runner/src/iframe/iframes.jsx index 1a9ab1693d42..f5aea2a75673 100644 --- a/packages/runner/src/iframe/iframes.jsx +++ b/packages/runner/src/iframe/iframes.jsx @@ -110,7 +110,7 @@ export default class Iframes extends Component { highlightEl: this.autIframe.highlightEl, detachDom: this.autIframe.detachDom, isAUTSameOrigin: this.autIframe.doesAUTMatchTopOriginPolicy, - removeSrc: this.autIframe.removeSrcAttributeFromAUTIframe, + removeSrc: this.autIframe.removeSrcAttribute, snapshotControls: (snapshotProps) => ( Date: Thu, 14 Apr 2022 13:52:01 -0400 Subject: [PATCH 33/54] update log consoleProps comment to better reflect cross origin nature --- packages/driver/src/cypress/log.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/driver/src/cypress/log.ts b/packages/driver/src/cypress/log.ts index a9cbdd657a15..5ca4dad82060 100644 --- a/packages/driver/src/cypress/log.ts +++ b/packages/driver/src/cypress/log.ts @@ -505,7 +505,7 @@ class Log { consoleObj[key] = _this.get('name') - // in the case a log is being recreated from the specbridge to the primary, consoleProps may be an Object + // in the case a log is being recreated from the cross-origin spec bridge to the primary, consoleProps may be an Object const consoleObjDefaults = _.isFunction(consoleProps) ? consoleProps.apply(this, args) : consoleProps // merge in the other properties from consoleProps From 9734059077f187f410d9163a8922c5359fef4024 Mon Sep 17 00:00:00 2001 From: Bill Glesias Date: Thu, 14 Apr 2022 13:55:30 -0400 Subject: [PATCH 34/54] remove skipped consoleProps tests that do not have a command log to test against --- .../commands/multi_domain_connectors.spec.ts | 9 --------- .../e2e/multi-domain/commands/multi_domain_files.spec.ts | 3 --- .../e2e/multi-domain/commands/multi_domain_misc.spec.ts | 3 --- 3 files changed, 15 deletions(-) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts index a290bdbaa912..986f8e443b7a 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts @@ -57,9 +57,6 @@ context('cy.origin connectors', () => { }) }) - // NOTE: there is no command log for .each() - it.skip('.each()', () => undefined) - it('.its()', (done) => { cy.on('command:queue:end', () => { setTimeout(() => { @@ -118,11 +115,5 @@ context('cy.origin connectors', () => { cy.get('#button').invoke('text') }) }) - - // NOTE: there is no command log for .spread() - it.skip('.spread()', () => undefined) - - // NOTE: there is no command log for .then() - it.skip('.then()', () => undefined) }) }) 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 index 17e22c99b545..5b6a0a8a726c 100644 --- 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 @@ -58,9 +58,6 @@ context('cy.origin files', () => { }) }) - // NOTE: there is no command log for .fixture(). shows up as a (new url) - it.skip('.fixture()', () => undefined) - it('.readFile()', (done) => { cy.on('command:queue:end', () => { setTimeout(() => { diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts index 38144c81848b..f0fddc23a771 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts @@ -70,9 +70,6 @@ context('cy.origin misc', () => { }) }) - // NOTE: there is no log for .end() - it.skip('.end()', () => undefined) - it('.exec()', (done) => { cy.on('command:queue:end', () => { setTimeout(() => { From 9ef3f56fd6bce69a56d98ae42e981b352ff52a3e Mon Sep 17 00:00:00 2001 From: Bill Glesias Date: Thu, 14 Apr 2022 14:06:14 -0400 Subject: [PATCH 35/54] add createSnapshot to internal types (might need more specifics on this) --- packages/driver/types/internal-types.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/driver/types/internal-types.d.ts b/packages/driver/types/internal-types.d.ts index 6f4697214b9d..e8dd686da9e0 100644 --- a/packages/driver/types/internal-types.d.ts +++ b/packages/driver/types/internal-types.d.ts @@ -45,6 +45,7 @@ declare namespace Cypress { isAnticipatingCrossOriginResponseFor: IStability['isAnticipatingCrossOriginResponseFor'] fail: (err: Error, options:{ async?: boolean }) => Error getRemoteLocation: ILocation['getRemoteLocation'] + createSnapshot: ISnapshots['createSnapshot'] } interface Cypress { From 912162c98fe379b935be8189bf1825ae1ec01800 Mon Sep 17 00:00:00 2001 From: Bill Glesias Date: Thu, 14 Apr 2022 15:29:48 -0400 Subject: [PATCH 36/54] refactor multi-domain consoleProp tests to use shouldWithTimeout custom command to avoid setTimeouts on command queue event to make test implementation cleaner --- .../commands/multi_domain_actions.spec.ts | 749 ++++++++---------- .../commands/multi_domain_aliasing.spec.ts | 41 +- .../commands/multi_domain_assertions.spec.ts | 40 +- .../commands/multi_domain_connectors.spec.ts | 72 +- .../commands/multi_domain_cookies.spec.ts | 192 ++--- .../commands/multi_domain_files.spec.ts | 46 +- .../multi_domain_local_storage.spec.ts | 22 +- .../commands/multi_domain_location.spec.ts | 88 +- .../commands/multi_domain_misc.spec.ts | 146 ++-- .../commands/multi_domain_navigation.spec.ts | 76 +- .../multi_domain_network_requests.spec.ts | 40 +- .../commands/multi_domain_querying.spec.ts | 70 +- .../multi_domain_querying_shadow.spec.ts | 28 +- .../commands/multi_domain_screenshot.spec.ts | 53 +- .../multi_domain_spies_stubs_clocks.spec.ts | 98 +-- .../commands/multi_domain_traversal.spec.ts | 614 +++++++------- .../commands/multi_domain_viewport.spec.ts | 24 +- .../commands/multi_domain_waiting.spec.ts | 22 +- .../commands/multi_domain_window.spec.ts | 58 +- packages/driver/cypress/support/utils.js | 6 + packages/driver/types/internal-types.d.ts | 2 + 21 files changed, 1102 insertions(+), 1385 deletions(-) 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 index fa22a68e7a5e..9c86c68210d8 100644 --- 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 @@ -200,526 +200,463 @@ context('cy.origin actions', () => { }) }) - it('.get()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = 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(crossOriginLog).to.be.true - - 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') - done() - }, 250) - }) - + it('.get()', () => { cy.get('a[data-cy="dom-link"]').click() cy.origin('http://foobar.com:3500', () => { cy.get('#button') }) - }) - it('.alias()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { alias, aliasType, consoleProps, $el, crossOriginLog } = findCrossOriginLogs('get', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { consoleProps, $el, crossOriginLog } = 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(crossOriginLog).to.be.true + // make sure $el is in fact a jquery instance to keep the logs happy + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true - 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') + 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') - done() - }, 250) + // 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') }) + }) + it('.alias()', () => { cy.get('a[data-cy="dom-link"]').click() cy.origin('http://foobar.com:3500', () => { cy.get('#button').as('buttonAlias') }) - }) - - it('.click()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { alias, aliasType, consoleProps, $el, crossOriginLog } = findCrossOriginLogs('click', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - expect(alias).to.equal(undefined) - expect(aliasType).to.equal(undefined) - expect(consoleProps.Command).to.equal('click') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Coords).to.have.property('x').that.is.a('number') - expect(consoleProps.Coords).to.have.property('y').that.is.a('number') + cy.shouldWithTimeout(() => { + const { alias, aliasType, consoleProps, $el, crossOriginLog } = findCrossOriginLogs('get', logs, 'foobar.com') - expect(consoleProps.Selector).to.be.undefined - expect(consoleProps.Yielded).to.be.undefined - expect(consoleProps.Options).to.be.undefined + // make sure $el is in fact a jquery instance to keep the logs happy + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') - // TODO: test class list serialization - // expect(consoleProps['Applied To']).to.have.property('classList').that.contains(['my-custom-button-css', 'class2', '@class3']) - expect(consoleProps['Applied To'].getAttribute('id')).to.contain('button-inside-a') - expect(consoleProps['Applied To'].innerHTML).to.contain('click button') + 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') - expect(consoleProps.table[1]).to.be.a('function') - - const tableContents = consoleProps.table[1]() - - expect(tableContents.name).to.equal('Mouse Events') - // can't exactly assert that is an Array because it is a Proxy object to an array - expect(tableContents.data).to.be.a('object') - - tableContents.data.forEach((datum) => { - expect(datum).to.have.property('Active Modifiers').that.equals(null) - expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click']) - expect(datum).to.have.property('Prevented Default').that.equals(null) - expect(datum).to.have.property('Stopped Propagation').that.equals(null) - expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) - }) - - done() - }, 250) + // 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') }) + }) + it('.click()', () => { cy.get('a[data-cy="dom-link"]').click() cy.origin('http://foobar.com:3500', () => { cy.get('#button-inside-a').click() }) - }) - it('.dblclick()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('dblclick', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { alias, aliasType, consoleProps, $el, crossOriginLog } = findCrossOriginLogs('click', logs, 'foobar.com') - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('dblclick') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Coords).to.have.property('x').that.is.a('number') - expect(consoleProps.Coords).to.have.property('y').that.is.a('number') + expect(alias).to.equal(undefined) + expect(aliasType).to.equal(undefined) - expect(consoleProps.Selector).to.be.undefined - expect(consoleProps.Yielded).to.be.undefined - expect(consoleProps.Options).to.be.undefined + expect(consoleProps.Command).to.equal('click') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Coords).to.have.property('x').that.is.a('number') + expect(consoleProps.Coords).to.have.property('y').that.is.a('number') - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('BUTTON') - expect(consoleProps['Applied To'].getAttribute('id')).to.contain('button') - expect(consoleProps['Applied To'].innerHTML).to.contain('button') + expect(consoleProps.Selector).to.be.undefined + expect(consoleProps.Yielded).to.be.undefined + expect(consoleProps.Options).to.be.undefined - expect(consoleProps.table[1]).to.be.a('function') + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + // TODO: test class list serialization + // expect(consoleProps['Applied To']).to.have.property('classList').that.contains(['my-custom-button-css', 'class2', '@class3']) + expect(consoleProps['Applied To'].getAttribute('id')).to.contain('button-inside-a') + expect(consoleProps['Applied To'].innerHTML).to.contain('click button') - const tableContents = consoleProps.table[1]() + expect(consoleProps.table[1]).to.be.a('function') - expect(tableContents.name).to.equal('Mouse Events') - // can't exactly assert that is an Array because it is a Proxy object to an array - expect(tableContents.data).to.be.a('object') + const tableContents = consoleProps.table[1]() - tableContents.data.forEach((datum) => { - expect(datum).to.have.property('Active Modifiers').that.equals(null) - expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'dblclick']) - expect(datum).to.have.property('Prevented Default').that.equals(null) - expect(datum).to.have.property('Stopped Propagation').that.equals(null) - expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) - }) + expect(tableContents.name).to.equal('Mouse Events') + // can't exactly assert that is an Array because it is a Proxy object to an array + expect(tableContents.data).to.be.a('object') - done() - }, 250) + tableContents.data.forEach((datum) => { + expect(datum).to.have.property('Active Modifiers').that.equals(null) + expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click']) + expect(datum).to.have.property('Prevented Default').that.equals(null) + expect(datum).to.have.property('Stopped Propagation').that.equals(null) + expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) + }) }) + }) + it('.dblclick()', () => { cy.get('a[data-cy="dom-link"]').click() cy.origin('http://foobar.com:3500', () => { cy.get('#button').dblclick() }) - }) - it('.rightclick()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('rightclick', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('dblclick', logs, 'foobar.com') - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('rightclick') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Coords).to.have.property('x').that.is.a('number') - expect(consoleProps.Coords).to.have.property('y').that.is.a('number') + expect(consoleProps.Command).to.equal('dblclick') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Coords).to.have.property('x').that.is.a('number') + expect(consoleProps.Coords).to.have.property('y').that.is.a('number') - expect(consoleProps.Selector).to.be.undefined - expect(consoleProps.Yielded).to.be.undefined - expect(consoleProps.Options).to.be.undefined + expect(consoleProps.Selector).to.be.undefined + expect(consoleProps.Yielded).to.be.undefined + expect(consoleProps.Options).to.be.undefined - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('BUTTON') - expect(consoleProps['Applied To'].getAttribute('id')).to.contain('button') - expect(consoleProps['Applied To'].innerHTML).to.contain('button') + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('BUTTON') + expect(consoleProps['Applied To'].getAttribute('id')).to.contain('button') + expect(consoleProps['Applied To'].innerHTML).to.contain('button') - expect(consoleProps.table[1]).to.be.a('function') + expect(consoleProps.table[1]).to.be.a('function') - const tableContents = consoleProps.table[1]() + const tableContents = consoleProps.table[1]() - expect(tableContents.name).to.equal('Mouse Events') - // can't exactly assert that is an Array because it is a Proxy object to an array - expect(tableContents.data).to.be.a('object') + expect(tableContents.name).to.equal('Mouse Events') + // can't exactly assert that is an Array because it is a Proxy object to an array + expect(tableContents.data).to.be.a('object') - tableContents.data.forEach((datum) => { - expect(datum).to.have.property('Active Modifiers').that.equals(null) - expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'contextmenu']) - expect(datum).to.have.property('Prevented Default').that.equals(null) - expect(datum).to.have.property('Stopped Propagation').that.equals(null) - expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) - }) - - done() - }, 250) + tableContents.data.forEach((datum) => { + expect(datum).to.have.property('Active Modifiers').that.equals(null) + expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'dblclick']) + expect(datum).to.have.property('Prevented Default').that.equals(null) + expect(datum).to.have.property('Stopped Propagation').that.equals(null) + expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) + }) }) + }) + it('.rightclick()', () => { cy.get('a[data-cy="dom-link"]').click() cy.origin('http://foobar.com:3500', () => { cy.get('#button').rightclick() }) - }) - it('.type()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { alias, aliasType, consoleProps, $el, crossOriginLog } = findCrossOriginLogs('type', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('rightclick', logs, 'foobar.com') - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true - expect(alias).to.equal(undefined) - expect(aliasType).to.equal(undefined) + expect(consoleProps.Command).to.equal('rightclick') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Coords).to.have.property('x').that.is.a('number') + expect(consoleProps.Coords).to.have.property('y').that.is.a('number') - expect(consoleProps.Command).to.equal('type') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Coords).to.have.property('x').that.is.a('number') - expect(consoleProps.Coords).to.have.property('y').that.is.a('number') + expect(consoleProps.Selector).to.be.undefined + expect(consoleProps.Yielded).to.be.undefined + expect(consoleProps.Options).to.be.undefined - expect(consoleProps.Typed).to.equal('foo') - expect(consoleProps.Options).to.be.undefined + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('BUTTON') + expect(consoleProps['Applied To'].getAttribute('id')).to.contain('button') + expect(consoleProps['Applied To'].innerHTML).to.contain('button') - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'].getAttribute('id')).to.equal('input') - expect(consoleProps['Applied To'].innerHTML).to.equals('') - expect(consoleProps['Applied To'].type).to.equal('text') + expect(consoleProps.table[1]).to.be.a('function') - expect(consoleProps.table[1]).to.be.a('function') - expect(consoleProps.table[2]).to.be.a('function') + const tableContents = consoleProps.table[1]() - const mouseEventsTable = consoleProps.table[1]() - const KeyboardEventsTable = consoleProps.table[2]() + expect(tableContents.name).to.equal('Mouse Events') + // can't exactly assert that is an Array because it is a Proxy object to an array + expect(tableContents.data).to.be.a('object') - expect(mouseEventsTable.name).to.equal('Mouse Events') - expect(KeyboardEventsTable.name).to.equal('Keyboard Events') - // can't exactly assert that is an Array because it is a Proxy object to an array - expect(mouseEventsTable.data).to.be.a('object') - expect(KeyboardEventsTable.data).to.be.a('object') + tableContents.data.forEach((datum) => { + expect(datum).to.have.property('Active Modifiers').that.equals(null) + expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'contextmenu']) + expect(datum).to.have.property('Prevented Default').that.equals(null) + expect(datum).to.have.property('Stopped Propagation').that.equals(null) + expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) + }) + }) + }) - _.forEach(mouseEventsTable.data, (datum) => { - expect(datum).to.have.property('Active Modifiers').that.equals(null) - expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click']) - expect(datum).to.have.property('Prevented Default').that.equals(null) - expect(datum).to.have.property('Stopped Propagation').that.equals(null) - expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) - }) + it('.type()', () => { + cy.get('a[data-cy="dom-link"]').click() + cy.origin('http://foobar.com:3500', () => { + cy.get('input#input').type('foo') + }) - _.forEach(KeyboardEventsTable.data, (datum) => { - expect(datum).to.have.property('Active Modifiers').that.equals(null) - expect(datum).to.have.property('Events Fired').that.equals('keydown, keypress, beforeinput, textInput, input, keyup') - expect(datum).to.have.property('Prevented Default').that.equals(null) - expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) - }) + cy.shouldWithTimeout(() => { + const { alias, aliasType, consoleProps, $el, crossOriginLog } = findCrossOriginLogs('type', logs, 'foobar.com') - expect(KeyboardEventsTable.data[1]).to.have.property('Details').that.equals('{ code: KeyF, which: 70 }') - expect(KeyboardEventsTable.data[1]).to.have.property('Typed').that.equals('f') + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true - expect(KeyboardEventsTable.data[2]).to.have.property('Details').that.equals('{ code: KeyO, which: 79 }') - expect(KeyboardEventsTable.data[2]).to.have.property('Typed').that.equals('o') + expect(alias).to.equal(undefined) + expect(aliasType).to.equal(undefined) - expect(KeyboardEventsTable.data[3]).to.have.property('Details').that.equals('{ code: KeyO, which: 79 }') - expect(KeyboardEventsTable.data[3]).to.have.property('Typed').that.equals('o') + expect(consoleProps.Command).to.equal('type') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Coords).to.have.property('x').that.is.a('number') + expect(consoleProps.Coords).to.have.property('y').that.is.a('number') - done() - }, 250) - }) + expect(consoleProps.Typed).to.equal('foo') + expect(consoleProps.Options).to.be.undefined - cy.get('a[data-cy="dom-link"]').click() - cy.origin('http://foobar.com:3500', () => { - cy.get('input#input').type('foo') - }) - }) + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'].getAttribute('id')).to.equal('input') + expect(consoleProps['Applied To'].innerHTML).to.equals('') + expect(consoleProps['Applied To'].type).to.equal('text') - it('.submit()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('submit', logs, 'foobar.com') + expect(consoleProps.table[1]).to.be.a('function') + expect(consoleProps.table[2]).to.be.a('function') - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true + const mouseEventsTable = consoleProps.table[1]() + const KeyboardEventsTable = consoleProps.table[2]() - expect(consoleProps.Command).to.equal('submit') - expect(consoleProps.Elements).to.equal(1) + expect(mouseEventsTable.name).to.equal('Mouse Events') + expect(KeyboardEventsTable.name).to.equal('Keyboard Events') + // can't exactly assert that is an Array because it is a Proxy object to an array + expect(mouseEventsTable.data).to.be.a('object') + expect(KeyboardEventsTable.data).to.be.a('object') - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') - expect(consoleProps['Applied To'].getAttribute('id')).to.equal('multiple-inputs-and-input-submit') - expect(consoleProps['Applied To'].querySelector('input[name="fname"]')).to.be.ok - expect(consoleProps['Applied To'].querySelector('input[name="lname"]')).to.be.ok - expect(consoleProps['Applied To'].querySelector('input[type="submit"]')).to.be.ok + _.forEach(mouseEventsTable.data, (datum) => { + expect(datum).to.have.property('Active Modifiers').that.equals(null) + expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click']) + expect(datum).to.have.property('Prevented Default').that.equals(null) + expect(datum).to.have.property('Stopped Propagation').that.equals(null) + expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) + }) - // make sure input values are passed along into the serialized snapshot/element - expect(consoleProps['Applied To'].querySelector('input[name="fname"]').value).to.equal('foo') - expect(consoleProps['Applied To'].querySelector('input[name="lname"]').value).to.equal('bar') - expect(consoleProps['Applied To'].querySelector('input[type="submit"]').value).to.equal('submit me') - done() - }, 250) + _.forEach(KeyboardEventsTable.data, (datum) => { + expect(datum).to.have.property('Active Modifiers').that.equals(null) + expect(datum).to.have.property('Events Fired').that.equals('keydown, keypress, beforeinput, textInput, input, keyup') + expect(datum).to.have.property('Prevented Default').that.equals(null) + expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) + }) + + expect(KeyboardEventsTable.data[1]).to.have.property('Details').that.equals('{ code: KeyF, which: 70 }') + expect(KeyboardEventsTable.data[1]).to.have.property('Typed').that.equals('f') + + expect(KeyboardEventsTable.data[2]).to.have.property('Details').that.equals('{ code: KeyO, which: 79 }') + expect(KeyboardEventsTable.data[2]).to.have.property('Typed').that.equals('o') + + expect(KeyboardEventsTable.data[3]).to.have.property('Details').that.equals('{ code: KeyO, which: 79 }') + expect(KeyboardEventsTable.data[3]).to.have.property('Typed').that.equals('o') }) + }) + it('.submit()', () => { cy.get('a[data-cy="dom-link"]').click() cy.origin('http://foobar.com:3500', () => { cy.get('form#multiple-inputs-and-input-submit input[name="fname"]').type('foo') cy.get('form#multiple-inputs-and-input-submit input[name="lname"]').type('bar') cy.get('form#multiple-inputs-and-input-submit').submit() }) - }) - it('.focus()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('focus', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('submit', logs, 'foobar.com') - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('focus') - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'].getAttribute('id')).to.equal('input') - done() - }, 250) + expect(consoleProps.Command).to.equal('submit') + expect(consoleProps.Elements).to.equal(1) + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To'].getAttribute('id')).to.equal('multiple-inputs-and-input-submit') + expect(consoleProps['Applied To'].querySelector('input[name="fname"]')).to.be.ok + expect(consoleProps['Applied To'].querySelector('input[name="lname"]')).to.be.ok + expect(consoleProps['Applied To'].querySelector('input[type="submit"]')).to.be.ok + + // make sure input values are passed along into the serialized snapshot/element + expect(consoleProps['Applied To'].querySelector('input[name="fname"]').value).to.equal('foo') + expect(consoleProps['Applied To'].querySelector('input[name="lname"]').value).to.equal('bar') + expect(consoleProps['Applied To'].querySelector('input[type="submit"]').value).to.equal('submit me') }) + }) + it('.focus()', () => { cy.get('a[data-cy="dom-link"]').click() cy.origin('http://foobar.com:3500', () => { - // FIXME: snapshot shows the primary domain. Should be secondary cy.get('#input').focus() }) - }) - it('.blur()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('blur', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('focus', logs, 'foobar.com') - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('blur') - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'].getAttribute('id')).to.equal('input') - done() - }, 250) + expect(consoleProps.Command).to.equal('focus') + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'].getAttribute('id')).to.equal('input') }) + }) + it('.blur()', () => { cy.get('a[data-cy="dom-link"]').click() cy.origin('http://foobar.com:3500', () => { // FIXME: snapshot shows the primary domain (before type). Should be secondary cy.get('#input').type('foo').blur() }) - }) - it('.clear()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('clear', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('blur', logs, 'foobar.com') - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('clear') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Options).to.be.undefined - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'].getAttribute('id')).to.equal('input') - done() - }, 250) + expect(consoleProps.Command).to.equal('blur') + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'].getAttribute('id')).to.equal('input') }) + }) + it('.clear()', () => { cy.get('a[data-cy="dom-link"]').click() cy.origin('http://foobar.com:3500', () => { // FIXME: snapshot shows the primary domain. Should be secondary cy.get('#input').type('foo').clear() }) - }) - - it('.check()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('check', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('check') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Coords).to.have.property('x').that.is.a('number') - expect(consoleProps.Coords).to.have.property('y').that.is.a('number') + cy.shouldWithTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('clear', logs, 'foobar.com') - expect(consoleProps.Options).to.be.undefined + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - - expect(consoleProps.table[1]).to.be.a('function') - - const tableContents = consoleProps.table[1]() - - expect(tableContents.name).to.equal('Mouse Events') - // can't exactly assert that is an Array because it is a Proxy object to an array - expect(tableContents.data).to.be.a('object') - - tableContents.data.forEach((datum) => { - expect(datum).to.have.property('Active Modifiers').that.equals(null) - expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'contextmenu']) - expect(datum).to.have.property('Prevented Default').that.equals(null) - expect(datum).to.have.property('Stopped Propagation').that.equals(null) - expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) - }) - - done() - }, 250) + expect(consoleProps.Command).to.equal('clear') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Options).to.be.undefined + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'].getAttribute('id')).to.equal('input') }) + }) + it('.check()', () => { cy.get('a[data-cy="dom-link"]').click() cy.origin('http://foobar.com:3500', () => { cy.get(':checkbox[name="colors"][value="blue"]').check() }) - }) - - it('.uncheck()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('uncheck', logs, 'foobar.com') - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true + cy.shouldWithTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('check', logs, 'foobar.com') - expect(consoleProps.Command).to.equal('uncheck') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Coords).to.have.property('x').that.is.a('number') - expect(consoleProps.Coords).to.have.property('y').that.is.a('number') + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true - expect(consoleProps.Options).to.be.undefined + expect(consoleProps.Command).to.equal('check') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Coords).to.have.property('x').that.is.a('number') + expect(consoleProps.Coords).to.have.property('y').that.is.a('number') - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Options).to.be.undefined - expect(consoleProps.table[1]).to.be.a('function') + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - const tableContents = consoleProps.table[1]() + expect(consoleProps.table[1]).to.be.a('function') - expect(tableContents.name).to.equal('Mouse Events') - // can't exactly assert that is an Array because it is a Proxy object to an array - expect(tableContents.data).to.be.a('object') + const tableContents = consoleProps.table[1]() - tableContents.data.forEach((datum) => { - expect(datum).to.have.property('Active Modifiers').that.equals(null) - expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'contextmenu']) - expect(datum).to.have.property('Prevented Default').that.equals(null) - expect(datum).to.have.property('Stopped Propagation').that.equals(null) - expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) - }) + expect(tableContents.name).to.equal('Mouse Events') + // can't exactly assert that is an Array because it is a Proxy object to an array + expect(tableContents.data).to.be.a('object') - done() - }, 250) + tableContents.data.forEach((datum) => { + expect(datum).to.have.property('Active Modifiers').that.equals(null) + expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'contextmenu']) + expect(datum).to.have.property('Prevented Default').that.equals(null) + expect(datum).to.have.property('Stopped Propagation').that.equals(null) + expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) + }) }) + }) + it('.uncheck()', () => { cy.get('a[data-cy="dom-link"]').click() cy.origin('http://foobar.com:3500', () => { cy.get(':checkbox[name="colors"][value="blue"]') .check().uncheck() }) - }) - it('.select()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('select', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('uncheck', logs, 'foobar.com') - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('select') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Coords).to.have.property('x').that.is.a('number') - expect(consoleProps.Coords).to.have.property('y').that.is.a('number') + expect(consoleProps.Command).to.equal('uncheck') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Coords).to.have.property('x').that.is.a('number') + expect(consoleProps.Coords).to.have.property('y').that.is.a('number') - expect(consoleProps.Options).to.be.undefined - expect(consoleProps.Selected[0]).to.equal('Japanese') + expect(consoleProps.Options).to.be.undefined - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('SELECT') + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.table[1]).to.be.a('function') + expect(consoleProps.table[1]).to.be.a('function') - const tableContents = consoleProps.table[1]() + const tableContents = consoleProps.table[1]() - expect(tableContents.name).to.equal('Mouse Events') - // can't exactly assert that is an Array because it is a Proxy object to an array - expect(tableContents.data).to.be.a('object') + expect(tableContents.name).to.equal('Mouse Events') + // can't exactly assert that is an Array because it is a Proxy object to an array + expect(tableContents.data).to.be.a('object') - tableContents.data.forEach((datum) => { - expect(datum).to.have.property('Active Modifiers').that.equals(null) - expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'contextmenu']) - expect(datum).to.have.property('Prevented Default').that.equals(null) - expect(datum).to.have.property('Stopped Propagation').that.equals(null) - expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) - }) - - done() - }, 250) + tableContents.data.forEach((datum) => { + expect(datum).to.have.property('Active Modifiers').that.equals(null) + expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'contextmenu']) + expect(datum).to.have.property('Prevented Default').that.equals(null) + expect(datum).to.have.property('Stopped Propagation').that.equals(null) + expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) + }) }) + }) + it('.select()', () => { cy.get('a[data-cy="dom-link"]').click() cy.origin('http://foobar.com:3500', () => { // TODO: wrong selected value is displayed in the snapshot after cy.get('select[name="foods"]').select('Japanese') }) - }) - it('.scrollIntoView()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('scrollIntoView', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('select', logs, 'foobar.com') + + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('select') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Coords).to.have.property('x').that.is.a('number') + expect(consoleProps.Coords).to.have.property('y').that.is.a('number') - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true + expect(consoleProps.Options).to.be.undefined + expect(consoleProps.Selected[0]).to.equal('Japanese') - expect(consoleProps.Command).to.equal('scrollIntoView') + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('SELECT') - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('H5') - expect(consoleProps['Scrolled Element']).to.have.property('tagName').that.equals('H5') + expect(consoleProps.table[1]).to.be.a('function') - done() - }, 250) + const tableContents = consoleProps.table[1]() + + expect(tableContents.name).to.equal('Mouse Events') + // can't exactly assert that is an Array because it is a Proxy object to an array + expect(tableContents.data).to.be.a('object') + + tableContents.data.forEach((datum) => { + expect(datum).to.have.property('Active Modifiers').that.equals(null) + expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'contextmenu']) + expect(datum).to.have.property('Prevented Default').that.equals(null) + expect(datum).to.have.property('Stopped Propagation').that.equals(null) + expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To']) + }) }) + }) + it('.scrollIntoView()', () => { cy.get('a[data-cy="scrolling-link"]').click() cy.origin('http://foobar.com:3500', () => { // FIXME: snapshot of primary is showing for scrollIntoView @@ -727,85 +664,85 @@ context('cy.origin actions', () => { .should('not.be.visible') .scrollIntoView() }) - }) - it('.scrollTo()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('scrollTo', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('scrollIntoView', logs, 'foobar.com') - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('scrollTo') - expect(consoleProps.X).to.equal(0) - expect(consoleProps.Y).to.equal(300) - expect(consoleProps['Scrolled Element']).to.have.property('tagName').that.equals('DIV') + expect(consoleProps.Command).to.equal('scrollIntoView') - done() - }, 250) + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('H5') + expect(consoleProps['Scrolled Element']).to.have.property('tagName').that.equals('H5') }) + }) + it('.scrollTo()', () => { cy.get('a[data-cy="scrolling-link"]').click() cy.origin('http://foobar.com:3500', () => { cy.get('#scroll-into-view-vertical h5').should('not.be.visible') cy.get('#scroll-into-view-vertical').scrollTo(0, 300) }) - }) - - it('.trigger()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('trigger', logs, 'foobar.com') - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true + cy.shouldWithTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('scrollTo', logs, 'foobar.com') - expect(consoleProps.Command).to.equal('trigger') - expect(consoleProps['Event options']).to.have.property('bubbles').that.is.a('boolean') - expect(consoleProps['Event options']).to.have.property('cancelable').that.is.a('boolean') - expect(consoleProps['Event options']).to.have.property('clientX').that.is.a('number') - expect(consoleProps['Event options']).to.have.property('clientY').that.is.a('number') - expect(consoleProps['Event options']).to.have.property('pageX').that.is.a('number') - expect(consoleProps['Event options']).to.have.property('pageY').that.is.a('number') - expect(consoleProps['Event options']).to.have.property('screenX').that.is.a('number') - expect(consoleProps['Event options']).to.have.property('screenY').that.is.a('number') - expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('BUTTON') + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true - done() - }, 250) + expect(consoleProps.Command).to.equal('scrollTo') + expect(consoleProps.X).to.equal(0) + expect(consoleProps.Y).to.equal(300) + expect(consoleProps['Scrolled Element']).to.have.property('tagName').that.equals('DIV') }) + }) + it('.trigger()', () => { cy.get('a[data-cy="dom-link"]').click() cy.origin('http://foobar.com:3500', () => { cy.get('#button').trigger('click') }) - }) - - it('.selectFile()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('selectFile', logs, 'foobar.com') - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true + cy.shouldWithTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('trigger', logs, 'foobar.com') - expect(consoleProps.Command).to.equal('selectFile') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Target).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Target).to.have.property('id').that.equals('basic') + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true - done() - }, 250) + expect(consoleProps.Command).to.equal('trigger') + expect(consoleProps['Event options']).to.have.property('bubbles').that.is.a('boolean') + expect(consoleProps['Event options']).to.have.property('cancelable').that.is.a('boolean') + expect(consoleProps['Event options']).to.have.property('clientX').that.is.a('number') + expect(consoleProps['Event options']).to.have.property('clientY').that.is.a('number') + expect(consoleProps['Event options']).to.have.property('pageX').that.is.a('number') + expect(consoleProps['Event options']).to.have.property('pageY').that.is.a('number') + expect(consoleProps['Event options']).to.have.property('screenX').that.is.a('number') + expect(consoleProps['Event options']).to.have.property('screenY').that.is.a('number') + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('BUTTON') }) + }) + it('.selectFile()', () => { cy.get('a[data-cy="files-form-link"]').click() cy.origin('http://foobar.com:3500', () => { cy.get('#basic').selectFile({ contents: Cypress.Buffer.from('foo'), fileName: 'foo.txt' }) }) + + cy.shouldWithTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('selectFile', logs, 'foobar.com') + + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('selectFile') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Target).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Target).to.have.property('id').that.equals('basic') + }) }) }) }) 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 index 94695e5e65b5..057bc0b44c9d 100644 --- 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 @@ -24,31 +24,28 @@ context('cy.origin aliasing', () => { }) }) - it('.as()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { alias, aliasType, consoleProps, $el, crossOriginLog } = 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(crossOriginLog).to.be.true - - 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') - done() - }, 250) - }) - + it('.as()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#button').as('buttonAlias') }) + + cy.shouldWithTimeout(() => { + const { alias, aliasType, consoleProps, $el, crossOriginLog } = 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(crossOriginLog).to.be.true + + 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/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_assertions.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_assertions.spec.ts index d364686410b5..3bb50159926e 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_assertions.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_assertions.spec.ts @@ -24,32 +24,28 @@ context('cy.origin assertions', () => { }) }) - it('.should() and .and()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const assertionLogs = findCrossOriginLogs('assert', logs, 'foobar.com') - - expect(assertionLogs[0].consoleProps.Message).to.equal('expected not to be checked') - expect(assertionLogs[1].consoleProps.Message).to.equal('expected not to be disabled') - - assertionLogs.forEach(({ $el, crossOriginLog, consoleProps }) => { - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - - 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') - }) - - done() - }, 250) - }) - + 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(() => { + const assertionLogs = findCrossOriginLogs('assert', logs, 'foobar.com') + + expect(assertionLogs[0].consoleProps.Message).to.equal('expected not to be checked') + expect(assertionLogs[1].consoleProps.Message).to.equal('expected not to be disabled') + + assertionLogs.forEach(({ $el, crossOriginLog, consoleProps }) => { + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true + + 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/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts index 986f8e443b7a..710e710bc124 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts @@ -57,62 +57,52 @@ context('cy.origin connectors', () => { }) }) - it('.its()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('its', logs, 'foobar.com') + it('.its()', () => { + cy.origin('http://foobar.com:3500', () => { + cy.get('#by-id>input').its('length') + }) - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true + cy.shouldWithTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('its', logs, 'foobar.com') - expect(consoleProps.Command).to.equal('its') - expect(consoleProps.Property).to.equal('.length') - expect(consoleProps.Yielded).to.equal(3) + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true - expect(consoleProps.Subject.length).to.equal(3) + expect(consoleProps.Command).to.equal('its') + expect(consoleProps.Property).to.equal('.length') + expect(consoleProps.Yielded).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.length).to.equal(3) - expect(consoleProps.Subject[1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Subject[1]).to.have.property('id').that.equals('name') + // 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[2]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Subject[2]).to.have.property('id').that.equals('age') + expect(consoleProps.Subject[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Subject[1]).to.have.property('id').that.equals('name') - done() - }, 250) + 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', () => { - // FIXME: snapshot of primary is showing for its - cy.get('#by-id>input').its('length') + cy.get('#button').invoke('text') }) - }) - - it('.invoke()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('invoke', logs, 'foobar.com') - - expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('invoke') - expect(consoleProps.Function).to.equal('.text()') - expect(consoleProps.Yielded).to.equal('button') + cy.shouldWithTimeout(() => { + const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('invoke', logs, 'foobar.com') - expect(consoleProps.Subject).to.have.property('tagName').that.equals('BUTTON') - expect(consoleProps.Subject).to.have.property('id').that.equals('button') + expect($el.jquery).to.be.ok + expect(crossOriginLog).to.be.true - done() - }, 250) - }) + expect(consoleProps.Command).to.equal('invoke') + expect(consoleProps.Function).to.equal('.text()') + expect(consoleProps.Yielded).to.equal('button') - cy.origin('http://foobar.com:3500', () => { - // FIXME: snapshot of primary is showing for its - cy.get('#button').invoke('text') + 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 index 04a5c483e6ab..f551556829a8 100644 --- 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 @@ -49,152 +49,107 @@ context('cy.origin cookies', () => { }) }) - it('.getCookie()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('getCookie', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - 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') - - done() - }, 250) - }) - + it('.getCookie()', () => { cy.origin('http://foobar.com:3500', () => { cy.getCookies().should('be.empty') cy.setCookie('foo', 'bar') cy.getCookie('foo') }) - }) - - it('.getCookies()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - // get the last 'getCookies' command, which is the one we care about for this test - const allGetCookieLogs = findCrossOriginLogs('getCookies', logs, 'foobar.com') - const { crossOriginLog, consoleProps } = allGetCookieLogs.pop() as any + cy.shouldWithTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('getCookie', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + expect(crossOriginLog).to.be.true - 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') - - done() - }, 250) + 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() }) - }) - it('.setCookie()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('setCookie', logs, 'foobar.com') + 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 { crossOriginLog, consoleProps } = allGetCookieLogs.pop() as any - expect(crossOriginLog).to.be.true + expect(crossOriginLog).to.be.true - 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') + expect(consoleProps.Command).to.equal('getCookies') + expect(consoleProps['Num Cookies']).to.equal(1) - done() - }, 250) + // 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') }) - }) - it('.clearCookie()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('clearCookie', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - 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') - - done() - }, 250) + cy.shouldWithTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('setCookie', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + 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') }) - }) - it('.clearCookies()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('clearCookies', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('clearCookie', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + expect(crossOriginLog).to.be.true - 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') - }) - - done() - }, 250) + 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') @@ -202,6 +157,31 @@ context('cy.origin cookies', () => { cy.getCookies().should('have.length', 2) cy.clearCookies() }) + + cy.shouldWithTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('clearCookies', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + 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 index 5b6a0a8a726c..c3f5660ecdf0 100644 --- 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 @@ -58,41 +58,23 @@ context('cy.origin files', () => { }) }) - it('.readFile()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('readFile', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('readFile') - expect(consoleProps['File Path']).to.include('cypress/fixtures/example.json') - expect(consoleProps.Contents).to.deep.equal({ example: true }) - - done() - }, 250) - }) - + it('.readFile()', () => { cy.origin('http://foobar.com:3500', () => { cy.readFile('cypress/fixtures/example.json') }) - }) - it('.writeFile()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('writeFile', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('readFile', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('writeFile') - expect(consoleProps['File Path']).to.equal('foo.json') - expect(consoleProps.Contents).to.equal('{"foo":"bar"}') - - done() - }, 250) + 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' }) @@ -103,6 +85,16 @@ context('cy.origin files', () => { cy.writeFile('foo.json', contents) }) + + cy.shouldWithTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('writeFile', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('writeFile') + expect(consoleProps['File Path']).to.equal('foo.json') + expect(consoleProps.Contents).to.equal('{"foo":"bar"}') + }) }) }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_local_storage.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_local_storage.spec.ts index 498ea6f9eb7c..b23d4b63b4e5 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_local_storage.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_local_storage.spec.ts @@ -31,19 +31,7 @@ context('cy.origin local storage', () => { }) }) - it('.clearLocalStorage()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('clearLocalStorage', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('clearLocalStorage') - expect(consoleProps.Yielded).to.be.null - - done() - }, 250) - }) - + it('.clearLocalStorage()', () => { cy.origin('http://foobar.com:3500', () => { cy.window().then((win) => { win.localStorage.setItem('foo', 'bar') @@ -52,6 +40,14 @@ context('cy.origin local storage', () => { cy.clearLocalStorage() }) + + cy.shouldWithTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('clearLocalStorage', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('clearLocalStorage') + expect(consoleProps.Yielded).to.be.null + }) }) }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_location.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_location.spec.ts index 7bf6eed6aff6..fff9c176a237 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_location.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_location.spec.ts @@ -38,71 +38,59 @@ context('cy.origin location', () => { }) }) - it('.hash()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('hash', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('hash') - - done() - }, 250) - }) - + it('.hash()', () => { cy.origin('http://foobar.com:3500', () => { cy.hash() }) - }) - it('.location()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('location', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('location') - - expect(consoleProps.Yielded).to.have.property('auth').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('authObj').that.is.undefined - expect(consoleProps.Yielded).to.have.property('hash').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('host').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('hostname').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('href').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('origin').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('originPolicy').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('pathname').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('port').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('protocol').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('search').that.is.a('string') - expect(consoleProps.Yielded).to.have.property('superDomain').that.is.a('string') - - done() - }, 250) + cy.shouldWithTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('hash', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('hash') }) + }) + it('.location()', () => { cy.origin('http://foobar.com:3500', () => { cy.location() }) - }) - it('.url()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('url', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('url') - - expect(consoleProps.Yielded).to.equal('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') - - done() - }, 250) + cy.shouldWithTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('location', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('location') + + expect(consoleProps.Yielded).to.have.property('auth').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('authObj').that.is.undefined + expect(consoleProps.Yielded).to.have.property('hash').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('host').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('hostname').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('href').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('origin').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('originPolicy').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('pathname').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('port').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('protocol').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('search').that.is.a('string') + expect(consoleProps.Yielded).to.have.property('superDomain').that.is.a('string') }) + }) + it('.url()', () => { cy.origin('http://foobar.com:3500', () => { cy.url() }) + + cy.shouldWithTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('url', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('url') + + expect(consoleProps.Yielded).to.equal('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') + }) }) }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts index f0fddc23a771..4b33a02eed58 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts @@ -70,64 +70,42 @@ context('cy.origin misc', () => { }) }) - it('.exec()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('exec', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('exec') - expect(consoleProps['Shell Used']).to.be.undefined - expect(consoleProps.Yielded).to.have.property('code').that.equals(0) - expect(consoleProps.Yielded).to.have.property('stderr').that.equals('') - expect(consoleProps.Yielded).to.have.property('stdout').that.equals('foobar') - - done() - }, 250) - }) - + it('.exec()', () => { cy.origin('http://foobar.com:3500', () => { cy.exec('echo foobar') }) - }) - it('.focused()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('focused', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('exec', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('focused') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('BUTTON') - expect(consoleProps.Yielded).to.have.property('id').that.equals('button') - done() - }, 250) + expect(consoleProps.Command).to.equal('exec') + expect(consoleProps['Shell Used']).to.be.undefined + expect(consoleProps.Yielded).to.have.property('code').that.equals(0) + expect(consoleProps.Yielded).to.have.property('stderr').that.equals('') + expect(consoleProps.Yielded).to.have.property('stdout').that.equals('foobar') }) + }) + it('.focused()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#button').click().focused() }) - }) - - it('.wrap()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('wrap', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('focused', logs, 'foobar.com') - expect(consoleProps.Command).to.equal('wrap') - expect(consoleProps.Yielded[0]).to.equal('foo') - expect(consoleProps.Yielded[1]).to.equal('bar') - expect(consoleProps.Yielded[2]).to.equal('baz') + expect(crossOriginLog).to.be.true - done() - }, 250) + expect(consoleProps.Command).to.equal('focused') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('BUTTON') + expect(consoleProps.Yielded).to.have.property('id').that.equals('button') }) + }) + it('.wrap()', () => { cy.origin('http://foobar.com:3500', () => { const arr = ['foo', 'bar', 'baz'] @@ -137,47 +115,36 @@ context('cy.origin misc', () => { expect(baz).to.equal('baz') }) }) - }) - it('.debug()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('debug', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('wrap', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('debug') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('BUTTON') - expect(consoleProps.Yielded).to.have.property('id').that.equals('button') - done() - }, 250) + expect(consoleProps.Command).to.equal('wrap') + expect(consoleProps.Yielded[0]).to.equal('foo') + expect(consoleProps.Yielded[1]).to.equal('bar') + expect(consoleProps.Yielded[2]).to.equal('baz') }) + }) + it('.debug()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#button').debug() }) - }) - it('.pause()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - if (Cypress.config('isInteractive')) { - // if `isInteractive`, the .pause() will NOT show up in the command log in this case. Essentially a no-op. - done() + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('debug', logs, 'foobar.com') - return - } + expect(crossOriginLog).to.be.true - const { consoleProps, crossOriginLog } = findCrossOriginLogs('pause', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('pause') - expect(consoleProps.Yielded).to.be.undefined - done() - }, 250) + expect(consoleProps.Command).to.equal('debug') + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('BUTTON') + expect(consoleProps.Yielded).to.have.property('id').that.equals('button') }) + }) + it('.pause()', () => { cy.origin('http://foobar.com:3500', () => { const afterPaused = new Promise((resolve) => { cy.once('paused', () => { @@ -192,34 +159,45 @@ context('cy.origin misc', () => { cy.wrap(afterPaused) } }) - }) - it('.task()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('task', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + if (Cypress.config('isInteractive')) { + // if `isInteractive`, the .pause() will NOT show up in the command log in this case. Essentially a no-op. + return + } - expect(crossOriginLog).to.be.true + const { consoleProps, crossOriginLog } = findCrossOriginLogs('pause', logs, 'foobar.com') - expect(consoleProps.Command).to.equal('task') - expect(consoleProps.Yielded).to.equal('works') - expect(consoleProps.arg).to.equal('works') - expect(consoleProps.task).to.equal('return:arg') - done() - }, 250) + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('pause') + expect(consoleProps.Yielded).to.be.undefined }) + }) + it('.task()', () => { cy.origin('http://foobar.com:3500', () => { cy.task('return:arg', 'works') }) + + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('task', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('task') + expect(consoleProps.Yielded).to.equal('works') + expect(consoleProps.arg).to.equal('works') + expect(consoleProps.task).to.equal('return:arg') + }) }) }) }) it('verifies number of cy commands', () => { // @ts-ignore - // remove 'getAll' command since it's a custom command we add for our own testing and not an actual cy command - const actualCommands = Cypress._.reject(Object.keys(cy.commandFns), (command) => command === 'getAll') + // remove 'getAll' and 'shouldWithTimeout' commands since they are custom commands we added for our own testing and are not actual cy commands + const actualCommands = Cypress._.reject(Object.keys(cy.commandFns), (command) => command === 'getAll' || command === 'shouldWithTimeout') const expectedCommands = [ 'check', 'uncheck', 'click', 'dblclick', 'rightclick', 'focus', 'blur', 'hover', 'scrollIntoView', 'scrollTo', 'select', 'selectFile', 'submit', 'type', 'clear', 'trigger', 'as', 'ng', 'should', 'and', 'clock', 'tick', 'spread', 'each', 'then', diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_navigation.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_navigation.spec.ts index f39e44540908..4968f233849b 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_navigation.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_navigation.spec.ts @@ -436,22 +436,7 @@ context('cy.origin navigation', () => { }) }) - it('.go()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog, ...attrs } = findCrossOriginLogs('go', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(attrs.name).to.equal('go') - expect(attrs.message).to.equal('back') - - expect(consoleProps.Command).to.equal('go') - expect(consoleProps.Yielded).to.be.null - - done() - }, 250) - }) - + it('.go()', () => { cy.visit('/fixtures/multi-domain.html') cy.get('a[data-cy="cross-origin-secondary-link"]').click() @@ -460,50 +445,40 @@ context('cy.origin navigation', () => { cy.go('back') }) - }) - it('.reload()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog, ...attrs } = findCrossOriginLogs('reload', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog, ...attrs } = findCrossOriginLogs('go', logs, 'foobar.com') - expect(crossOriginLog).to.be.true - expect(attrs.name).to.equal('reload') - expect(attrs.message).to.equal('') + expect(crossOriginLog).to.be.true + expect(attrs.name).to.equal('go') + expect(attrs.message).to.equal('back') - expect(consoleProps.Command).to.equal('reload') - expect(consoleProps.Yielded).to.be.null - - done() - }, 250) + expect(consoleProps.Command).to.equal('go') + expect(consoleProps.Yielded).to.be.null }) + }) + it('.reload()', () => { cy.visit('/fixtures/multi-domain.html') cy.get('a[data-cy="dom-link"]').click() cy.origin('http://foobar.com:3500', () => { cy.reload() }) - }) - - it('visit()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog, ...attrs } = findCrossOriginLogs('visit', logs, 'foobar.com') - expect(crossOriginLog).to.be.true - expect(attrs.name).to.equal('visit') - expect(attrs.message).to.equal('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog, ...attrs } = findCrossOriginLogs('reload', logs, 'foobar.com') - expect(consoleProps.Command).to.equal('visit') - expect(consoleProps).to.have.property('Cookies Set').that.is.an('object') - expect(consoleProps).to.have.property('Redirects').that.is.an('object') - expect(consoleProps).to.have.property('Resolved Url').that.equals('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') + expect(crossOriginLog).to.be.true + expect(attrs.name).to.equal('reload') + expect(attrs.message).to.equal('') - done() - }, 250) + expect(consoleProps.Command).to.equal('reload') + expect(consoleProps.Yielded).to.be.null }) + }) + it('visit()', () => { cy.visit('/fixtures/multi-domain.html') cy.origin('http://foobar.com:3500', () => { @@ -511,6 +486,19 @@ context('cy.origin navigation', () => { cy.get('[data-cy="dom-check"]').should('have.text', 'From a secondary origin') }) + + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog, ...attrs } = findCrossOriginLogs('visit', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(attrs.name).to.equal('visit') + expect(attrs.message).to.equal('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') + + expect(consoleProps.Command).to.equal('visit') + expect(consoleProps).to.have.property('Cookies Set').that.is.an('object') + expect(consoleProps).to.have.property('Redirects').that.is.an('object') + expect(consoleProps).to.have.property('Resolved Url').that.equals('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') + }) }) }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_network_requests.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_network_requests.spec.ts index 8e43d6471988..bd9a51ab09f7 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_network_requests.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_network_requests.spec.ts @@ -44,33 +44,29 @@ context('cy.origin network requests', () => { }) }) - it('.request()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('request', logs, 'foobar.com') + it('.request()', () => { + cy.origin('http://foobar.com:3500', () => { + cy.request('http://www.foobar.com:3500/fixtures/example.json') + }) - expect(crossOriginLog).to.be.true + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('request', logs, 'foobar.com') - expect(consoleProps.Command).to.equal('request') + expect(crossOriginLog).to.be.true - expect(consoleProps.Request).to.have.property('Request Body').that.equals(null) - expect(consoleProps.Request).to.have.property('Request Headers').that.is.a('object') - expect(consoleProps.Request).to.have.property('Request URL').that.equals('http://www.foobar.com:3500/fixtures/example.json') - expect(consoleProps.Request).to.have.property('Response Body').that.is.a('string') - expect(consoleProps.Request).to.have.property('Response Headers').that.is.a('object') - expect(consoleProps.Request).to.have.property('Response Status').that.equals(200) + expect(consoleProps.Command).to.equal('request') - expect(consoleProps.Yielded).to.have.property('body').that.deep.equals({ example: true }) - expect(consoleProps.Yielded).to.have.property('duration').that.is.a('number') - expect(consoleProps.Yielded).to.have.property('headers').that.is.a('object') - expect(consoleProps.Yielded).to.have.property('status').that.equals(200) + expect(consoleProps.Request).to.have.property('Request Body').that.equals(null) + expect(consoleProps.Request).to.have.property('Request Headers').that.is.a('object') + expect(consoleProps.Request).to.have.property('Request URL').that.equals('http://www.foobar.com:3500/fixtures/example.json') + expect(consoleProps.Request).to.have.property('Response Body').that.is.a('string') + expect(consoleProps.Request).to.have.property('Response Headers').that.is.a('object') + expect(consoleProps.Request).to.have.property('Response Status').that.equals(200) - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.request('http://www.foobar.com:3500/fixtures/example.json') + expect(consoleProps.Yielded).to.have.property('body').that.deep.equals({ example: true }) + expect(consoleProps.Yielded).to.have.property('duration').that.is.a('number') + expect(consoleProps.Yielded).to.have.property('headers').that.is.a('object') + expect(consoleProps.Yielded).to.have.property('status').that.equals(200) }) }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying.spec.ts index a3fe961ffdcc..2e8b3f0026f7 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying.spec.ts @@ -43,68 +43,56 @@ context('cy.origin querying', () => { }) }) - it('.contains()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('contains', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('contains') - expect(consoleProps['Applied To']).to.be.undefined - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Content).to.equal('Nested Find') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('DIV') - expect(consoleProps.Yielded).to.have.property('id').that.equals('nested-find') - - done() - }, 250) - }) - + it('.contains()', () => { cy.origin('http://foobar.com:3500', () => { cy.contains('Nested Find') }) - }) - it('.within()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('within', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('contains', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('within') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('FORM') - expect(consoleProps.Yielded).to.have.property('id').that.equals('by-id') - - done() - }, 250) + expect(consoleProps.Command).to.equal('contains') + expect(consoleProps['Applied To']).to.be.undefined + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Content).to.equal('Nested Find') + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('DIV') + expect(consoleProps.Yielded).to.have.property('id').that.equals('nested-find') }) + }) + it('.within()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#by-id').within(() => { cy.get('#input') }) }) - }) - it('.root()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('root', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('within', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('root') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('HTML') - - done() - }, 250) + expect(consoleProps.Command).to.equal('within') + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('FORM') + expect(consoleProps.Yielded).to.have.property('id').that.equals('by-id') }) + }) + it('.root()', () => { cy.origin('http://foobar.com:3500', () => { cy.root() }) + + cy.shouldWithTimeout(() => { + const { crossOriginLog, consoleProps } = findCrossOriginLogs('root', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('root') + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('HTML') + }) }) }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying_shadow.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying_shadow.spec.ts index b55ece31b548..0286751dd931 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying_shadow.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying_shadow.spec.ts @@ -24,27 +24,23 @@ context('cy.origin shadow dom', () => { }) }) - it('.shadow()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('shadow', logs, 'foobar.com') + it('.shadow()', () => { + cy.origin('http://foobar.com:3500', () => { + cy.get('#shadow-element-1').shadow() + }) - expect(crossOriginLog).to.be.true + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('shadow', logs, 'foobar.com') - expect(consoleProps.Command).to.equal('shadow') - expect(consoleProps.Elements).to.equal(1) + expect(crossOriginLog).to.be.true - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('CY-TEST-ELEMENT') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('shadow-element-1') + expect(consoleProps.Command).to.equal('shadow') + expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Yielded).to.be.null + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('CY-TEST-ELEMENT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('shadow-element-1') - done() - }, 250) - }) - - cy.origin('http://foobar.com:3500', () => { - cy.get('#shadow-element-1').shadow() + expect(consoleProps.Yielded).to.be.null }) }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_screenshot.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_screenshot.spec.ts index 375fcd4bd867..9fb2b3763932 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_screenshot.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_screenshot.spec.ts @@ -291,38 +291,33 @@ context('cy.origin screenshot', () => { cy.get('a[data-cy="screenshots-link"]').click() }) - it('.screenshot()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('screenshot', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - - expect(consoleProps.Command).to.equal('screenshot') - - expect(consoleProps).to.have.property('blackout') - expect(consoleProps).to.have.property('capture').that.equals('fullPage') - expect(consoleProps).to.have.property('dimensions').that.is.a('string') - expect(consoleProps).to.have.property('disableTimersAndAnimations').that.is.a('boolean') - expect(consoleProps).to.have.property('duration').that.is.a('string') - expect(consoleProps).to.have.property('multipart').that.is.a('boolean') - expect(consoleProps).to.have.property('name').to.be.null - expect(consoleProps).to.have.property('path').that.is.a('string') - expect(consoleProps).to.have.property('pixelRatio').that.is.a('number') - expect(consoleProps).to.have.property('scaled').that.is.a('boolean') - expect(consoleProps).to.have.property('size').that.is.a('string') - expect(consoleProps).to.have.property('specName').that.is.a('string') - expect(consoleProps).to.have.property('takenAt').that.is.a('string') - expect(consoleProps).to.have.property('testAttemptIndex').that.is.a('number') - - done() - }, 250) - }) - + it('.screenshot()', () => { cy.origin('http://foobar.com:3500', () => { - // FIXME: viewports don't seems correct after taking screenshot when in snapshot mode cy.screenshot({ capture: 'fullPage' }) }) + + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('screenshot', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps.Command).to.equal('screenshot') + + expect(consoleProps).to.have.property('blackout') + expect(consoleProps).to.have.property('capture').that.equals('fullPage') + expect(consoleProps).to.have.property('dimensions').that.is.a('string') + expect(consoleProps).to.have.property('disableTimersAndAnimations').that.is.a('boolean') + expect(consoleProps).to.have.property('duration').that.is.a('string') + expect(consoleProps).to.have.property('multipart').that.is.a('boolean') + expect(consoleProps).to.have.property('name').to.be.null + expect(consoleProps).to.have.property('path').that.is.a('string') + expect(consoleProps).to.have.property('pixelRatio').that.is.a('number') + expect(consoleProps).to.have.property('scaled').that.is.a('boolean') + expect(consoleProps).to.have.property('size').that.is.a('string') + expect(consoleProps).to.have.property('specName').that.is.a('string') + expect(consoleProps).to.have.property('takenAt').that.is.a('string') + expect(consoleProps).to.have.property('testAttemptIndex').that.is.a('number') + }) }) }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_spies_stubs_clocks.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_spies_stubs_clocks.spec.ts index 51659f447e7d..b19b746d464a 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_spies_stubs_clocks.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_spies_stubs_clocks.spec.ts @@ -100,20 +100,7 @@ context('cy.origin spies, stubs, and clock', () => { }) }) - it('spy()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const spyLog = findCrossOriginLogs('spy-1', logs, 'foobar.com') - - expect(spyLog.crossOriginLog).to.be.true - expect(spyLog.consoleProps.Command).to.equal('spy-1') - expect(spyLog.callCount).to.be.a('number') - expect(spyLog.functionName).to.equal('bar') - - done() - }, 250) - }) - + it('spy()', () => { cy.origin('http://foobar.com:3500', () => { const foo = { bar () { } } @@ -121,22 +108,18 @@ context('cy.origin spies, stubs, and clock', () => { foo.bar() expect(foo.bar).to.be.called }) - }) - it('.stub()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const stubLog = findCrossOriginLogs('stub-1', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const spyLog = findCrossOriginLogs('spy-1', logs, 'foobar.com') - expect(stubLog.crossOriginLog).to.be.true - expect(stubLog.consoleProps.Command).to.equal('stub-1') - expect(stubLog.callCount).to.be.a('number') - expect(stubLog.functionName).to.equal('bar') - - done() - }, 250) + expect(spyLog.crossOriginLog).to.be.true + expect(spyLog.consoleProps.Command).to.equal('spy-1') + expect(spyLog.callCount).to.be.a('number') + expect(spyLog.functionName).to.equal('bar') }) + }) + it('.stub()', () => { cy.origin('http://foobar.com:3500', () => { const foo = { bar () { } } @@ -144,52 +127,39 @@ context('cy.origin spies, stubs, and clock', () => { foo.bar() expect(foo.bar).to.be.called }) - }) - - it('.clock()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const clockLog = findCrossOriginLogs('clock', logs, 'foobar.com') - - expect(clockLog.crossOriginLog).to.be.true - expect(clockLog.name).to.equal('clock') - const consoleProps = clockLog.consoleProps() + cy.shouldWithTimeout(() => { + const stubLog = findCrossOriginLogs('stub-1', logs, 'foobar.com') - expect(consoleProps.Command).to.equal('clock') - expect(consoleProps).to.have.property('Methods replaced').that.is.a('object') - expect(consoleProps).to.have.property('Now').that.is.a('number') - - done() - }, 250) + expect(stubLog.crossOriginLog).to.be.true + expect(stubLog.consoleProps.Command).to.equal('stub-1') + expect(stubLog.callCount).to.be.a('number') + expect(stubLog.functionName).to.equal('bar') }) + }) + it('.clock()', () => { cy.origin('http://foobar.com:3500', () => { const now = Date.UTC(2022, 0, 12) cy.clock(now) }) - }) - it('.tick()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const tickLog = findCrossOriginLogs('tick', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const clockLog = findCrossOriginLogs('clock', logs, 'foobar.com') - expect(tickLog.crossOriginLog).to.be.true - expect(tickLog.name).to.equal('tick') + expect(clockLog.crossOriginLog).to.be.true + expect(clockLog.name).to.equal('clock') - const consoleProps = _.isFunction(tickLog.consoleProps) ? tickLog.consoleProps() : tickLog.consoleProps + const consoleProps = clockLog.consoleProps() - expect(consoleProps.Command).to.equal('tick') - expect(consoleProps).to.have.property('Methods replaced').that.is.a('object') - expect(consoleProps).to.have.property('Now').that.is.a('number') - expect(consoleProps).to.have.property('Ticked').that.is.a('string') - - done() - }, 250) + expect(consoleProps.Command).to.equal('clock') + expect(consoleProps).to.have.property('Methods replaced').that.is.a('object') + expect(consoleProps).to.have.property('Now').that.is.a('number') }) + }) + it('.tick()', () => { cy.origin('http://foobar.com:3500', () => { const now = Date.UTC(2022, 0, 12) @@ -197,6 +167,20 @@ context('cy.origin spies, stubs, and clock', () => { cy.tick(10000) }) + + cy.shouldWithTimeout(() => { + const tickLog = findCrossOriginLogs('tick', logs, 'foobar.com') + + expect(tickLog.crossOriginLog).to.be.true + expect(tickLog.name).to.equal('tick') + + const consoleProps = _.isFunction(tickLog.consoleProps) ? tickLog.consoleProps() : tickLog.consoleProps + + expect(consoleProps.Command).to.equal('tick') + expect(consoleProps).to.have.property('Methods replaced').that.is.a('object') + expect(consoleProps).to.have.property('Now').that.is.a('number') + expect(consoleProps).to.have.property('Ticked').that.is.a('string') + }) }) }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_traversal.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_traversal.spec.ts index 94f4df23eadf..beb378ffd0fe 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_traversal.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_traversal.spec.ts @@ -127,515 +127,443 @@ context('cy.origin traversal', () => { }) }) - it('.children()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('children', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') - expect(consoleProps.Command).to.equal('children') - expect(consoleProps.Elements).to.equal(3) - expect(consoleProps.Selector).to.equal('') - expect(consoleProps.Yielded.length).to.equal(3) - expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('input') - expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('name') - expect(consoleProps.Yielded[2]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[2]).to.have.property('id').that.equals('age') - - done() - }, 250) - }) - + it('.children()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#by-id').children() }) - }) - - it('.closest()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('closest', logs, 'foobar.com') - expect(crossOriginLog).to.be.true - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') - expect(consoleProps.Command).to.equal('closest') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('form') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('FORM') - expect(consoleProps.Yielded).to.have.property('id').that.equals('by-id') - expect(consoleProps.Yielded.querySelector('input#input')).to.be.ok - expect(consoleProps.Yielded.querySelector('input#name')).to.be.ok - expect(consoleProps.Yielded.querySelector('input#age')).to.be.ok + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('children', logs, 'foobar.com') - done() - }, 250) + expect(crossOriginLog).to.be.true + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') + expect(consoleProps.Command).to.equal('children') + expect(consoleProps.Elements).to.equal(3) + expect(consoleProps.Selector).to.equal('') + expect(consoleProps.Yielded.length).to.equal(3) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('input') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('name') + expect(consoleProps.Yielded[2]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[2]).to.have.property('id').that.equals('age') }) + }) + it('.closest()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#by-id').closest('form') }) - }) - - it('.eq()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('eq', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps['Applied To'].length).to.equal(3) - expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') - expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') - expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') - expect(consoleProps.Command).to.equal('eq') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('1') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded).to.have.property('id').that.equals('name') + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('closest', logs, 'foobar.com') - done() - }, 250) + expect(crossOriginLog).to.be.true + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') + expect(consoleProps.Command).to.equal('closest') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('form') + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('FORM') + expect(consoleProps.Yielded).to.have.property('id').that.equals('by-id') + expect(consoleProps.Yielded.querySelector('input#input')).to.be.ok + expect(consoleProps.Yielded.querySelector('input#name')).to.be.ok + expect(consoleProps.Yielded.querySelector('input#age')).to.be.ok }) + }) + it('.eq()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#by-id>input').eq(1) }) - }) - - it('.filter()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('filter', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps['Applied To'].length).to.equal(12) - expect(consoleProps.Command).to.equal('filter') - expect(consoleProps.Elements).to.equal(4) - expect(consoleProps.Selector).to.equal('[name="dogs"]') + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('eq', logs, 'foobar.com') - expect(consoleProps.Yielded.length).to.equal(4) + expect(crossOriginLog).to.be.true + expect(consoleProps['Applied To'].length).to.equal(3) + expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') + expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') + expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') - _.forEach(consoleProps.Yielded, (yielded) => { - expect(yielded).to.have.property('tagName').that.equals('INPUT') - expect(yielded).to.have.property('name').that.equals('dogs') - }) - - done() - }, 250) + expect(consoleProps.Command).to.equal('eq') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('1') + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('name') }) + }) + it('.filter()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#by-name>input') .filter('[name="dogs"]') }) - }) - - it('.find()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('find', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('filter', logs, 'foobar.com') - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('find') - expect(consoleProps.Elements).to.equal(3) - expect(consoleProps.Selector).to.equal('input') + expect(consoleProps['Applied To'].length).to.equal(12) + expect(consoleProps.Command).to.equal('filter') + expect(consoleProps.Elements).to.equal(4) + expect(consoleProps.Selector).to.equal('[name="dogs"]') - expect(consoleProps.Yielded.length).to.equal(3) - expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('input') - expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('name') - expect(consoleProps.Yielded[2]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[2]).to.have.property('id').that.equals('age') + expect(consoleProps.Yielded.length).to.equal(4) - done() - }, 250) + _.forEach(consoleProps.Yielded, (yielded) => { + expect(yielded).to.have.property('tagName').that.equals('INPUT') + expect(yielded).to.have.property('name').that.equals('dogs') + }) }) + }) + it('.find()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#by-id').find('input') }) - }) - it('.first()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('first', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('find', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + expect(crossOriginLog).to.be.true - expect(consoleProps['Applied To'].length).to.equal(3) - expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') - expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') - expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') - expect(consoleProps.Command).to.equal('first') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('') + expect(consoleProps.Command).to.equal('find') + expect(consoleProps.Elements).to.equal(3) + expect(consoleProps.Selector).to.equal('input') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded).to.have.property('id').that.equals('input') - - done() - }, 250) + expect(consoleProps.Yielded.length).to.equal(3) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('input') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('name') + expect(consoleProps.Yielded[2]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[2]).to.have.property('id').that.equals('age') }) + }) + it('.first()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#by-id>input').first() }) - }) - - it('.last()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('last', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('first', logs, 'foobar.com') - expect(consoleProps['Applied To'].length).to.equal(3) - expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') - expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') - expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('last') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('') + expect(consoleProps['Applied To'].length).to.equal(3) + expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') + expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') + expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded).to.have.property('id').that.equals('age') + expect(consoleProps.Command).to.equal('first') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('') - done() - }, 250) + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('input') }) + }) + it('.last()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#by-id>input').last() }) - }) - it('.next()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('next', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('last', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + expect(crossOriginLog).to.be.true - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') + expect(consoleProps['Applied To'].length).to.equal(3) + expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') + expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') + expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') - expect(consoleProps.Command).to.equal('next') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('') + expect(consoleProps.Command).to.equal('last') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded).to.have.property('id').that.equals('name') - - done() - }, 250) + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('age') }) + }) + it('.next()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#input').next() }) - }) - - it('.nextAll()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('nextAll', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('next', logs, 'foobar.com') - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('nextAll') - expect(consoleProps.Elements).to.equal(2) - expect(consoleProps.Selector).to.equal('') + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') - expect(consoleProps.Yielded.length).to.equal(2) - expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('name') - expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('age') + expect(consoleProps.Command).to.equal('next') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('') - done() - }, 250) + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('name') }) + }) + it('.nextAll()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#input').nextAll() }) - }) - - it('.nextUntil()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('nextUntil', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('nextAll', logs, 'foobar.com') - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('nextUntil') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('#age') + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded).to.have.property('id').that.equals('name') + expect(consoleProps.Command).to.equal('nextAll') + expect(consoleProps.Elements).to.equal(2) + expect(consoleProps.Selector).to.equal('') - done() - }, 250) + expect(consoleProps.Yielded.length).to.equal(2) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('name') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('age') }) + }) + it('.nextUntil()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#input').nextUntil('#age') }) - }) - it('.not()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('not', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('nextUntil', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + expect(crossOriginLog).to.be.true - expect(consoleProps['Applied To'].length).to.equal(3) - expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') - expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') - expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') - expect(consoleProps.Command).to.equal('not') - expect(consoleProps.Elements).to.equal(2) - expect(consoleProps.Selector).to.equal('#age') + expect(consoleProps.Command).to.equal('nextUntil') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('#age') - expect(consoleProps.Yielded.length).to.equal(2) - expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('input') - expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('name') - - done() - }, 250) + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('name') }) + }) + it('.not()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#by-id>input').not('#age') }) - }) - - it('.parent()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('parent', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('not', logs, 'foobar.com') - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('parent') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('') + expect(consoleProps['Applied To'].length).to.equal(3) + expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') + expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name') + expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('DIV') - expect(consoleProps.Yielded).to.have.property('id').that.equals('dom') + expect(consoleProps.Command).to.equal('not') + expect(consoleProps.Elements).to.equal(2) + expect(consoleProps.Selector).to.equal('#age') - done() - }, 250) + expect(consoleProps.Yielded.length).to.equal(2) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('input') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('name') }) + }) + it('.parent()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#by-id').parent() }) - }) - it('.parents()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('parents', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('parent', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + expect(crossOriginLog).to.be.true - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') - expect(consoleProps.Command).to.equal('parents') - expect(consoleProps.Elements).to.equal(3) - expect(consoleProps.Selector).to.equal('') + expect(consoleProps.Command).to.equal('parent') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('') - expect(consoleProps.Yielded.length).to.equal(3) - expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('DIV') - expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('dom') - expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('BODY') - expect(consoleProps.Yielded[2]).to.have.property('tagName').that.equals('HTML') - - done() - }, 250) + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('DIV') + expect(consoleProps.Yielded).to.have.property('id').that.equals('dom') }) + }) + it('.parents()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#by-id').parents() }) - }) - - it('.parentsUntil()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('parentsUntil', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('parents', logs, 'foobar.com') - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('parentsUntil') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('body') + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('DIV') - expect(consoleProps.Yielded).to.have.property('id').that.equals('dom') + expect(consoleProps.Command).to.equal('parents') + expect(consoleProps.Elements).to.equal(3) + expect(consoleProps.Selector).to.equal('') - done() - }, 250) + expect(consoleProps.Yielded.length).to.equal(3) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('DIV') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('dom') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('BODY') + expect(consoleProps.Yielded[2]).to.have.property('tagName').that.equals('HTML') }) + }) + it('.parentsUntil()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#by-id').parentsUntil('body') }) - }) - it('.prev()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('prev', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('parentsUntil', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + expect(crossOriginLog).to.be.true - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('age') + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') - expect(consoleProps.Command).to.equal('prev') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('') + expect(consoleProps.Command).to.equal('parentsUntil') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('body') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded).to.have.property('id').that.equals('name') - - done() - }, 250) + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('DIV') + expect(consoleProps.Yielded).to.have.property('id').that.equals('dom') }) + }) + it('.prev()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#age').prev() }) - }) - - it('.prevAll()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('prevAll', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('prev', logs, 'foobar.com') - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('age') + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('prevAll') - expect(consoleProps.Elements).to.equal(2) - expect(consoleProps.Selector).to.equal('') + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('age') - expect(consoleProps.Yielded.length).to.equal(2) - expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('name') - expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('input') + expect(consoleProps.Command).to.equal('prev') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('') - done() - }, 250) + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('name') }) + }) + it('.prevAll()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#age').prevAll() }) - }) - it('.prevUntil()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('prevUntil', logs, 'foobar.com') + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('prevAll', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + expect(crossOriginLog).to.be.true - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('age') + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('age') - expect(consoleProps.Command).to.equal('prevUntil') - expect(consoleProps.Elements).to.equal(1) - expect(consoleProps.Selector).to.equal('#input') + expect(consoleProps.Command).to.equal('prevAll') + expect(consoleProps.Elements).to.equal(2) + expect(consoleProps.Selector).to.equal('') - expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded).to.have.property('id').that.equals('name') - - done() - }, 250) + expect(consoleProps.Yielded.length).to.equal(2) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('name') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('input') }) + }) + it('.prevUntil()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#age').prevUntil('#input') }) - }) - - it('.siblings()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('siblings', logs, 'foobar.com') - expect(crossOriginLog).to.be.true + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('prevUntil', logs, 'foobar.com') - expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') + expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('siblings') - expect(consoleProps.Elements).to.equal(2) - expect(consoleProps.Selector).to.equal('') + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('age') - expect(consoleProps.Yielded.length).to.equal(2) - expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('name') - expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') - expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('age') + expect(consoleProps.Command).to.equal('prevUntil') + expect(consoleProps.Elements).to.equal(1) + expect(consoleProps.Selector).to.equal('#input') - done() - }, 250) + expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded).to.have.property('id').that.equals('name') }) + }) + it('.siblings()', () => { cy.origin('http://foobar.com:3500', () => { cy.get('#input').siblings() }) + + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('siblings', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + + expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') + + expect(consoleProps.Command).to.equal('siblings') + expect(consoleProps.Elements).to.equal(2) + expect(consoleProps.Selector).to.equal('') + + expect(consoleProps.Yielded.length).to.equal(2) + expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('name') + expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT') + expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('age') + }) }) }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_viewport.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_viewport.spec.ts index 3283be982833..657a8739723a 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_viewport.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_viewport.spec.ts @@ -192,23 +192,19 @@ context('cy.origin viewport', () => { }) }) - it('.viewport()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('viewport', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('viewport') - expect(consoleProps.Width).to.equal(320) - expect(consoleProps.Height).to.equal(480) - - done() - }, 250) - }) - + it('.viewport()', () => { cy.origin('http://foobar.com:3500', () => { cy.viewport(320, 480) }) + + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('viewport', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('viewport') + expect(consoleProps.Width).to.equal(320) + expect(consoleProps.Height).to.equal(480) + }) }) }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_waiting.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_waiting.spec.ts index 9e5a86cbbbf2..1c3feba80d3f 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_waiting.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_waiting.spec.ts @@ -23,21 +23,17 @@ context('cy.origin waiting', () => { }) }) - it('.wait()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('wait', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('wait') - expect(consoleProps).to.have.property('Waited For').to.equal('500ms before continuing') - - done() - }, 250) + it('.wait()', () => { + cy.origin('http://foobar.com:3500', () => { + cy.wait(200) }) - cy.origin('http://foobar.com:3500', () => { - cy.wait(500) + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('wait', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('wait') + expect(consoleProps).to.have.property('Waited For').to.equal('200ms before continuing') }) }) }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_window.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_window.spec.ts index 45f4e1ff6e3b..edf0b8c89d2b 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_window.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_window.spec.ts @@ -35,58 +35,46 @@ context('cy.origin window', () => { }) }) - it('.window()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('window', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('window') - expect(consoleProps.Yielded).to.be.null - - done() - }, 250) - }) - + it('.window()', () => { cy.origin('http://foobar.com:3500', () => { cy.window() }) - }) - - it('.document()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('document', logs, 'foobar.com') - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('document') - expect(consoleProps.Yielded).to.be.null + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('window', logs, 'foobar.com') - done() - }, 250) + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('window') + expect(consoleProps.Yielded).to.be.null }) + }) + it('.document()', () => { cy.origin('http://foobar.com:3500', () => { cy.document() }) - }) - - it('.title()', (done) => { - cy.on('command:queue:end', () => { - setTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('title', logs, 'foobar.com') - expect(crossOriginLog).to.be.true - expect(consoleProps.Command).to.equal('title') - expect(consoleProps.Yielded).to.equal('DOM Fixture') + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('document', logs, 'foobar.com') - done() - }, 250) + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('document') + expect(consoleProps.Yielded).to.be.null }) + }) + it('.title()', () => { cy.origin('http://foobar.com:3500', () => { cy.title() }) + + cy.shouldWithTimeout(() => { + const { consoleProps, crossOriginLog } = findCrossOriginLogs('title', logs, 'foobar.com') + + expect(crossOriginLog).to.be.true + expect(consoleProps.Command).to.equal('title') + expect(consoleProps.Yielded).to.equal('DOM Fixture') + }) }) }) }) diff --git a/packages/driver/cypress/support/utils.js b/packages/driver/cypress/support/utils.js index ae4fc4974117..8ae506576458 100644 --- a/packages/driver/cypress/support/utils.js +++ b/packages/driver/cypress/support/utils.js @@ -108,6 +108,10 @@ const getAllFn = (...aliases) => { ) } +const shouldWithTimeout = (cb, timeout = 250) => { + cy.wrap({}, { timeout }).should(cb) +} + export const keyEvents = [ 'keydown', 'keyup', @@ -134,6 +138,8 @@ export const expectCaret = (start, end) => { Cypress.Commands.add('getAll', getAllFn) +Cypress.Commands.add('shouldWithTimeout', shouldWithTimeout) + const chaiSubset = require('chai-subset') chai.use(chaiSubset) diff --git a/packages/driver/types/internal-types.d.ts b/packages/driver/types/internal-types.d.ts index e8dd686da9e0..74a9d78f1432 100644 --- a/packages/driver/types/internal-types.d.ts +++ b/packages/driver/types/internal-types.d.ts @@ -46,6 +46,8 @@ declare namespace Cypress { fail: (err: Error, options:{ async?: boolean }) => Error getRemoteLocation: ILocation['getRemoteLocation'] createSnapshot: ISnapshots['createSnapshot'] + // NOTE: This command is added in support/utils.js for testing convenience and does not ship with cy! + shouldWithTimeout(cb: (subj: {}) => void, timeout?: number): Chainable } interface Cypress { From 2561b1d437b899338d03feffb5c339f8d0e76a22 Mon Sep 17 00:00:00 2001 From: Bill Glesias Date: Fri, 15 Apr 2022 14:00:13 -0400 Subject: [PATCH 37/54] simplify DOM hydration for input based elements --- packages/driver/src/util/serialization/log.ts | 71 +++++++++++-------- 1 file changed, 40 insertions(+), 31 deletions(-) diff --git a/packages/driver/src/util/serialization/log.ts b/packages/driver/src/util/serialization/log.ts index f35f26445e85..7609a35fa8c9 100644 --- a/packages/driver/src/util/serialization/log.ts +++ b/packages/driver/src/util/serialization/log.ts @@ -26,25 +26,50 @@ interface PreprocessedFunction { * @returns {PreprocessedHTMLElement} a preprocessed element that can be fed through postMessage() that can be reified in the primary. */ const preprocessDomElement = (props: HTMLElement) => { - // hydrate values in HTML copy so when serialized they show up correctly in snapshot. This is important for input boxes with typing and other 'value' attributes - props.querySelectorAll('input').forEach((input: HTMLInputElement) => { - input.setAttribute('value', input.value) - if (input.checked) { - input.setAttribute('checked', `${input.checked}`) + const inputPreprocessArray = Array.from(props.querySelectorAll('input, textarea, select')) + + // Since we serialize on innerHTML, we also need to account for the props element itself in the case it is an input, select, or textarea. + inputPreprocessArray.push(props) + + // Hydrate values in the HTML copy so when serialized they show up correctly in snapshot. + // We do this by mapping certain properties to attributes that are not already reflected in the attributes map. + // Things like id, class, type, and others are reflected in the attribute map and do not need to be explicitly added. + inputPreprocessArray.forEach((el: any) => { + switch (el.type) { + case 'checkbox': + case 'radio': + if (el.checked) { + el.setAttribute('checked', '') + } + + break + case 'select-one': + case 'select-multiple': { + const options = el.type === 'select-one' ? el.options : el.selectedOptions + + if (el.selectedIndex !== -1) { + for (let option of options) { + if (option.selected) { + option.setAttribute('selected', 'true') + } else { + option.removeAttribute('selected') + } + } + } + } + break + case 'textarea': { + el.innerHTML = el.value + } + break + default: + if (el.value !== undefined) { + el.setAttribute('value', el.value) + } } }) - // TODO: figure out reifying option selection - // props.querySelectorAll('option').forEach((option) => { - // if (option.selected) { - // option.setAttribute('selected', option.selected) - // } - // }) - const el: PreprocessedHTMLElement = { - value: (props as HTMLInputElement)?.value, - type: (props as HTMLInputElement)?.type, - id: props?.id, tagName: props.tagName, attributes: {}, innerHTML: props.innerHTML, @@ -71,22 +96,6 @@ const preprocessDomElement = (props: HTMLElement) => { const reifyDomElement = (props: any) => { const reifiedEl = document.createElement(props.tagName) - if (props.value) { - reifiedEl.value = props.value - } - - try { - if (props.type) { - reifiedEl.type = props.type - } - } catch (e) { - // swallow this. certain elements this is a read-only property on (such as `) + }) + + it('reifies', () => { + const preprocessedSnapshot = { + tagName: 'BODY', + serializationKey: 'dom', + attributes: { + foo: 'bar', + }, + innerHTML: `

Super Serial-izer

`, + } + + const reifiedSnapshot = reifyDomElement(preprocessedSnapshot) + + expect(reifiedSnapshot).to.be.instanceOf(HTMLBodyElement) + expect(reifiedSnapshot.getAttribute('foo')).to.equal('bar') + expect(reifiedSnapshot.querySelector('input[type="text"][value="foo"][data-cy="bar"]')).to.be.instanceOf(HTMLInputElement) + }) + }) + + context('select', () => { + it('preprocess', () => { + const selectElement = document.createElement('select') + + selectElement.id = 'strickland-propane' + selectElement.name = 'Strickland Propane Staff Members' + + const options = ['Hank Hill', 'Buck Strickland', 'Donna', 'Old Donna'].map((val) => { + const option = document.createElement('option') + + option.value = val + + return option + }) + + options.forEach((option) => selectElement.appendChild(option)) + + selectElement.selectedIndex = 1 + + const snapshot = buildSnapshot(selectElement) + + const preprocessedSnapshot = preprocessDomElement(snapshot) + + expect(preprocessedSnapshot).to.have.property('tagName').that.equals('BODY') + expect(preprocessedSnapshot).to.have.property('serializationKey').that.equals('dom') + expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`

Super Serial-izer

`) + }) + + it('reifies', () => { + const preprocessedSnapshot = { + tagName: 'BODY', + serializationKey: 'dom', + attributes: {}, + innerHTML: `

Super Serial-izer

`, + } + + const reifiedSnapshot = reifyDomElement(preprocessedSnapshot) + + expect(reifiedSnapshot).to.be.instanceOf(HTMLBodyElement) + expect(reifiedSnapshot.querySelector('select#strickland-propane option[selected]')).to.have.property('value').that.equals('Buck Strickland') + }) + }) + + context('textarea', () => { + it('preprocess', () => { + const textAreaElement = document.createElement('textarea') + + textAreaElement.rows = 4 + textAreaElement.cols = 20 + textAreaElement.value = 'Provide the community with propane and propane accessories' + + const snapshot = buildSnapshot(textAreaElement) + + const preprocessedSnapshot = preprocessDomElement(snapshot) + + expect(preprocessedSnapshot).to.have.property('tagName').that.equals('BODY') + expect(preprocessedSnapshot).to.have.property('serializationKey').that.equals('dom') + expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`

Super Serial-izer

`) + }) + + it('reifies', () => { + const preprocessedSnapshot = { + tagName: 'BODY', + serializationKey: 'dom', + attributes: {}, + innerHTML: `

Super Serial-izer

`, + } + + const reifiedSnapshot = reifyDomElement(preprocessedSnapshot) + + expect(reifiedSnapshot).to.be.instanceOf(HTMLBodyElement) + expect(reifiedSnapshot.querySelector('textarea[rows="4"]')).to.have.property('textContent').that.equals('Provide the community with propane and propane accessories') + }) + }) + + context('radio', () => { + it('preprocess', () => { + const formElement = document.createElement('form') + + const radioInputs = ['Dale', 'Boomhauer', 'Bill'].map((val) => { + const radioInput = document.createElement('input') + + radioInput.type = 'radio' + radioInput.value = val + + return radioInput + }) + + radioInputs[1].checked = true + + radioInputs.forEach((radioInput) => formElement.appendChild(radioInput)) + + const snapshot = buildSnapshot(formElement) + + const preprocessedSnapshot = preprocessDomElement(snapshot) + + expect(preprocessedSnapshot).to.have.property('tagName').that.equals('BODY') + expect(preprocessedSnapshot).to.have.property('serializationKey').that.equals('dom') + expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`

Super Serial-izer

`) + }) + + it('reifies', () => { + const preprocessedSnapshot = { + tagName: 'BODY', + serializationKey: 'dom', + attributes: {}, + innerHTML: `

Super Serial-izer

`, + } + + const reifiedSnapshot = reifyDomElement(preprocessedSnapshot) + + expect(reifiedSnapshot).to.be.instanceOf(HTMLBodyElement) + expect(reifiedSnapshot.querySelector('form input[value="Boomhauer"]')).to.have.property('checked').that.equals(true) + }) + }) + + context('checkbox', () => { + it('preprocess', () => { + const formElement = document.createElement('form') + + const checkboxInputs = ['Dale', 'Boomhauer', 'Bill'].map((val) => { + const checkboxInput = document.createElement('input') + + checkboxInput.type = 'checkbox' + checkboxInput.value = val + + return checkboxInput + }) + + checkboxInputs[1].checked = true + + checkboxInputs.forEach((checkboxInput) => formElement.appendChild(checkboxInput)) + + const snapshot = buildSnapshot(formElement) + + const preprocessedSnapshot = preprocessDomElement(snapshot) + + expect(preprocessedSnapshot).to.have.property('tagName').that.equals('BODY') + expect(preprocessedSnapshot).to.have.property('serializationKey').that.equals('dom') + expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`

Super Serial-izer

`) + }) + + it('reifies', () => { + const preprocessedSnapshot = { + tagName: 'BODY', + serializationKey: 'dom', + attributes: {}, + innerHTML: `"

Super Serial-izer

"`, + } + + const reifiedSnapshot = reifyDomElement(preprocessedSnapshot) + + expect(reifiedSnapshot).to.be.instanceOf(HTMLBodyElement) + expect(reifiedSnapshot.querySelector('form input[value="Boomhauer"]')).to.have.property('checked').that.equals(true) + }) + }) + }) + + // purpose of these 'DOM Elements' tests is to give a very basic understanding of how DOM element serialization works in the log serializer + context('Functions', () => { + it('does NOT try to serialize a function unless `attemptToSerializeFunctions` is set to true', () => { + const serializedFunction = preprocessLogLikeForSerialization(() => 'foo') + + expect(serializedFunction).to.be.null + }) + + it('Tries to serialize EXPLICIT/KNOWN serializable functions by setting `attemptToSerializeFunctions` to true', () => { + const functionContents = [ + 'foo', + { + bar: 'baz', + }, + document.createElement('html'), + ] + + const myKnownSerializableFunction = () => functionContents + + const serializedFunction = preprocessLogLikeForSerialization(myKnownSerializableFunction, true) + + expect(serializedFunction).to.deep.equal({ + serializationKey: 'function', + value: [ + 'foo', + { + bar: 'baz', + }, + { + tagName: 'HTML', + serializationKey: 'dom', + attributes: {}, + innerHTML: '', + }, + ], + }) + }) + }) +}) diff --git a/packages/driver/src/util/serialization/log.ts b/packages/driver/src/util/serialization/log.ts index 46d2ca4327fa..4917ad90640a 100644 --- a/packages/driver/src/util/serialization/log.ts +++ b/packages/driver/src/util/serialization/log.ts @@ -22,7 +22,7 @@ interface PreprocessedFunction { * @param {HTMLElement} props - an HTMLElement * @returns {PreprocessedHTMLElement} a preprocessed element that can be fed through postMessage() that can be reified in the primary. */ -const preprocessDomElement = (props: HTMLElement) => { +export const preprocessDomElement = (props: HTMLElement) => { const inputPreprocessArray = Array.from(props.querySelectorAll('input, textarea, select')) // Since we serialize on innerHTML, we also need to account for the props element itself in the case it is an input, select, or textarea. @@ -90,7 +90,7 @@ const preprocessDomElement = (props: HTMLElement) => { * @param {PreprocessedHTMLElement} props - a preprocessed element that was fed through postMessage() that need to be reified in the primary. * @returns {HTMLElement} a reified element, likely a log snapshot, $el, or consoleProp elements. */ -const reifyDomElement = (props: any) => { +export const reifyDomElement = (props: any) => { const reifiedEl = document.createElement(props.tagName) reifiedEl.innerHTML = props.innerHTML @@ -102,6 +102,107 @@ const reifyDomElement = (props: any) => { return reifiedEl } +/** + * Attempts to preprocess an Object/Array by excluding unserializable values except for DOM elements and possible functions (if attemptToSerializeFunctions is true). + * DOM elements are processed to a serializable object via preprocessDomElement, and functions are serialized to an object with a value key containing their output contents. + * + * @param {any} props an Object/Array that needs to be preprocessed before being sent through postMessage(). + * @param {boolean} [attemptToSerializeFunctions=false] - Whether or not the function should attempt to preprocess a function by invoking it. + * @returns + */ +export const preprocessObjectLikeForSerialization = (props, attemptToSerializeFunctions = false) => { + if (_.isArray(props)) { + return props.map((prop) => { + try { + return preprocessLogLikeForSerialization(prop, attemptToSerializeFunctions) + } catch (e) { + return null + } + }) + } + + if (_.isPlainObject(props)) { + // only attempt to try and serialize dom elements and functions (if attemptToSerializeFunctions is set to true) + let objWithPossiblySerializableProps = _.pickBy(props, (value) => { + const isSerializable = isSerializableInCurrentBrowser(value) + + if (!isSerializable && $dom.isDom(value) || _.isFunction(value) || _.isObject(value)) { + return true + } + + return false + }) + + let objWithOnlySerializableProps = _.pickBy(props, (value) => isSerializableInCurrentBrowser(value)) + + // assign the properties we know we can serialize here + let preprocessed: any = preprocessForSerialization(objWithOnlySerializableProps) + + // and attempt to serialize possibly unserializable props here and fail gracefully if unsuccessful + _.forIn(objWithPossiblySerializableProps, (value, key) => { + try { + preprocessed[key] = preprocessLogLikeForSerialization(value, attemptToSerializeFunctions) + } catch (e) { + preprocessed[key] = null + } + }) + + return preprocessed + } + + return preprocessForSerialization(props) +} + +/** + * Attempts to take an Object and reify it correctly. Most of this is handled by reifyLogLikeFromSerialization, with the exception here being DOM elements. + * DOM elements, if needed to match against the snapshot DOM, are defined as getters on the object to have their values calculated at request. + * This is important for certain log items, such as consoleProps, to be rendered correctly against the snapshot. Other DOM elements, such as snapshots, do not need to be matched + * against the current DOM and can be reified immediately. Since there is a potential need for object getters to exist within an array, arrays are wrapped in a proxy, with array indices + * proxied to the reified object or array, and other methods proxying to the preprocessed array (such as native array methods like map, foreach, etc...). + * + * @param {Object} props - a preprocessed Object/Array that was fed through postMessage() that need to be reified in the primary. + * @param {boolean} matchElementsAgainstSnapshotDOM - whether DOM elements within the Object/Array should be matched against + * @returns {Object|Proxy} - a reified version of the Object or Array (Proxy). + */ +export const reifyObjectLikeForSerialization = (props, matchElementsAgainstSnapshotDOM) => { + let reifiedObjectOrArray = {} + + _.forIn(props, (value, key) => { + const val = reifyLogLikeFromSerialization(value, matchElementsAgainstSnapshotDOM) + + if (val?.serializationKey === 'dom') { + if (matchElementsAgainstSnapshotDOM) { + // dynamically calculate the element (snapshot or otherwise). + // This is important for consoleProp/$el based properties on the log because it calculates the requested element AFTER the snapshot has been rendered into the AUT. + reifiedObjectOrArray = { + ...reifiedObjectOrArray, + get [key] () { + return val.reifyElement() + }, + } + } else { + // The DOM element in question is something like a snapshot. It can be reified immediately + reifiedObjectOrArray[key] = val.reifyElement() + } + } else { + reifiedObjectOrArray[key] = reifyLogLikeFromSerialization(value, matchElementsAgainstSnapshotDOM) + } + }) + + // NOTE: transforms arrays into objects to have defined getters for DOM elements, and proxy back to that object via an ES6 Proxy. + if (_.isArray(props)) { + // if an array, map the array to our special getter object. + return new Proxy(reifiedObjectOrArray, { + get (target, name) { + return target[name] || props[name] + }, + }) + } + + // otherwise, just returned the object with our special getter + return reifiedObjectOrArray +} + /** * Attempts to take a generic data structure that is log-like and preprocess them for serialization. This generic may be/contain properties that are either * a) unserializable entirely @@ -123,45 +224,6 @@ const reifyDomElement = (props: any) => { */ export const preprocessLogLikeForSerialization = (props, attemptToSerializeFunctions = false) => { try { - if (_.isArray(props)) { - return props.map((prop) => { - try { - return preprocessLogLikeForSerialization(prop, attemptToSerializeFunctions) - } catch (e) { - return null - } - }) - } - - if (_.isPlainObject(props)) { - // only attempt to try and serialize dom elements and function (if attemptToSerializeFunctions is set to true) - let objWithPossiblySerializableProps = _.pickBy(props, (value) => { - const isSerializable = isSerializableInCurrentBrowser(value) - - if (!isSerializable && $dom.isDom(value) || _.isFunction(value) || _.isObject(value)) { - return true - } - - return false - }) - - let objWithOnlySerializableProps = _.pickBy(props, (value) => isSerializableInCurrentBrowser(value)) - - // assign the properties we know we can serialize here - let preprocessed: any = preprocessForSerialization(objWithOnlySerializableProps) - - // and attempt to serialize possibly unserializable props here and fail gracefully if unsuccessful - _.forIn(objWithPossiblySerializableProps, (value, key) => { - try { - preprocessed[key] = preprocessLogLikeForSerialization(value, attemptToSerializeFunctions) - } catch (e) { - preprocessed[key] = null - } - }) - - return preprocessed - } - if ($dom.isDom(props)) { if (props.length !== undefined && $dom.isJquery(props)) { const serializableArray: any[] = [] @@ -195,6 +257,10 @@ export const preprocessLogLikeForSerialization = (props, attemptToSerializeFunct return null } + if (_.isObject(props)) { + return preprocessObjectLikeForSerialization(props, attemptToSerializeFunctions) + } + return preprocessForSerialization(props) } catch (e) { return null @@ -213,11 +279,11 @@ export const preprocessLogLikeForSerialization = (props, attemptToSerializeFunct * NOTE: this function recursively calls itself to reify a log * * @param {any} props - a generic variable that represents a value that has been preprocessed and sent through postMessage() and needs to be reified. - * @param {boolean} matchElementsAgainstCurrentDOM - Whether or not the element should be reconstructed lazily + * @param {boolean} matchElementsAgainstSnapshotDOM - Whether or not the element should be reconstructed lazily * against the currently rendered DOM (usually against a rendered snapshot) or should be completely recreated from scratch (common with snapshots as they will replace the DOM) * @returns {any} the reified version of the generic. */ -export const reifyLogLikeFromSerialization = (props, matchElementsAgainstCurrentDOM = true) => { +export const reifyLogLikeFromSerialization = (props, matchElementsAgainstSnapshotDOM = true) => { try { if (props?.serializationKey === 'dom') { props.reifyElement = function () { @@ -226,7 +292,7 @@ export const reifyLogLikeFromSerialization = (props, matchElementsAgainstCurrent // If the element needs to be matched against the currently rendered DOM. This is useful when analyzing consoleProps or $el in a log // where elements need to be evaluated LAZILY after the snapshot is attached to the page. // this option is set to false when reifying snapshots, since they will be replacing the current DOM when the user interacts with said snapshot. - if (matchElementsAgainstCurrentDOM) { + if (matchElementsAgainstSnapshotDOM) { const attributes = Object.keys(props.attributes).map((attribute) => { return `[${attribute}="${props.attributes[attribute]}"]` }).join('') @@ -248,43 +314,13 @@ export const reifyLogLikeFromSerialization = (props, matchElementsAgainstCurrent } if (props?.serializationKey === 'function') { - const reifiedFunctionData = reifyLogLikeFromSerialization(props.value, matchElementsAgainstCurrentDOM) + const reifiedFunctionData = reifyLogLikeFromSerialization(props.value, matchElementsAgainstSnapshotDOM) return () => reifiedFunctionData } if (_.isObject(props)) { - let reifiedObjectOrArray = {} - - _.forIn(props, (value, key) => { - const val = reifyLogLikeFromSerialization(value, matchElementsAgainstCurrentDOM) - - if (val?.serializationKey === 'dom') { - reifiedObjectOrArray = { - ...reifiedObjectOrArray, - get [key] () { - // dynamically calculate the element (snapshot or otherwise). - // This is important for consoleProp/$el based properties on the log because it calculates the requested element AFTER the snapshot has been rendered into the AUT. - return val.reifyElement() - }, - } - } else { - reifiedObjectOrArray[key] = reifyLogLikeFromSerialization(value, matchElementsAgainstCurrentDOM) - } - }) - - // NOTE: transforms arrays into objects to have defined getters for DOM elements, and proxy back to that object via an ES6 Proxy. - if (_.isArray(props)) { - // if an array, map the array to our special getter object. - return new Proxy(reifiedObjectOrArray, { - get (target, name) { - return target[name] || props[name] - }, - }) - } - - // otherwise, just returned the object with our special getter - return reifiedObjectOrArray + return reifyObjectLikeForSerialization(props, matchElementsAgainstSnapshotDOM) } return props @@ -358,7 +394,7 @@ export const preprocessLogForSerialization = (logAttrs) => { } /** - * Re defines log messages being received in the primary domain before sending them out through the event-manager. + * Redefines log messages being received in the primary domain before sending them out through the event-manager. * * Efforts here include importing captured snapshots from the spec bridge into the primary snapshot document, importing inline * snapshot styles into the snapshot css map, and reconstructing DOM elements and functions somewhat naively. From 3ad89e7c815c8f330b94f4dbe7e5fd4acfb04902 Mon Sep 17 00:00:00 2001 From: Bill Glesias Date: Tue, 19 Apr 2022 11:49:33 -0400 Subject: [PATCH 47/54] update variables to metasyntactic --- .../integration/util/serialization_spec.ts | 72 +++++++++---------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/packages/driver/cypress/integration/util/serialization_spec.ts b/packages/driver/cypress/integration/util/serialization_spec.ts index 55eb4a23c0b0..3e0a43f3871e 100644 --- a/packages/driver/cypress/integration/util/serialization_spec.ts +++ b/packages/driver/cypress/integration/util/serialization_spec.ts @@ -7,7 +7,7 @@ describe('Log Serialization', () => { // populate some items into the mockSnapshot that would mimic what the DOM might actually look like, along with our inner snapshot element const mockContainer = document.createElement('div') const mockInnerHeader = document.createElement('h1') - const mockTextNode = document.createTextNode('Super Serial-izer') + const mockTextNode = document.createTextNode('Mock Snapshot Header') mockInnerHeader.appendChild(mockTextNode) mockContainer.appendChild(mockInnerHeader) @@ -48,7 +48,7 @@ describe('Log Serialization', () => { const mockLogAttrs = { $el: Cypress.$(mockClickedElement), alias: undefined, - chainerId: 'foobar.com:3500-3', + chainerId: 'mock-chainer-id', consoleProps: { ['Applied To']: mockClickedElement, Command: 'click', @@ -89,7 +89,7 @@ describe('Log Serialization', () => { event: false, highlightAttr: 'data-cypress-el', hookId: 'r4', - id: 'log-http://foobar.com:3500-8', + id: 'mock-log-id', instrument: 'command', message: '', name: 'click', @@ -102,7 +102,7 @@ describe('Log Serialization', () => { testId: 'r4', timeout: 4000, type: 'child', - url: 'http://www.foobar.com:3500/fixtures/dom.html', + url: 'http://www.foobar.com', viewportHeight: 660, viewportWidth: 1000, visible: true, @@ -113,14 +113,14 @@ describe('Log Serialization', () => { expect(logAttrs).to.deep.equal({ alias: undefined, - chainerId: 'foobar.com:3500-3', + chainerId: 'mock-chainer-id', coords: { top: 50, left: 50, topCenter: 100, leftCenter: 1000, x: 100, y: 50 }, ended: true, err: undefined, event: false, highlightAttr: 'data-cypress-el', hookId: 'r4', - id: 'log-http://foobar.com:3500-8', + id: 'mock-log-id', instrument: 'command', message: '', name: 'click', @@ -132,7 +132,7 @@ describe('Log Serialization', () => { testId: 'r4', timeout: 4000, type: 'child', - url: 'http://www.foobar.com:3500/fixtures/dom.html', + url: 'http://www.foobar.com', viewportHeight: 660, viewportWidth: 1000, visible: true, @@ -216,7 +216,7 @@ describe('Log Serialization', () => { serializationKey: 'function', value: [{ attributes: {}, - innerHTML: `

Super Serial-izer

`, + innerHTML: `

Mock Snapshot Header

`, serializationKey: 'dom', tagName: 'BODY', }], @@ -232,7 +232,7 @@ describe('Log Serialization', () => { serializationKey: 'function', value: [{ attributes: {}, - innerHTML: `

Super Serial-izer

`, + innerHTML: `

Mock Snapshot Header

`, serializationKey: 'dom', tagName: 'BODY', }], @@ -256,7 +256,7 @@ describe('Log Serialization', () => { }, ], alias: undefined, - chainerId: 'foobar.com:3500-3', + chainerId: 'mock-chainer-id', consoleProps: { ['Applied To']: { attributes: { @@ -319,7 +319,7 @@ describe('Log Serialization', () => { event: false, highlightAttr: 'data-cypress-el', hookId: 'r4', - id: 'log-http://foobar.com:3500-8', + id: 'mock-log-id', instrument: 'command', message: '', name: 'click', @@ -336,7 +336,7 @@ describe('Log Serialization', () => { serializationKey: 'function', value: [{ attributes: {}, - innerHTML: `

Super Serial-izer

`, + innerHTML: `

Mock Snapshot Header

`, serializationKey: 'dom', tagName: 'BODY', }], @@ -352,7 +352,7 @@ describe('Log Serialization', () => { serializationKey: 'function', value: [{ attributes: {}, - innerHTML: `

Super Serial-izer

`, + innerHTML: `

Mock Snapshot Header

`, serializationKey: 'dom', tagName: 'BODY', }], @@ -365,7 +365,7 @@ describe('Log Serialization', () => { testId: 'r4', timeout: 4000, type: 'child', - url: 'http://www.foobar.com:3500/fixtures/dom.html', + url: 'http://www.foobar.com', viewportHeight: 660, viewportWidth: 1000, visible: true, @@ -376,14 +376,14 @@ describe('Log Serialization', () => { expect(logAttrs).to.deep.equal({ alias: undefined, - chainerId: 'foobar.com:3500-3', + chainerId: 'mock-chainer-id', coords: { top: 50, left: 50, topCenter: 100, leftCenter: 1000, x: 100, y: 50 }, ended: true, err: undefined, event: false, highlightAttr: 'data-cypress-el', hookId: 'r4', - id: 'log-http://foobar.com:3500-8', + id: 'mock-log-id', instrument: 'command', message: '', name: 'click', @@ -395,7 +395,7 @@ describe('Log Serialization', () => { testId: 'r4', timeout: 4000, type: 'child', - url: 'http://www.foobar.com:3500/fixtures/dom.html', + url: 'http://www.foobar.com', viewportHeight: 660, viewportWidth: 1000, visible: true, @@ -470,7 +470,7 @@ describe('Log Serialization', () => { foo: 'bar', }) - expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`

Super Serial-izer

`) + expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`

Mock Snapshot Header

`) }) it('reifies', () => { @@ -480,7 +480,7 @@ describe('Log Serialization', () => { attributes: { foo: 'bar', }, - innerHTML: `

Super Serial-izer

`, + innerHTML: `

Mock Snapshot Header

`, } const reifiedSnapshot = reifyDomElement(preprocessedSnapshot) @@ -495,8 +495,8 @@ describe('Log Serialization', () => { it('preprocess', () => { const selectElement = document.createElement('select') - selectElement.id = 'strickland-propane' - selectElement.name = 'Strickland Propane Staff Members' + selectElement.id = 'metasyntactic-variables' + selectElement.name = 'Metasyntactic Variables' const options = ['Hank Hill', 'Buck Strickland', 'Donna', 'Old Donna'].map((val) => { const option = document.createElement('option') @@ -516,7 +516,7 @@ describe('Log Serialization', () => { expect(preprocessedSnapshot).to.have.property('tagName').that.equals('BODY') expect(preprocessedSnapshot).to.have.property('serializationKey').that.equals('dom') - expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`

Super Serial-izer

`) + expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`

Mock Snapshot Header

`) }) it('reifies', () => { @@ -524,13 +524,13 @@ describe('Log Serialization', () => { tagName: 'BODY', serializationKey: 'dom', attributes: {}, - innerHTML: `

Super Serial-izer

`, + innerHTML: `

Mock Snapshot Header

`, } const reifiedSnapshot = reifyDomElement(preprocessedSnapshot) expect(reifiedSnapshot).to.be.instanceOf(HTMLBodyElement) - expect(reifiedSnapshot.querySelector('select#strickland-propane option[selected]')).to.have.property('value').that.equals('Buck Strickland') + expect(reifiedSnapshot.querySelector('select#metasyntactic-variables option[selected]')).to.have.property('value').that.equals('Buck Strickland') }) }) @@ -540,7 +540,7 @@ describe('Log Serialization', () => { textAreaElement.rows = 4 textAreaElement.cols = 20 - textAreaElement.value = 'Provide the community with propane and propane accessories' + textAreaElement.value = 'Generic variable names that function as placeholders' const snapshot = buildSnapshot(textAreaElement) @@ -548,7 +548,7 @@ describe('Log Serialization', () => { expect(preprocessedSnapshot).to.have.property('tagName').that.equals('BODY') expect(preprocessedSnapshot).to.have.property('serializationKey').that.equals('dom') - expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`

Super Serial-izer

`) + expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`

Mock Snapshot Header

`) }) it('reifies', () => { @@ -556,13 +556,13 @@ describe('Log Serialization', () => { tagName: 'BODY', serializationKey: 'dom', attributes: {}, - innerHTML: `

Super Serial-izer

`, + innerHTML: `

Mock Snapshot Header

`, } const reifiedSnapshot = reifyDomElement(preprocessedSnapshot) expect(reifiedSnapshot).to.be.instanceOf(HTMLBodyElement) - expect(reifiedSnapshot.querySelector('textarea[rows="4"]')).to.have.property('textContent').that.equals('Provide the community with propane and propane accessories') + expect(reifiedSnapshot.querySelector('textarea[rows="4"]')).to.have.property('textContent').that.equals('Generic variable names that function as placeholders') }) }) @@ -570,7 +570,7 @@ describe('Log Serialization', () => { it('preprocess', () => { const formElement = document.createElement('form') - const radioInputs = ['Dale', 'Boomhauer', 'Bill'].map((val) => { + const radioInputs = ['foo', 'bar', 'baz'].map((val) => { const radioInput = document.createElement('input') radioInput.type = 'radio' @@ -589,7 +589,7 @@ describe('Log Serialization', () => { expect(preprocessedSnapshot).to.have.property('tagName').that.equals('BODY') expect(preprocessedSnapshot).to.have.property('serializationKey').that.equals('dom') - expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`

Super Serial-izer

`) + expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`

Mock Snapshot Header

`) }) it('reifies', () => { @@ -597,13 +597,13 @@ describe('Log Serialization', () => { tagName: 'BODY', serializationKey: 'dom', attributes: {}, - innerHTML: `

Super Serial-izer

`, + innerHTML: `

Mock Snapshot Header

`, } const reifiedSnapshot = reifyDomElement(preprocessedSnapshot) expect(reifiedSnapshot).to.be.instanceOf(HTMLBodyElement) - expect(reifiedSnapshot.querySelector('form input[value="Boomhauer"]')).to.have.property('checked').that.equals(true) + expect(reifiedSnapshot.querySelector('form input[value="bar"]')).to.have.property('checked').that.equals(true) }) }) @@ -611,7 +611,7 @@ describe('Log Serialization', () => { it('preprocess', () => { const formElement = document.createElement('form') - const checkboxInputs = ['Dale', 'Boomhauer', 'Bill'].map((val) => { + const checkboxInputs = ['foo', 'bar', 'bar'].map((val) => { const checkboxInput = document.createElement('input') checkboxInput.type = 'checkbox' @@ -630,7 +630,7 @@ describe('Log Serialization', () => { expect(preprocessedSnapshot).to.have.property('tagName').that.equals('BODY') expect(preprocessedSnapshot).to.have.property('serializationKey').that.equals('dom') - expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`

Super Serial-izer

`) + expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`

Mock Snapshot Header

`) }) it('reifies', () => { @@ -638,13 +638,13 @@ describe('Log Serialization', () => { tagName: 'BODY', serializationKey: 'dom', attributes: {}, - innerHTML: `"

Super Serial-izer

"`, + innerHTML: `"

Mock Snapshot Header

"`, } const reifiedSnapshot = reifyDomElement(preprocessedSnapshot) expect(reifiedSnapshot).to.be.instanceOf(HTMLBodyElement) - expect(reifiedSnapshot.querySelector('form input[value="Boomhauer"]')).to.have.property('checked').that.equals(true) + expect(reifiedSnapshot.querySelector('form input[value="bar"]')).to.have.property('checked').that.equals(true) }) }) }) From 3a1bc844617f7a436e362ea1d3ab99b9ac43e916 Mon Sep 17 00:00:00 2001 From: Bill Glesias Date: Tue, 19 Apr 2022 11:52:39 -0400 Subject: [PATCH 48/54] add renderProps assertion for cy.request --- .../commands/multi_domain_network_requests.spec.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_network_requests.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_network_requests.spec.ts index bd9a51ab09f7..d31f1b8eb69f 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_network_requests.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_network_requests.spec.ts @@ -50,7 +50,7 @@ context('cy.origin network requests', () => { }) cy.shouldWithTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('request', logs, 'foobar.com') + const { consoleProps, crossOriginLog, renderProps } = findCrossOriginLogs('request', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -67,6 +67,9 @@ context('cy.origin network requests', () => { expect(consoleProps.Yielded).to.have.property('duration').that.is.a('number') expect(consoleProps.Yielded).to.have.property('headers').that.is.a('object') expect(consoleProps.Yielded).to.have.property('status').that.equals(200) + + expect(renderProps).to.have.property('indicator').that.equals('successful') + expect(renderProps).to.have.property('message').that.equals('GET 200 http://www.foobar.com:3500/fixtures/example.json') }) }) }) From c1989eaf2468cb50e79b54aa384c579a41b3d18c Mon Sep 17 00:00:00 2001 From: Bill Glesias Date: Tue, 19 Apr 2022 12:09:44 -0400 Subject: [PATCH 49/54] apply suggestions from code review to clean up log serializer --- packages/driver/src/util/serialization/log.ts | 20 +++++-------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/packages/driver/src/util/serialization/log.ts b/packages/driver/src/util/serialization/log.ts index 4917ad90640a..638595f59390 100644 --- a/packages/driver/src/util/serialization/log.ts +++ b/packages/driver/src/util/serialization/log.ts @@ -112,13 +112,7 @@ export const reifyDomElement = (props: any) => { */ export const preprocessObjectLikeForSerialization = (props, attemptToSerializeFunctions = false) => { if (_.isArray(props)) { - return props.map((prop) => { - try { - return preprocessLogLikeForSerialization(prop, attemptToSerializeFunctions) - } catch (e) { - return null - } - }) + return props.map((prop) => preprocessLogLikeForSerialization(prop, attemptToSerializeFunctions)) } if (_.isPlainObject(props)) { @@ -140,11 +134,7 @@ export const preprocessObjectLikeForSerialization = (props, attemptToSerializeFu // and attempt to serialize possibly unserializable props here and fail gracefully if unsuccessful _.forIn(objWithPossiblySerializableProps, (value, key) => { - try { - preprocessed[key] = preprocessLogLikeForSerialization(value, attemptToSerializeFunctions) - } catch (e) { - preprocessed[key] = null - } + preprocessed[key] = preprocessLogLikeForSerialization(value, attemptToSerializeFunctions) }) return preprocessed @@ -204,7 +194,7 @@ export const reifyObjectLikeForSerialization = (props, matchElementsAgainstSnaps } /** - * Attempts to take a generic data structure that is log-like and preprocess them for serialization. This generic may be/contain properties that are either + * Attempts to take a generic data structure that is log-like and preprocess them for serialization. This generic may contain properties that are either * a) unserializable entirely * b) unserializable natively but can be processed to a serializable form (DOM elements or Functions) * c) serializable @@ -235,9 +225,9 @@ export const preprocessLogLikeForSerialization = (props, attemptToSerializeFunct } // otherwise, preprocess the element to an object with pertinent DOM properties - const serializableDOM = preprocessDomElement(props) + const serializedDom = preprocessDomElement(props) - return serializableDOM + return serializedDom } /** From e13870f87455aea9a9d038555091bd1e5b188bca Mon Sep 17 00:00:00 2001 From: Bill Glesias Date: Tue, 19 Apr 2022 12:20:33 -0400 Subject: [PATCH 50/54] make snapshot serialization more generic and typesafe --- packages/driver/src/util/serialization/log.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/driver/src/util/serialization/log.ts b/packages/driver/src/util/serialization/log.ts index 638595f59390..83323f74f977 100644 --- a/packages/driver/src/util/serialization/log.ts +++ b/packages/driver/src/util/serialization/log.ts @@ -327,17 +327,15 @@ export const reifyLogLikeFromSerialization = (props, matchElementsAgainstSnapsho * @returns a serializable form of a snapshot, including a serializable with styles */ export const preprocessSnapshotForSerialization = (snapshot) => { - const preprocessedSnapshot = preprocessLogLikeForSerialization(snapshot, true) - try { - preprocessedSnapshot.body.get.value[0] = preprocessLogLikeForSerialization(snapshot.body.get()[0]) + const preprocessedSnapshot = preprocessLogLikeForSerialization(snapshot, true) + + preprocessedSnapshot.styles = cy.getStyles(snapshot) + + return preprocessedSnapshot } catch (e) { return null } - - preprocessedSnapshot.styles = cy.getStyles(snapshot) - - return preprocessedSnapshot } /** From 5349974a9dc30db04c90dbccf501532a0a8ba274 Mon Sep 17 00:00:00 2001 From: Bill Glesias Date: Tue, 19 Apr 2022 14:04:53 -0400 Subject: [PATCH 51/54] 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 --- .../commands/multi_domain_actions.spec.ts | 78 +++++++++++++ .../commands/multi_domain_assertions.spec.ts | 6 + .../commands/multi_domain_connectors.spec.ts | 12 ++ .../commands/multi_domain_misc.spec.ts | 12 ++ .../commands/multi_domain_querying.spec.ts | 12 ++ .../multi_domain_querying_shadow.spec.ts | 6 + .../commands/multi_domain_traversal.spec.ts | 108 ++++++++++++++++++ 7 files changed, 234 insertions(+) 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 index 9c86c68210d8..322a532a15ed 100644 --- 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 @@ -255,6 +255,12 @@ context('cy.origin actions', () => { }) 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 { alias, aliasType, consoleProps, $el, crossOriginLog } = findCrossOriginLogs('click', logs, 'foobar.com') expect($el.jquery).to.be.ok @@ -303,6 +309,12 @@ context('cy.origin actions', () => { }) 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, crossOriginLog } = findCrossOriginLogs('dblclick', logs, 'foobar.com') expect($el.jquery).to.be.ok @@ -346,6 +358,12 @@ context('cy.origin actions', () => { }) 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, crossOriginLog } = findCrossOriginLogs('rightclick', logs, 'foobar.com') expect($el.jquery).to.be.ok @@ -389,6 +407,12 @@ context('cy.origin actions', () => { }) 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 { alias, aliasType, consoleProps, $el, crossOriginLog } = findCrossOriginLogs('type', logs, 'foobar.com') expect($el.jquery).to.be.ok @@ -457,6 +481,12 @@ context('cy.origin actions', () => { }) 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, crossOriginLog } = findCrossOriginLogs('submit', logs, 'foobar.com') expect($el.jquery).to.be.ok @@ -485,6 +515,12 @@ context('cy.origin actions', () => { }) 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, crossOriginLog } = findCrossOriginLogs('focus', logs, 'foobar.com') expect($el.jquery).to.be.ok @@ -504,6 +540,12 @@ context('cy.origin actions', () => { }) 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, crossOriginLog } = findCrossOriginLogs('blur', logs, 'foobar.com') expect($el.jquery).to.be.ok @@ -523,6 +565,12 @@ context('cy.origin actions', () => { }) 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, crossOriginLog } = findCrossOriginLogs('clear', logs, 'foobar.com') expect($el.jquery).to.be.ok @@ -543,6 +591,12 @@ context('cy.origin actions', () => { }) 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, crossOriginLog } = findCrossOriginLogs('check', logs, 'foobar.com') expect($el.jquery).to.be.ok @@ -583,6 +637,12 @@ context('cy.origin actions', () => { }) 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, crossOriginLog } = findCrossOriginLogs('uncheck', logs, 'foobar.com') expect($el.jquery).to.be.ok @@ -623,6 +683,12 @@ context('cy.origin actions', () => { }) 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, crossOriginLog } = findCrossOriginLogs('select', logs, 'foobar.com') expect($el.jquery).to.be.ok @@ -666,6 +732,12 @@ context('cy.origin actions', () => { }) 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, crossOriginLog } = findCrossOriginLogs('scrollIntoView', logs, 'foobar.com') expect($el.jquery).to.be.ok @@ -733,6 +805,12 @@ context('cy.origin actions', () => { }) 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, crossOriginLog } = findCrossOriginLogs('selectFile', logs, 'foobar.com') expect($el.jquery).to.be.ok diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_assertions.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_assertions.spec.ts index 3bb50159926e..e1ba68e59b5d 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_assertions.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_assertions.spec.ts @@ -31,6 +31,12 @@ context('cy.origin assertions', () => { }) 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 not to be checked') diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts index 710e710bc124..36dcc755f574 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts @@ -63,6 +63,12 @@ context('cy.origin connectors', () => { }) 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, crossOriginLog } = findCrossOriginLogs('its', logs, 'foobar.com') expect($el.jquery).to.be.ok @@ -92,6 +98,12 @@ context('cy.origin connectors', () => { }) 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, crossOriginLog } = findCrossOriginLogs('invoke', logs, 'foobar.com') expect($el.jquery).to.be.ok diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts index 4b33a02eed58..c4874b3890aa 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts @@ -94,6 +94,12 @@ context('cy.origin misc', () => { }) 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, crossOriginLog } = findCrossOriginLogs('focused', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -134,6 +140,12 @@ context('cy.origin misc', () => { }) 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, crossOriginLog } = findCrossOriginLogs('debug', logs, 'foobar.com') expect(crossOriginLog).to.be.true diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying.spec.ts index 2e8b3f0026f7..424c20a7b0ba 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying.spec.ts @@ -49,6 +49,12 @@ context('cy.origin querying', () => { }) 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 { crossOriginLog, consoleProps } = findCrossOriginLogs('contains', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -70,6 +76,12 @@ context('cy.origin querying', () => { }) 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 { crossOriginLog, consoleProps } = findCrossOriginLogs('within', logs, 'foobar.com') expect(crossOriginLog).to.be.true diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying_shadow.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying_shadow.spec.ts index 0286751dd931..21ef5d52d0df 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying_shadow.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying_shadow.spec.ts @@ -30,6 +30,12 @@ context('cy.origin shadow dom', () => { }) 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, crossOriginLog } = findCrossOriginLogs('shadow', logs, 'foobar.com') expect(crossOriginLog).to.be.true diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_traversal.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_traversal.spec.ts index beb378ffd0fe..998759da2ac6 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_traversal.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_traversal.spec.ts @@ -133,6 +133,12 @@ context('cy.origin traversal', () => { }) 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, crossOriginLog } = findCrossOriginLogs('children', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -157,6 +163,12 @@ context('cy.origin traversal', () => { }) 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, crossOriginLog } = findCrossOriginLogs('closest', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -179,6 +191,12 @@ context('cy.origin traversal', () => { }) 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, crossOriginLog } = findCrossOriginLogs('eq', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -205,6 +223,12 @@ context('cy.origin traversal', () => { }) 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, crossOriginLog } = findCrossOriginLogs('filter', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -229,6 +253,12 @@ context('cy.origin traversal', () => { }) 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, crossOriginLog } = findCrossOriginLogs('find', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -256,6 +286,12 @@ context('cy.origin traversal', () => { }) 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, crossOriginLog } = findCrossOriginLogs('first', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -283,6 +319,12 @@ context('cy.origin traversal', () => { }) 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, crossOriginLog } = findCrossOriginLogs('last', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -310,6 +352,12 @@ context('cy.origin traversal', () => { }) 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, crossOriginLog } = findCrossOriginLogs('next', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -332,6 +380,12 @@ context('cy.origin traversal', () => { }) 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, crossOriginLog } = findCrossOriginLogs('nextAll', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -357,6 +411,12 @@ context('cy.origin traversal', () => { }) 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, crossOriginLog } = findCrossOriginLogs('nextUntil', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -379,6 +439,12 @@ context('cy.origin traversal', () => { }) 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, crossOriginLog } = findCrossOriginLogs('not', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -409,6 +475,12 @@ context('cy.origin traversal', () => { }) 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, crossOriginLog } = findCrossOriginLogs('parent', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -431,6 +503,12 @@ context('cy.origin traversal', () => { }) 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, crossOriginLog } = findCrossOriginLogs('parents', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -456,6 +534,12 @@ context('cy.origin traversal', () => { }) 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, crossOriginLog } = findCrossOriginLogs('parentsUntil', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -478,6 +562,12 @@ context('cy.origin traversal', () => { }) 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, crossOriginLog } = findCrossOriginLogs('prev', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -500,6 +590,12 @@ context('cy.origin traversal', () => { }) 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, crossOriginLog } = findCrossOriginLogs('prevAll', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -525,6 +621,12 @@ context('cy.origin traversal', () => { }) 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, crossOriginLog } = findCrossOriginLogs('prevUntil', logs, 'foobar.com') expect(crossOriginLog).to.be.true @@ -547,6 +649,12 @@ context('cy.origin traversal', () => { }) 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, crossOriginLog } = findCrossOriginLogs('siblings', logs, 'foobar.com') expect(crossOriginLog).to.be.true From c264f206d6ffcdfec536f4e2800f20b9a59bfcf6 Mon Sep 17 00:00:00 2001 From: Bill Glesias Date: Tue, 19 Apr 2022 15:34:55 -0400 Subject: [PATCH 52/54] clean up code and implement suggestions in code review --- packages/driver/src/multi-domain/cypress.ts | 4 ++-- packages/driver/types/spec-types.d.ts | 2 +- packages/runner-shared/src/iframe/iframe-model.js | 6 +++--- packages/runner/index.d.ts | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/driver/src/multi-domain/cypress.ts b/packages/driver/src/multi-domain/cypress.ts index 8a0637c51893..5a8d8cfb9425 100644 --- a/packages/driver/src/multi-domain/cypress.ts +++ b/packages/driver/src/multi-domain/cypress.ts @@ -33,10 +33,10 @@ const createCypress = () => { }) Cypress.specBridgeCommunicator.on('generate:final:snapshot', (snapshotUrl: string) => { - const specBridgeLocation = $Location.create(window.location.href) + const currentAutOriginPolicy = cy.state('autOrigin') const requestedSnapshotUrlLocation = $Location.create(snapshotUrl) - if (requestedSnapshotUrlLocation.originPolicy === specBridgeLocation.originPolicy) { + if (requestedSnapshotUrlLocation.originPolicy === currentAutOriginPolicy) { // if true, this is the correct specbridge to take the snapshot and send it back const finalSnapshot = cy.createSnapshot(FINAL_SNAPSHOT_NAME) diff --git a/packages/driver/types/spec-types.d.ts b/packages/driver/types/spec-types.d.ts index 87b78ff46ce0..c0ebdbfc6d2a 100644 --- a/packages/driver/types/spec-types.d.ts +++ b/packages/driver/types/spec-types.d.ts @@ -5,4 +5,4 @@ declare namespace Cypress { getAll(...aliases: string[]): Chainable shouldWithTimeout(cb: (subj: {}) => void, timeout?: number): Chainable } -} \ No newline at end of file +} diff --git a/packages/runner-shared/src/iframe/iframe-model.js b/packages/runner-shared/src/iframe/iframe-model.js index 659f7cd49ef6..fca3665fb22c 100644 --- a/packages/runner-shared/src/iframe/iframe-model.js +++ b/packages/runner-shared/src/iframe/iframe-model.js @@ -93,7 +93,7 @@ export class IframeModel { this.state.highlightUrl = true if (!this.originalState) { - this._storeOriginalState(snapshotProps?.url) + this._storeOriginalState() } this.detachedId = snapshotProps.id @@ -218,7 +218,7 @@ export class IframeModel { this.state.messageType = 'warning' } - _storeOriginalState (snapshotUrl) { + _storeOriginalState () { if (!this.isAUTSameOrigin()) { const Cypress = eventManager.getCypress() @@ -227,7 +227,7 @@ export class IframeModel { * In this case, the final snapshot request from the primary is sent out to the cross-origin spec bridges. * The spec bridge that matches the origin policy will take a snapshot and send it back to the primary for the runner to store in originalState. */ - Cypress.primaryOriginCommunicator.toAllSpecBridges('generate:final:snapshot', snapshotUrl) + Cypress.primaryOriginCommunicator.toAllSpecBridges('generate:final:snapshot', this.state.url) Cypress.primaryOriginCommunicator.once('final:snapshot:generated', (finalSnapshot) => { this.originalState = { body: finalSnapshot.body, diff --git a/packages/runner/index.d.ts b/packages/runner/index.d.ts index 9ff7932a774c..8e559dc28663 100644 --- a/packages/runner/index.d.ts +++ b/packages/runner/index.d.ts @@ -8,4 +8,4 @@ /// /// -/// \ No newline at end of file +/// From 6926bfe86f6beac10a554c5bbbd7eb14934adfaf Mon Sep 17 00:00:00 2001 From: Bill Glesias Date: Tue, 19 Apr 2022 17:03:17 -0400 Subject: [PATCH 53/54] remove crossOriginLog in favor of nullish coalescing if visible on the log is not set --- .../commands/multi_domain_actions.spec.ts | 51 +++++--------- .../commands/multi_domain_aliasing.spec.ts | 3 +- .../commands/multi_domain_assertions.spec.ts | 3 +- .../commands/multi_domain_connectors.spec.ts | 6 +- .../commands/multi_domain_cookies.spec.ts | 20 ++---- .../commands/multi_domain_files.spec.ts | 8 +-- .../multi_domain_local_storage.spec.ts | 3 +- .../commands/multi_domain_location.spec.ts | 9 +-- .../commands/multi_domain_misc.spec.ts | 24 ++----- .../commands/multi_domain_navigation.spec.ts | 9 +-- .../multi_domain_network_requests.spec.ts | 4 +- .../commands/multi_domain_querying.spec.ts | 12 +--- .../multi_domain_querying_shadow.spec.ts | 4 +- .../commands/multi_domain_screenshot.spec.ts | 4 +- .../multi_domain_spies_stubs_clocks.spec.ts | 4 -- .../commands/multi_domain_traversal.spec.ts | 69 +++++-------------- .../commands/multi_domain_viewport.spec.ts | 3 +- .../commands/multi_domain_waiting.spec.ts | 3 +- .../commands/multi_domain_window.spec.ts | 9 +-- .../integration/util/serialization_spec.ts | 4 +- packages/driver/src/cypress/log.ts | 2 +- packages/driver/src/util/serialization/log.ts | 3 - 22 files changed, 72 insertions(+), 185 deletions(-) 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 index 322a532a15ed..f9cfa8d66907 100644 --- 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 @@ -207,11 +207,10 @@ context('cy.origin actions', () => { }) cy.shouldWithTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('get', logs, 'foobar.com') + const { 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(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('get') expect(consoleProps.Elements).to.equal(1) @@ -230,11 +229,10 @@ context('cy.origin actions', () => { }) cy.shouldWithTimeout(() => { - const { alias, aliasType, consoleProps, $el, crossOriginLog } = findCrossOriginLogs('get', logs, 'foobar.com') + 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(crossOriginLog).to.be.true expect(alias).to.equal('buttonAlias') expect(aliasType).to.equal('dom') @@ -261,10 +259,9 @@ context('cy.origin actions', () => { cy.state('document', undefined) } - const { alias, aliasType, consoleProps, $el, crossOriginLog } = findCrossOriginLogs('click', logs, 'foobar.com') + const { alias, aliasType, consoleProps, $el } = findCrossOriginLogs('click', logs, 'foobar.com') expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true expect(alias).to.equal(undefined) expect(aliasType).to.equal(undefined) @@ -315,10 +312,9 @@ context('cy.origin actions', () => { cy.state('document', undefined) } - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('dblclick', logs, 'foobar.com') + const { consoleProps, $el } = findCrossOriginLogs('dblclick', logs, 'foobar.com') expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('dblclick') expect(consoleProps.Elements).to.equal(1) @@ -364,10 +360,9 @@ context('cy.origin actions', () => { cy.state('document', undefined) } - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('rightclick', logs, 'foobar.com') + const { consoleProps, $el } = findCrossOriginLogs('rightclick', logs, 'foobar.com') expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('rightclick') expect(consoleProps.Elements).to.equal(1) @@ -413,10 +408,9 @@ context('cy.origin actions', () => { cy.state('document', undefined) } - const { alias, aliasType, consoleProps, $el, crossOriginLog } = findCrossOriginLogs('type', logs, 'foobar.com') + const { alias, aliasType, consoleProps, $el } = findCrossOriginLogs('type', logs, 'foobar.com') expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true expect(alias).to.equal(undefined) expect(aliasType).to.equal(undefined) @@ -487,10 +481,9 @@ context('cy.origin actions', () => { cy.state('document', undefined) } - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('submit', logs, 'foobar.com') + const { consoleProps, $el } = findCrossOriginLogs('submit', logs, 'foobar.com') expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('submit') expect(consoleProps.Elements).to.equal(1) @@ -521,10 +514,9 @@ context('cy.origin actions', () => { cy.state('document', undefined) } - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('focus', logs, 'foobar.com') + const { consoleProps, $el } = findCrossOriginLogs('focus', logs, 'foobar.com') expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('focus') expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') @@ -546,10 +538,9 @@ context('cy.origin actions', () => { cy.state('document', undefined) } - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('blur', logs, 'foobar.com') + const { consoleProps, $el } = findCrossOriginLogs('blur', logs, 'foobar.com') expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('blur') expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') @@ -571,10 +562,9 @@ context('cy.origin actions', () => { cy.state('document', undefined) } - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('clear', logs, 'foobar.com') + const { consoleProps, $el } = findCrossOriginLogs('clear', logs, 'foobar.com') expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('clear') expect(consoleProps.Elements).to.equal(1) @@ -597,10 +587,9 @@ context('cy.origin actions', () => { cy.state('document', undefined) } - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('check', logs, 'foobar.com') + const { consoleProps, $el } = findCrossOriginLogs('check', logs, 'foobar.com') expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('check') expect(consoleProps.Elements).to.equal(1) @@ -643,10 +632,9 @@ context('cy.origin actions', () => { cy.state('document', undefined) } - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('uncheck', logs, 'foobar.com') + const { consoleProps, $el } = findCrossOriginLogs('uncheck', logs, 'foobar.com') expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('uncheck') expect(consoleProps.Elements).to.equal(1) @@ -689,10 +677,9 @@ context('cy.origin actions', () => { cy.state('document', undefined) } - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('select', logs, 'foobar.com') + const { consoleProps, $el } = findCrossOriginLogs('select', logs, 'foobar.com') expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('select') expect(consoleProps.Elements).to.equal(1) @@ -738,10 +725,9 @@ context('cy.origin actions', () => { cy.state('document', undefined) } - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('scrollIntoView', logs, 'foobar.com') + const { consoleProps, $el } = findCrossOriginLogs('scrollIntoView', logs, 'foobar.com') expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('scrollIntoView') @@ -759,10 +745,9 @@ context('cy.origin actions', () => { }) cy.shouldWithTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('scrollTo', logs, 'foobar.com') + const { consoleProps, $el } = findCrossOriginLogs('scrollTo', logs, 'foobar.com') expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('scrollTo') expect(consoleProps.X).to.equal(0) @@ -779,10 +764,9 @@ context('cy.origin actions', () => { }) cy.shouldWithTimeout(() => { - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('trigger', logs, 'foobar.com') + const { consoleProps, $el } = findCrossOriginLogs('trigger', logs, 'foobar.com') expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('trigger') expect(consoleProps['Event options']).to.have.property('bubbles').that.is.a('boolean') @@ -811,10 +795,9 @@ context('cy.origin actions', () => { cy.state('document', undefined) } - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('selectFile', logs, 'foobar.com') + const { consoleProps, $el } = findCrossOriginLogs('selectFile', logs, 'foobar.com') expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('selectFile') expect(consoleProps.Elements).to.equal(1) 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 index 057bc0b44c9d..467afbbb15a8 100644 --- 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 @@ -30,11 +30,10 @@ context('cy.origin aliasing', () => { }) cy.shouldWithTimeout(() => { - const { alias, aliasType, consoleProps, $el, crossOriginLog } = findCrossOriginLogs('get', logs, 'foobar.com') + 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(crossOriginLog).to.be.true expect(alias).to.equal('buttonAlias') expect(aliasType).to.equal('dom') diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_assertions.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_assertions.spec.ts index e1ba68e59b5d..b1af03342e11 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_assertions.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_assertions.spec.ts @@ -42,9 +42,8 @@ context('cy.origin assertions', () => { expect(assertionLogs[0].consoleProps.Message).to.equal('expected not to be checked') expect(assertionLogs[1].consoleProps.Message).to.equal('expected not to be disabled') - assertionLogs.forEach(({ $el, crossOriginLog, consoleProps }) => { + assertionLogs.forEach(({ $el, consoleProps }) => { expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('assert') expect(consoleProps.subject[0]).to.have.property('tagName').that.equals('INPUT') diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts index 36dcc755f574..6b94fc87c3a8 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_connectors.spec.ts @@ -69,10 +69,9 @@ context('cy.origin connectors', () => { cy.state('document', undefined) } - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('its', logs, 'foobar.com') + const { consoleProps, $el } = findCrossOriginLogs('its', logs, 'foobar.com') expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('its') expect(consoleProps.Property).to.equal('.length') @@ -104,10 +103,9 @@ context('cy.origin connectors', () => { cy.state('document', undefined) } - const { consoleProps, $el, crossOriginLog } = findCrossOriginLogs('invoke', logs, 'foobar.com') + const { consoleProps, $el } = findCrossOriginLogs('invoke', logs, 'foobar.com') expect($el.jquery).to.be.ok - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('invoke') expect(consoleProps.Function).to.equal('.text()') 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 index f551556829a8..ce088c50c29a 100644 --- 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 @@ -57,9 +57,7 @@ context('cy.origin cookies', () => { }) cy.shouldWithTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('getCookie', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('getCookie', logs, 'foobar.com') expect(consoleProps.Command).to.equal('getCookie') expect(consoleProps.Yielded).to.have.property('domain').that.includes('foobar.com') @@ -84,9 +82,7 @@ context('cy.origin cookies', () => { // get the last 'getCookies' command, which is the one we care about for this test const allGetCookieLogs = findCrossOriginLogs('getCookies', logs, 'foobar.com') - const { crossOriginLog, consoleProps } = allGetCookieLogs.pop() as any - - expect(crossOriginLog).to.be.true + const { consoleProps } = allGetCookieLogs.pop() as any expect(consoleProps.Command).to.equal('getCookies') expect(consoleProps['Num Cookies']).to.equal(1) @@ -110,9 +106,7 @@ context('cy.origin cookies', () => { }) cy.shouldWithTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('setCookie', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('setCookie', logs, 'foobar.com') expect(consoleProps.Command).to.equal('setCookie') expect(consoleProps.Yielded).to.have.property('domain').that.includes('foobar.com') @@ -133,9 +127,7 @@ context('cy.origin cookies', () => { }) cy.shouldWithTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('clearCookie', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('clearCookie', logs, 'foobar.com') expect(consoleProps.Command).to.equal('clearCookie') expect(consoleProps.Yielded).to.equal('null') @@ -159,9 +151,7 @@ context('cy.origin cookies', () => { }) cy.shouldWithTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('clearCookies', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('clearCookies', logs, 'foobar.com') expect(consoleProps.Command).to.equal('clearCookies') expect(consoleProps['Num Cookies']).to.equal(2) 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 index c3f5660ecdf0..b741e55e2ac6 100644 --- 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 @@ -64,9 +64,7 @@ context('cy.origin files', () => { }) cy.shouldWithTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('readFile', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('readFile', logs, 'foobar.com') expect(consoleProps.Command).to.equal('readFile') expect(consoleProps['File Path']).to.include('cypress/fixtures/example.json') @@ -87,9 +85,7 @@ context('cy.origin files', () => { }) cy.shouldWithTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('writeFile', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('writeFile', logs, 'foobar.com') expect(consoleProps.Command).to.equal('writeFile') expect(consoleProps['File Path']).to.equal('foo.json') diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_local_storage.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_local_storage.spec.ts index b23d4b63b4e5..4ca617ef20d3 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_local_storage.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_local_storage.spec.ts @@ -42,9 +42,8 @@ context('cy.origin local storage', () => { }) cy.shouldWithTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('clearLocalStorage', logs, 'foobar.com') + const { consoleProps } = findCrossOriginLogs('clearLocalStorage', logs, 'foobar.com') - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('clearLocalStorage') expect(consoleProps.Yielded).to.be.null }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_location.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_location.spec.ts index fff9c176a237..cb920a1daa55 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_location.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_location.spec.ts @@ -44,9 +44,8 @@ context('cy.origin location', () => { }) cy.shouldWithTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('hash', logs, 'foobar.com') + const { consoleProps } = findCrossOriginLogs('hash', logs, 'foobar.com') - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('hash') }) }) @@ -57,9 +56,8 @@ context('cy.origin location', () => { }) cy.shouldWithTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('location', logs, 'foobar.com') + const { consoleProps } = findCrossOriginLogs('location', logs, 'foobar.com') - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('location') expect(consoleProps.Yielded).to.have.property('auth').that.is.a('string') @@ -84,9 +82,8 @@ context('cy.origin location', () => { }) cy.shouldWithTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('url', logs, 'foobar.com') + const { consoleProps } = findCrossOriginLogs('url', logs, 'foobar.com') - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('url') expect(consoleProps.Yielded).to.equal('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts index c4874b3890aa..0b5c075c23d8 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_misc.spec.ts @@ -76,9 +76,7 @@ context('cy.origin misc', () => { }) cy.shouldWithTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('exec', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('exec', logs, 'foobar.com') expect(consoleProps.Command).to.equal('exec') expect(consoleProps['Shell Used']).to.be.undefined @@ -100,9 +98,7 @@ context('cy.origin misc', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('focused', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('focused', logs, 'foobar.com') expect(consoleProps.Command).to.equal('focused') expect(consoleProps.Elements).to.equal(1) @@ -123,9 +119,7 @@ context('cy.origin misc', () => { }) cy.shouldWithTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('wrap', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('wrap', logs, 'foobar.com') expect(consoleProps.Command).to.equal('wrap') expect(consoleProps.Yielded[0]).to.equal('foo') @@ -146,9 +140,7 @@ context('cy.origin misc', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('debug', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('debug', logs, 'foobar.com') expect(consoleProps.Command).to.equal('debug') expect(consoleProps.Yielded).to.have.property('tagName').that.equals('BUTTON') @@ -178,9 +170,7 @@ context('cy.origin misc', () => { return } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('pause', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('pause', logs, 'foobar.com') expect(consoleProps.Command).to.equal('pause') expect(consoleProps.Yielded).to.be.undefined @@ -193,9 +183,7 @@ context('cy.origin misc', () => { }) cy.shouldWithTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('task', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('task', logs, 'foobar.com') expect(consoleProps.Command).to.equal('task') expect(consoleProps.Yielded).to.equal('works') diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_navigation.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_navigation.spec.ts index 4968f233849b..a92dc7a5f603 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_navigation.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_navigation.spec.ts @@ -447,9 +447,8 @@ context('cy.origin navigation', () => { }) cy.shouldWithTimeout(() => { - const { consoleProps, crossOriginLog, ...attrs } = findCrossOriginLogs('go', logs, 'foobar.com') + const { consoleProps, ...attrs } = findCrossOriginLogs('go', logs, 'foobar.com') - expect(crossOriginLog).to.be.true expect(attrs.name).to.equal('go') expect(attrs.message).to.equal('back') @@ -467,9 +466,8 @@ context('cy.origin navigation', () => { }) cy.shouldWithTimeout(() => { - const { consoleProps, crossOriginLog, ...attrs } = findCrossOriginLogs('reload', logs, 'foobar.com') + const { consoleProps, ...attrs } = findCrossOriginLogs('reload', logs, 'foobar.com') - expect(crossOriginLog).to.be.true expect(attrs.name).to.equal('reload') expect(attrs.message).to.equal('') @@ -488,9 +486,8 @@ context('cy.origin navigation', () => { }) cy.shouldWithTimeout(() => { - const { consoleProps, crossOriginLog, ...attrs } = findCrossOriginLogs('visit', logs, 'foobar.com') + const { consoleProps, ...attrs } = findCrossOriginLogs('visit', logs, 'foobar.com') - expect(crossOriginLog).to.be.true expect(attrs.name).to.equal('visit') expect(attrs.message).to.equal('http://www.foobar.com:3500/fixtures/multi-domain-secondary.html') diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_network_requests.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_network_requests.spec.ts index d31f1b8eb69f..dfe3e7f3df52 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_network_requests.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_network_requests.spec.ts @@ -50,9 +50,7 @@ context('cy.origin network requests', () => { }) cy.shouldWithTimeout(() => { - const { consoleProps, crossOriginLog, renderProps } = findCrossOriginLogs('request', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps, renderProps } = findCrossOriginLogs('request', logs, 'foobar.com') expect(consoleProps.Command).to.equal('request') diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying.spec.ts index 424c20a7b0ba..75fc0859bdb6 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying.spec.ts @@ -55,9 +55,7 @@ context('cy.origin querying', () => { cy.state('document', undefined) } - const { crossOriginLog, consoleProps } = findCrossOriginLogs('contains', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('contains', logs, 'foobar.com') expect(consoleProps.Command).to.equal('contains') expect(consoleProps['Applied To']).to.be.undefined @@ -82,9 +80,7 @@ context('cy.origin querying', () => { cy.state('document', undefined) } - const { crossOriginLog, consoleProps } = findCrossOriginLogs('within', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('within', logs, 'foobar.com') expect(consoleProps.Command).to.equal('within') expect(consoleProps.Yielded).to.have.property('tagName').that.equals('FORM') @@ -98,9 +94,7 @@ context('cy.origin querying', () => { }) cy.shouldWithTimeout(() => { - const { crossOriginLog, consoleProps } = findCrossOriginLogs('root', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('root', logs, 'foobar.com') expect(consoleProps.Command).to.equal('root') expect(consoleProps.Yielded).to.have.property('tagName').that.equals('HTML') diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying_shadow.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying_shadow.spec.ts index 21ef5d52d0df..3171d39ef553 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying_shadow.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_querying_shadow.spec.ts @@ -36,9 +36,7 @@ context('cy.origin shadow dom', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('shadow', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('shadow', logs, 'foobar.com') expect(consoleProps.Command).to.equal('shadow') expect(consoleProps.Elements).to.equal(1) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_screenshot.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_screenshot.spec.ts index 9fb2b3763932..dab3e9136dca 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_screenshot.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_screenshot.spec.ts @@ -297,9 +297,7 @@ context('cy.origin screenshot', () => { }) cy.shouldWithTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('screenshot', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('screenshot', logs, 'foobar.com') expect(consoleProps.Command).to.equal('screenshot') diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_spies_stubs_clocks.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_spies_stubs_clocks.spec.ts index b19b746d464a..51929443d1b8 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_spies_stubs_clocks.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_spies_stubs_clocks.spec.ts @@ -112,7 +112,6 @@ context('cy.origin spies, stubs, and clock', () => { cy.shouldWithTimeout(() => { const spyLog = findCrossOriginLogs('spy-1', logs, 'foobar.com') - expect(spyLog.crossOriginLog).to.be.true expect(spyLog.consoleProps.Command).to.equal('spy-1') expect(spyLog.callCount).to.be.a('number') expect(spyLog.functionName).to.equal('bar') @@ -131,7 +130,6 @@ context('cy.origin spies, stubs, and clock', () => { cy.shouldWithTimeout(() => { const stubLog = findCrossOriginLogs('stub-1', logs, 'foobar.com') - expect(stubLog.crossOriginLog).to.be.true expect(stubLog.consoleProps.Command).to.equal('stub-1') expect(stubLog.callCount).to.be.a('number') expect(stubLog.functionName).to.equal('bar') @@ -148,7 +146,6 @@ context('cy.origin spies, stubs, and clock', () => { cy.shouldWithTimeout(() => { const clockLog = findCrossOriginLogs('clock', logs, 'foobar.com') - expect(clockLog.crossOriginLog).to.be.true expect(clockLog.name).to.equal('clock') const consoleProps = clockLog.consoleProps() @@ -171,7 +168,6 @@ context('cy.origin spies, stubs, and clock', () => { cy.shouldWithTimeout(() => { const tickLog = findCrossOriginLogs('tick', logs, 'foobar.com') - expect(tickLog.crossOriginLog).to.be.true expect(tickLog.name).to.equal('tick') const consoleProps = _.isFunction(tickLog.consoleProps) ? tickLog.consoleProps() : tickLog.consoleProps diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_traversal.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_traversal.spec.ts index 998759da2ac6..a06101342991 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_traversal.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_traversal.spec.ts @@ -139,9 +139,8 @@ context('cy.origin traversal', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('children', logs, 'foobar.com') + const { consoleProps } = findCrossOriginLogs('children', logs, 'foobar.com') - expect(crossOriginLog).to.be.true expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') expect(consoleProps.Command).to.equal('children') @@ -169,9 +168,8 @@ context('cy.origin traversal', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('closest', logs, 'foobar.com') + const { consoleProps } = findCrossOriginLogs('closest', logs, 'foobar.com') - expect(crossOriginLog).to.be.true expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') expect(consoleProps.Command).to.equal('closest') @@ -197,9 +195,8 @@ context('cy.origin traversal', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('eq', logs, 'foobar.com') + const { consoleProps } = findCrossOriginLogs('eq', logs, 'foobar.com') - expect(crossOriginLog).to.be.true expect(consoleProps['Applied To'].length).to.equal(3) expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input') @@ -229,9 +226,7 @@ context('cy.origin traversal', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('filter', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('filter', logs, 'foobar.com') expect(consoleProps['Applied To'].length).to.equal(12) expect(consoleProps.Command).to.equal('filter') @@ -259,9 +254,7 @@ context('cy.origin traversal', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('find', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('find', logs, 'foobar.com') expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') @@ -292,9 +285,7 @@ context('cy.origin traversal', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('first', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('first', logs, 'foobar.com') expect(consoleProps['Applied To'].length).to.equal(3) expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') @@ -325,9 +316,7 @@ context('cy.origin traversal', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('last', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('last', logs, 'foobar.com') expect(consoleProps['Applied To'].length).to.equal(3) expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') @@ -358,9 +347,7 @@ context('cy.origin traversal', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('next', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('next', logs, 'foobar.com') expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') @@ -386,9 +373,7 @@ context('cy.origin traversal', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('nextAll', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('nextAll', logs, 'foobar.com') expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') @@ -417,9 +402,7 @@ context('cy.origin traversal', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('nextUntil', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('nextUntil', logs, 'foobar.com') expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') @@ -445,9 +428,7 @@ context('cy.origin traversal', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('not', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('not', logs, 'foobar.com') expect(consoleProps['Applied To'].length).to.equal(3) expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT') @@ -481,9 +462,7 @@ context('cy.origin traversal', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('parent', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('parent', logs, 'foobar.com') expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') @@ -509,9 +488,7 @@ context('cy.origin traversal', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('parents', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('parents', logs, 'foobar.com') expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') @@ -540,9 +517,7 @@ context('cy.origin traversal', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('parentsUntil', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('parentsUntil', logs, 'foobar.com') expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM') expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id') @@ -568,9 +543,7 @@ context('cy.origin traversal', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('prev', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('prev', logs, 'foobar.com') expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') expect(consoleProps['Applied To']).to.have.property('id').that.equals('age') @@ -596,9 +569,7 @@ context('cy.origin traversal', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('prevAll', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('prevAll', logs, 'foobar.com') expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') expect(consoleProps['Applied To']).to.have.property('id').that.equals('age') @@ -627,9 +598,7 @@ context('cy.origin traversal', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('prevUntil', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('prevUntil', logs, 'foobar.com') expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') expect(consoleProps['Applied To']).to.have.property('id').that.equals('age') @@ -655,9 +624,7 @@ context('cy.origin traversal', () => { cy.state('document', undefined) } - const { consoleProps, crossOriginLog } = findCrossOriginLogs('siblings', logs, 'foobar.com') - - expect(crossOriginLog).to.be.true + const { consoleProps } = findCrossOriginLogs('siblings', logs, 'foobar.com') expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT') expect(consoleProps['Applied To']).to.have.property('id').that.equals('input') diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_viewport.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_viewport.spec.ts index 657a8739723a..cfe34498fda2 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_viewport.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_viewport.spec.ts @@ -198,9 +198,8 @@ context('cy.origin viewport', () => { }) cy.shouldWithTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('viewport', logs, 'foobar.com') + const { consoleProps } = findCrossOriginLogs('viewport', logs, 'foobar.com') - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('viewport') expect(consoleProps.Width).to.equal(320) expect(consoleProps.Height).to.equal(480) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_waiting.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_waiting.spec.ts index 1c3feba80d3f..67f188e603e7 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_waiting.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_waiting.spec.ts @@ -29,9 +29,8 @@ context('cy.origin waiting', () => { }) cy.shouldWithTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('wait', logs, 'foobar.com') + const { consoleProps } = findCrossOriginLogs('wait', logs, 'foobar.com') - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('wait') expect(consoleProps).to.have.property('Waited For').to.equal('200ms before continuing') }) diff --git a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_window.spec.ts b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_window.spec.ts index edf0b8c89d2b..84d7bfc03708 100644 --- a/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_window.spec.ts +++ b/packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_window.spec.ts @@ -41,9 +41,8 @@ context('cy.origin window', () => { }) cy.shouldWithTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('window', logs, 'foobar.com') + const { consoleProps } = findCrossOriginLogs('window', logs, 'foobar.com') - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('window') expect(consoleProps.Yielded).to.be.null }) @@ -55,9 +54,8 @@ context('cy.origin window', () => { }) cy.shouldWithTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('document', logs, 'foobar.com') + const { consoleProps } = findCrossOriginLogs('document', logs, 'foobar.com') - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('document') expect(consoleProps.Yielded).to.be.null }) @@ -69,9 +67,8 @@ context('cy.origin window', () => { }) cy.shouldWithTimeout(() => { - const { consoleProps, crossOriginLog } = findCrossOriginLogs('title', logs, 'foobar.com') + const { consoleProps } = findCrossOriginLogs('title', logs, 'foobar.com') - expect(crossOriginLog).to.be.true expect(consoleProps.Command).to.equal('title') expect(consoleProps.Yielded).to.equal('DOM Fixture') }) diff --git a/packages/driver/cypress/integration/util/serialization_spec.ts b/packages/driver/cypress/integration/util/serialization_spec.ts index 3e0a43f3871e..b8c74725223b 100644 --- a/packages/driver/cypress/integration/util/serialization_spec.ts +++ b/packages/driver/cypress/integration/util/serialization_spec.ts @@ -372,7 +372,7 @@ describe('Log Serialization', () => { wallClockStartedAt: '2022-04-18T21:52:37.833Z', } - const { consoleProps, snapshots, $el, crossOriginLog, ...logAttrs } = reifyLogFromSerialization(mockPreprocessedLogAttrs) + const { consoleProps, snapshots, $el, ...logAttrs } = reifyLogFromSerialization(mockPreprocessedLogAttrs) expect(logAttrs).to.deep.equal({ alias: undefined, @@ -402,8 +402,6 @@ describe('Log Serialization', () => { wallClockStartedAt: '2022-04-18T21:52:37.833Z', }) - expect(crossOriginLog).to.be.true - expect($el.jquery).to.be.ok expect($el.length).to.equal(1) expect($el[0]).to.be.instanceOf(HTMLFormElement) diff --git a/packages/driver/src/cypress/log.ts b/packages/driver/src/cypress/log.ts index 5ca4dad82060..da408e891170 100644 --- a/packages/driver/src/cypress/log.ts +++ b/packages/driver/src/cypress/log.ts @@ -444,7 +444,7 @@ class Log { this.obj = { highlightAttr: HIGHLIGHT_ATTR, numElements: $el.length, - visible: this.get('crossOriginLog') ? this.get('visible') : $el.length === $el.filter(':visible').length, + visible: this.get('visible') ?? $el.length === $el.filter(':visible').length, } return this.set(this.obj, { silent: true }) diff --git a/packages/driver/src/util/serialization/log.ts b/packages/driver/src/util/serialization/log.ts index 83323f74f977..bb0d1e3dd5f9 100644 --- a/packages/driver/src/util/serialization/log.ts +++ b/packages/driver/src/util/serialization/log.ts @@ -417,8 +417,5 @@ export const reifyLogFromSerialization = (logAttrs) => { reified.snapshots = snapshots - // Use this flag to help reify the log correctly when certain property types slightly differ. - reified.crossOriginLog = true - return reified } From af3d4cfb92e2d8d62e81487de06efe089d78233c Mon Sep 17 00:00:00 2001 From: Bill Glesias Date: Wed, 20 Apr 2022 17:23:33 -0400 Subject: [PATCH 54/54] if get is null, return null for whole snapshot --- packages/driver/src/util/serialization/log.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/driver/src/util/serialization/log.ts b/packages/driver/src/util/serialization/log.ts index bb0d1e3dd5f9..d8a19f0823c7 100644 --- a/packages/driver/src/util/serialization/log.ts +++ b/packages/driver/src/util/serialization/log.ts @@ -330,6 +330,10 @@ export const preprocessSnapshotForSerialization = (snapshot) => { try { const preprocessedSnapshot = preprocessLogLikeForSerialization(snapshot, true) + if (!preprocessedSnapshot.body.get) { + return null + } + preprocessedSnapshot.styles = cy.getStyles(snapshot) return preprocessedSnapshot