fix: support snapshots of xhr/fetch and other logs generated from the primary #21552
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| // import to bind shouldWithTimeout into global cy commands | ||
| import '../../../support/utils' | ||
|
|
||
| describe('cy.origin - snapshots', () => { | ||
| const findLog = (logMap: Map<string, any>, displayName: string, url: string) => { | ||
| return Array.from(logMap.values()).find((log: any) => { | ||
| const props = log.get() | ||
|
|
||
| return props.displayName === displayName && (props?.consoleProps?.URL === url || props?.consoleProps()?.URL === url) | ||
| }) | ||
| } | ||
| let logs: Map<string, any> | ||
|
|
||
| beforeEach(() => { | ||
| logs = new Map() | ||
|
|
||
| cy.on('log:changed', (attrs, log) => { | ||
| logs.set(attrs.id, log) | ||
| }) | ||
|
|
||
| cy.fixture('foo.bar.baz.json').then((fooBarBaz) => { | ||
| cy.intercept('GET', '/foo.bar.baz.json', { body: fooBarBaz }).as('fooBarBaz') | ||
| }) | ||
|
|
||
| cy.visit('/fixtures/primary-origin.html') | ||
| cy.get('a[data-cy="xhr-fetch-requests"]').click() | ||
| }) | ||
|
|
||
| it('verifies XHR requests made while a secondary origin is active eventually update with snapshots of the secondary origin', () => { | ||
| cy.origin('http://foobar.com:3500', () => { | ||
| // need to set isInteractive in the spec bridge in order to take xhr snapshots in run mode, similar to how isInteractive is set within support/defaults.js | ||
| // @ts-ignore | ||
| Cypress.config('isInteractive', true) | ||
| cy.get(`[data-cy="assertion-header"]`).should('exist') | ||
| cy.wait('@fooBarBaz') | ||
| }) | ||
|
|
||
| cy.shouldWithTimeout(() => { | ||
| const xhrLogFromSecondaryOrigin = findLog(logs, 'xhr', 'http://localhost:3500/foo.bar.baz.json')?.get() | ||
|
|
||
| expect(xhrLogFromSecondaryOrigin).to.not.be.undefined | ||
|
|
||
| const snapshots = xhrLogFromSecondaryOrigin.snapshots.map((snapshot) => snapshot.body.get()[0]) | ||
|
|
||
| snapshots.forEach((snapshot) => { | ||
| expect(snapshot.querySelector(`[data-cy="assertion-header"]`)).to.have.property('innerText').that.equals('Making XHR and Fetch Requests behind the scenes!') | ||
| }) | ||
| }) | ||
| }) | ||
|
|
||
| it('verifies fetch requests made while a secondary origin is active eventually update with snapshots of the secondary origin', () => { | ||
| cy.origin('http://foobar.com:3500', () => { | ||
| // need to set isInteractive in the spec bridge in order to take xhr snapshots in run mode, similar to how isInteractive is set within support/defaults.js | ||
| // @ts-ignore | ||
| Cypress.config('isInteractive', true) | ||
| cy.get(`[data-cy="assertion-header"]`).should('exist') | ||
| cy.wait('@fooBarBaz') | ||
| }) | ||
|
|
||
| cy.shouldWithTimeout(() => { | ||
| const xhrLogFromSecondaryOrigin = findLog(logs, 'fetch', 'http://localhost:3500/foo.bar.baz.json')?.get() | ||
|
|
||
| expect(xhrLogFromSecondaryOrigin).to.not.be.undefined | ||
|
|
||
| const snapshots = xhrLogFromSecondaryOrigin.snapshots.map((snapshot) => snapshot.body.get()[0]) | ||
|
|
||
| snapshots.forEach((snapshot) => { | ||
| expect(snapshot.querySelector(`[data-cy="assertion-header"]`)).to.have.property('innerText').that.equals('Making XHR and Fetch Requests behind the scenes!') | ||
| }) | ||
| }) | ||
| }) | ||
|
|
||
| it('Does not take snapshots of XHR/fetch requests from secondary origin if the wrong origin is / origin mismatch, but instead the primary origin (existing behavior)', { | ||
| pageLoadTimeout: 5000, | ||
| }, | ||
| (done) => { | ||
| cy.on('fail', () => { | ||
| const xhrLogFromSecondaryOrigin = findLog(logs, 'fetch', 'http://localhost:3500/foo.bar.baz.json')?.get() | ||
|
|
||
| expect(xhrLogFromSecondaryOrigin).to.not.be.undefined | ||
|
|
||
| const snapshots = xhrLogFromSecondaryOrigin.snapshots.map((snapshot) => snapshot.body.get()[0]) | ||
|
|
||
| snapshots.forEach((snapshot) => { | ||
| expect(snapshot.querySelector(`[data-cy="assertion-header"]`)).to.be.null | ||
| }) | ||
|
|
||
| done() | ||
| }) | ||
|
|
||
| cy.origin('http://barbaz.com:3500', () => { | ||
| // need to set isInteractive in the spec bridge in order to take xhr snapshots in run mode, similar to how isInteractive is set within support/defaults.js | ||
| // @ts-ignore | ||
| Cypress.config('isInteractive', true) | ||
| cy.get(`[data-cy="assertion-header"]`).should('exist') | ||
| cy.wait('@fooBarBaz') | ||
| }) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <body> | ||
| <h1 data-cy="assertion-header">Making XHR and Fetch Requests behind the scenes!</h1> | ||
| <script> | ||
| function fireXHRAndFetchRequests() { | ||
|
|
||
| xhr = new XMLHttpRequest(); | ||
| xhr.open("GET", "http://localhost:3500/foo.bar.baz.json"); | ||
| xhr.responseType = "json"; | ||
| xhr.send(); | ||
|
|
||
| fetch("http://localhost:3500/foo.bar.baz.json") | ||
| } | ||
| fireXHRAndFetchRequests() | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -341,20 +341,7 @@ export class Log { | |
| return _.pick(this.attributes, args) | ||
| } | ||
|
|
||
| private addSnapshot (snapshot, options, shouldRebindSnapshotFn = true) { | ||
| const snapshots = this.get('snapshots') || [] | ||
|
|
||
| // don't add snapshot if we couldn't create one, which can happen | ||
|
|
@@ -367,21 +354,58 @@ export class Log { | |
|
|
||
| this.set('snapshots', snapshots) | ||
|
|
||
| if (options.next && shouldRebindSnapshotFn) { | ||
| const originalLogSnapshotFn = this.snapshot | ||
|
|
||
| this.snapshot = function () { | ||
| // restore the original snapshot function | ||
| this.snapshot = originalLogSnapshotFn | ||
|
|
||
| // call orig fn with next as name | ||
| return originalLogSnapshotFn.call(this, options.next) | ||
| } | ||
| } | ||
|
|
||
| return this | ||
| } | ||
|
|
||
| snapshot (name?, options: any = {}) { | ||
| // bail early and don't snapshot if we're in headless mode | ||
| // or we're not storing tests | ||
| if (!this.config('isInteractive') || (this.config('numTestsKeptInMemory') === 0)) { | ||
| return this | ||
| } | ||
|
|
||
| _.defaults(options, { | ||
| at: null, | ||
| next: null, | ||
| }) | ||
|
|
||
| if (this.config('experimentalSessionAndOrigin') && !Cypress.isCrossOriginSpecBridge) { | ||
|
There was a problem hiding this comment. Would it be possible to somehow tie this to the command group the log is part of? Like add the originPolicy to the command group and use it for any events generated within that group? @emilyrohrbough, is something like that possible (or better)? |
||
| const activeSpecBridgeOriginPolicyIfApplicable = this.state('currentActiveOriginPolicy') || undefined | ||
| // @ts-ignore | ||
| const { originPolicy: originPolicyThatIsSoonToBeOrIsActive } = Cypress.Location.create(this.state('anticipatingCrossOriginResponse')?.href || this.state('url')) | ||
|
|
||
| if (activeSpecBridgeOriginPolicyIfApplicable && activeSpecBridgeOriginPolicyIfApplicable === originPolicyThatIsSoonToBeOrIsActive) { | ||
|
There was a problem hiding this comment. In what scenarios is this not true? If we are in a cy.origin block but have begun navigating to another origin? Does it make a difference if it's the top origin or another cross origin? There was a problem hiding this comment. Mainly the error case/operator error. If a user navigates to an origin that doesn't match the spec bridge origin, like cy.get('[href="https://www.foobar.com"]').click()
cy.origin('https://www.barbaz.com', () => {
// wrong origin, don't snapshot this
})I added a test here to make sure this fails gracefully. |
||
| Cypress.emit('request:snapshot:from:spec:bridge', { | ||
| log: this, | ||
| name, | ||
| options, | ||
| specBridge: activeSpecBridgeOriginPolicyIfApplicable, | ||
| addSnapshot: this.addSnapshot, | ||
| }) | ||
|
|
||
| return this | ||
| } | ||
| } | ||
|
|
||
| const snapshot = this.cy.createSnapshot(name, this.get('$el')) | ||
|
|
||
| this.addSnapshot(snapshot, options) | ||
|
|
||
| return this | ||
| } | ||
|
|
||
| error (err) { | ||
| const logGroupIds = this.state('logGroupIds') || [] | ||
|
|
||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This might be one of those cases where adding a promise-based API to the communicator would be useful. Then it could be something like:
I'm not suggesting adding it in this PR, but wanted to call it out as an example. Maybe when we have another use-case, we could add that and refactor this one.