🏃‍♂️ Working with the Cypress Test Runner

The Cypress Test Runner is the interface where you execute and monitor test cases. Follow these steps to use it effectively:

🏠 Homepage

When you open Cypress, you will see a Welcome to Cypress screen
You will find two options:
- ✅ E2E Testing (this is what we will be using; click this)
- ❌ Component Testing (ignore this)
⏳ After clicking E2E Testing, Cypress will initialize the configuration. Let it finish loading

🌐 Choosing a Browser

🔍 Cypress will detect all installed browsers on your system
⚡It is highly recommended to choose Electron because it is built into Cypress, optimized for speed and stability
✅ After selecting a browser, click Start E2E Testing

🚫

Important

🚨 If Cypress crashes during execution, try switching to a different browser (e.g., Chrome, Edge, or Firefox) to resolve compatibility issues.

🖥️ Test Runner Interface

Once Cypress launches the Test Runner, you will see the following sections:

📌 Tabs on the Left Side
- Specs (most important; this is where you will interact with test files).
- Runs (used for monitoring past test executions, but not needed for our use case).
- Debug (for advanced debugging tools).
- Settings (configuration options for Cypress).
▶️ Running a Test Case
- Under the Specs tab, you will see a list of test files.

cypress

○ Click on any test file, and it will automatically start running.

🔄 Switching Test Cases ○ Option 1: If you are inside a running test file, look at the left side before the Command Log. You will see the Specs folder section

○ If it does not appear, click “Specs” (hovering over it should say “Expand Specs List”)

○ Click on any test you wish to switch to

○ Option 2: Click the Specs icon on the left navigation tab to return to the Specs tab, where you can select another test
🏃‍♂️Understanding the Test Execution ○ Command Log (Left Side): Displays a step-by-step log of Cypress commands being executed. The contents of this log will be explained further in the Working with Test Cases section

○ Test Status Menu (Above the Command Log):
- ✅ Shows a ✔ check mark (indicating successful test cases)
- ❌ Shows a ❌ X mark (indicating failed test cases)
- To the right of these, there is a ⏹ Stop Button to halt the test execution
- If a test is stopped, a 🔄 Restart Button will appear to rerun the test
🖥️ App Preview (Right Side)

○ This section displays a live preview of the test execution

○ It simulates a real browser environment, allowing you to see interactions in real-time

○ Any UI changes, clicks, or navigation actions performed by the test script will be reflected here
❌ Closing the Test Runner ○ Once you are done running tests, you can close the Cypress Test Runner:

○ Use Ctrl + C in the terminal of Visual Studio Code, or simply close the Test Runner window by clicking the Close button in the top-right corner of the window