See my repo with more info here:
https://github.com/jakedowns/CypressHelpers
See my window-open-example.js here for how to context switch between windows:
https://github.com/jakedowns/CypressHelpers/blob/master/tab_window_switching_test.cy.js
Last active
November 22, 2022 04:27
-
-
Save jakedowns/32b75add88736fcd99c7202a98354384 to your computer and use it in GitHub Desktop.
Cypress Popup Window Context Switching
This file contains hidden or 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
| /* cypress/integration/myTest.spec.js */ | |
| describe('myComplexWebsocketApp',()=>{ | |
| cy.visit('myApp/adminSection') | |
| // ... assert some things about Admin Section | |
| cy.openWindow('myApp/clientSection') | |
| // ... assert some things about Client Section | |
| cy.toggleWindows() // switch back to Admin Section | |
| // ... perform some action Client should see | |
| cy.toggleWindows() // switch to Client | |
| // ... assert Admin action updated Client | |
| // ... perform some action Admin should see | |
| cy.toggleWindows() // switch to Admin Section | |
| // ... assert Admin sees Client's response | |
| cy.closeWindow() // close popup window and return to root window context | |
| }) |
This file contains hidden or 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
| /* cypress/support/command.js */ | |
| let originalWindow = null; | |
| Cypress.Commands.add('openWindow', (url, features) => { | |
| if(!originalWindow){ | |
| originalWindow = cy.state('window'); | |
| originalWindow.APP_ID = 1; // depth 1 | |
| } | |
| const w = Cypress.config('viewportWidth') | |
| const h = Cypress.config('viewportHeight') | |
| if (!features) { | |
| features = `width=${w}, height=${h}` | |
| } | |
| console.log('openWindow %s "%s"', url, features) | |
| return new Promise(resolve => { | |
| if (window.top.MyAltWindow && window.top.MyAltWindow.close) { | |
| console.log('window exists already') | |
| window.top.MyAltWindow.close() | |
| } | |
| // https://developer.mozilla.org/en-US/docs/Web/API/Window/open | |
| window.top.MyAltWindow = window.top.open(url, 'MyAltWindow', features) | |
| window.top.MyAltWindow.APP_ID = 2; // TODO: make this support n-many | |
| // letting page enough time to load and set "document.domain = localhost" | |
| // so we can access it | |
| setTimeout(() => { | |
| cy.state('document', window.top.MyAltWindow.document) | |
| cy.state('window', window.top.MyAltWindow) | |
| resolve() | |
| }, 500) | |
| }) | |
| }) | |
| /* toggle between 2 for now, could set this up to handle N-many windows */ | |
| Cypress.Commands.add('toggleWindows', ()=>{ | |
| return new Promise(resolve=>{ | |
| if(cy.state('window').APP_ID === 1){ | |
| // switch to our ALT window | |
| console.log('switching to alt popup window...') | |
| cy.state('document', originalWindow.top.MyAltWindow.document) | |
| cy.state('window', originalWindow.top.MyAltWindow) | |
| originalWindow.blur() | |
| }else{ | |
| console.log('switching back to original window') | |
| // switch back to originalWindow | |
| cy.state('document', originalWindow.document) | |
| cy.state('window', originalWindow) | |
| originalWindow.top.MyAltWindow.blur() | |
| } | |
| window.blur(); | |
| cy.state('window').focus() | |
| resolve(); | |
| }) | |
| }) | |
| Cypress.Commands.add('closeWindow', ()=>{ | |
| return new Promise(resolve=>{ | |
| if(window.top.MyAltWindow && window.top.MyAltWindow.close){ | |
| window.top.MyAltWindow.close() // close popup | |
| window.top.MyAltWindow = null | |
| } | |
| if(originalWindow){ | |
| cy.state('document', originalWindow.document) | |
| cy.state('window', originalWindow) | |
| } | |
| cy.state('window').focus() | |
| resolve() | |
| }) | |
| }) |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey, sorry, I just saw i missed your message. In case it's still helpful for you or someone who stumbles on this page in the future, please check out my example here https://github.com/jakedowns/CypressHelpers/blob/master/tab_window_switching_test.cy.js
It works by assigning a "tab_name" to the root page and the page opened by window.open, therefore allowing you to switch contexts back and forth between the opened window and to original "root" page