72b8a65e78
* 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>
Launchpad
Launchpad is next-gen Vue application that is rendered by Electron. This acts as the visual user interface you see when running: cypress open.
It replaces the original electron app, desktop-gui.
Launchpad has the following responsibilities:
- Allow users to log in through the Dashboard Service
- Onboarding for new users (configure Component Testing dev server, install dependencies, etc)
- Select testing mode (E2E, Component, Node.js)
It is using the following technologies:
- Vue 3 for the UI framework
- code is written with the Composition API
- uses the new
<script setup>syntax for beter TypeScript support
- Vite for the dev server
- TypeScript
- Urql for the GraphQL client
More details on the front-end setup are found in the @packages/frontend-shared package README.
Cypress' entire back-end is powered by the @packages/server package. Launchpad interfaces with it via a GraphQL layer, found in @packages/graphql.
Here is a short tutorial building a simple app using the same technologies we are using for launchpad. There are a lot of moving pieces; understanding how everything works will help you contribute to Launchpad.
Building
For development
## from repo root
yarn workspace @packages/launchpad build
Developing
For the best development experience, you will want to use VS Code with the Volar extension. This will give you type completion inside vue files.
## from repo root
yarn watch
This starts Vite in watch mode, and any code-generation scripts that need to be running in the background to support our environment. While developing, you might want to consider the CYPRESS_INTERNAL_VITE_DEV option.
In a separate terminal, run:
## from repo root
yarn cypress:open
This starts the GraphQL Server, and opens Cypress. By running this separate from the yarn watch, you can kill & respawn the Cypress binary without the overhead of the watch processes you'd see by running yarn dev.
You can access the GraphQL inspector on http://localhost:52200/graphql.
If you notice your IDE has not updated and is showing errors, even after yarn watch has run, you might need to reload your IDE. With the amount of code generation running, sometimes the IDE does not recognize that the code has changed.
Testing
In Cypress
This project is tested with Cypress itself. It acts exactly like any other Cypress project. It has more component tests than E2E, as we are using Launchpad to dogfood Component Testing.
Component Tests:
## from repo root
yarn workspace @packages/launchpad cypress:open:ct
E2E tests:
## from repo root
yarn workspace @packages/launchpad cypress:open