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
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
/* 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 | |
}) |
/* 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() | |
}) | |
}) |
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