jakedowns / CypressHelpers

cypress tips and tricks i've found
46 stars 14 forks source link

CypressHelpers

cypress tips and tricks i've found

Instead of cycling windows, i found it was more helpful to create a page with iframes in it, and then target/enter/exit the iframes as needed

so i would have one frame represent a user visiting one page,

and then a second frame representing a user visiting another page, maybe sending websocket events for example,

then going back to the first frame, to see if the event was sent and that the page updated

shoutout to https://www.npmjs.com/package/cypress-iframe which is similar, but not quite the same

Cypress Frame Helper Commands Reference

  1. download frame_helpers.js to your /cypress/support/ folder

  2. import 'frame_helpers' or require('frame_helpers') in the support/index.js file

Tip 1: Switching "Tabs" / Switching between windows

Cypress Tab Helper Commands Reference

See tab-helpers.js. Just add it to your support/commands.js file

They're really popup-windows or child-windows, but i call them tabs for api brevity

see https://github.com/jakedowns/CypressHelpers/blob/master/tab_window_switching_test.cy.js for example usage

Why?

If you're like me, when you first started using Cypress you fell in love immedately but then were annoyed by some of their opinionated descisions. For example: not supporting switching between "tabs" or pop-up windows. Luckily, vp of eng of Cypress, @bahmutov posted on his peronal Blog and Github repo about frame-busting and "Cypress using child window":

Here is how i've expanded upon that original concept with some convience helpers to keep my tests readable when testing multiple windows:

Note: this only works if you're within the same "baseDomain":

OK:

NOT OK: