What You’ll Learn
- How to open the Cypress app
- How to add npm scripts for opening Cypress
- How to choose a testing type, set up configuration, and launch a browser in Cypress
Opening Cypress
You can open Cypress from your project root using one of the following commands, depending on the package manager (npm, Yarn, or pnpm) you are using:
Using npm, Yarn, or pnpm
npx cypress open
After a moment, the Cypress Launchpad will open.
Adding npm Scripts
While you can always run Cypress using the full command, it’s easier and clearer to add Cypress commands to the scripts section in your package.json file.
Example:
{
"scripts": {
"cy:open": "cypress open"
}
}
Now you can run Cypress using:
npm run cy:open
Best Practice:
Avoid using cypress as a script name, especially with Yarn, as it may cause conflicts with Cypress CLI commands. Use descriptive names like cy:open or cy:run instead.
CLI Tools
Installing Cypress via npm provides access to multiple CLI commands. Cypress is also a fully functional JavaScript library that can be imported into Node.js scripts.
The Launchpad
Step 1: Choosing a Testing Type
The Cypress Launchpad will ask you to select a testing type:
- E2E Testing: Runs your whole application and tests pages in a real browser.
- Component Testing: Tests individual components in isolation.
If unsure, select E2E Testing—you can change this later.
Step 2: Quick Configuration
The Launchpad will generate the necessary configuration files for your chosen testing type. Review the changes and click Continue.
Step 3: Launching a Browser
The Launchpad detects compatible browsers installed on your system. Choose your preferred browser and click Start.
Now you’re ready to begin testing with Cypress! 🚀
Leave a Reply