* chore: wire up Cypress Studio (#23413) * wip * wip * wip - spike * more wip [skip ci] * update style * fix ts * move types around * extract types * lint * fixing tests * fix component test * skip some tests * do not error on experimentalStudio flag * add studio controls placeholder * fixing tests * revert * revert changes * rename store * rename method * remove comment * refactor * correctly feature flag studio * simplify code * simplify code * lift check into useEventManager * correctly hide create studio prompt based on flag; * remove superfulous css * rename variables * fix bugs * wip * unskip tests * unskip more tests * fix a bug in the assertion API * fix bug in assertions [skip ci] * wip - bugs [skip ci] * feat: add experimentalStudio flag back (#23506) Co-authored-by: astone123 <adams@cypress.io> * chore: Add Studio UI to Cypress 10 (#23537) * wip * wip * wip - spike * more wip [skip ci] * update style * fix ts * move types around * extract types * lint * fixing tests * fix component test * skip some tests * do not error on experimentalStudio flag * add studio controls placeholder * fixing tests * revert * revert changes * rename store * rename method * remove comment * refactor * correctly feature flag studio * chore: wip add barebones studio modals * simplify code * simplify code * lift check into useEventManager * correctly hide create studio prompt based on flag; * remove superfulous css * chore: style studio toolbar * chore: misc feedback * chore: remove studio store prop * chore: studio URL prompt and other changes * update component * chore: UI styling and remove studio init modal * chore: revert unnecessary changes * chore: fix types * chore: fix some tests, minor refactor (#23545) * fix test * fix test * add noHelp link to StandardModal Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com> * test: studio e2e tests (#23546) * add basic e2e test * add some e2e tests for studio and a note on limitations * additional spec * add more tests, refactor helper * fix bug in studio * remove test code * chore: UI feedback * fix race condition * update tests * rename test * improve types in reporter * remove dead code * improve tests * merge tests into one spec * chore: Cap instruction modal width; exit studio mode when new spec is chosen * chore: Only render studio error when test has failed; add test for studioEnabled * correctly check if command is studio or not * improve specs and hopefully reduce flake * communicate studio state from app->reporter * receive studio save state validity from app * fix test * improve test coverage * fix external link Co-authored-by: astone123 <adams@cypress.io>
Driver
This is the core JavaScript library that is loaded inside the browser that is responsible for executing Cypress commands and managing the test runtime.
Building
The driver is actually consumed by the runner like any other npm module. To develop the driver and see changes reflected you need to run the watch task inside of the runner.
yarn workspace @packages/runner watch
Developing
If you're developing on the driver, you'll want to run in the normal Cypress GUI mode, like you would when you're writing tests for your own Cypress projects.
yarn workspace @packages/driver cypress:open
Read the runner's README.md for more information.
Running
You can also run all of the driver's tests locally. We don't really recommend this because it takes a long time, and we have this process optimized by load balancing the tests across multiple workers in CI.
It's usually easier to run the tests in the GUI, commit, and then see if anything broke elsewhere.
# in separate terminal
yarn workspace @packages/driver cypress:run
# or for development
yarn workspace @packages/driver cypress:open
Debug Logs
The debug module is used to generate debug logs for the driver. In the browser, you can enable driver debug logs by setting localStorage.debug in the console:
localStorage.debug = "cypress:driver,cypress:driver:*"
Note: you may need to enable "Verbose" or "Debug" log levels inside the browser's developer tools, since not all browsers display debug logs by default.
Patches
sinonunfetchto polyfillfetch. Added constructor function to point XMLHttpRequest to the application under test window.
Note: when creating a patch, make sure there is no package-lock.json file! Also rename the patch to have ".dev.patch" extension.
Cross-origin Testing
Working on cross-origin testing or reviewing a PR related to it? Check out the Cross-origin Testing Technical Overview.