📋 Mochaawesome Reporter

Mochawesome is a custom reporter for Mocha, a feature-rich JavaScript test framework. It generates detailed HTML reports for your tests, providing a comprehensive overview of test results, including passing, failing, and pending tests.

📌 How to Install Mochaawesome Reporter

1. Navigate to the Test Suite Folder in Visual Studio Code 🖥️

• Launch Visual Studio Code and Go to File and click Open Folder:

• Click on the following project:

  

• Click Terminal → New Terminal from the top menu

2. Ensure You’re in the Correct Directory 📍

• The terminal should display the correct directory path ending in cypress-ai-automation:

3. Install Mochaawesome Plugin 📂

• Copy and paste the following command into the terminal:

npm install --save-dev cypress-mochawesome-reporter

• ⚠️ Reminder: When pasting in the terminal, DO NOT use Ctrl + V. Instead, right-click on the terminal, and it will automatically paste the copied command

📄 Generate Mochawesome Report

Understanding the Process

This process differs from opening the Cypress Test Runner with npx cypress open. The Cypress Test Runner allows you to navigate through Cypress interactively. You can refer to the Cypress Test Runner section for more details on that.

However, when running tests with Mochawesome, you will skip all navigation and immediately start test execution.

1. Headless Mode Execution:

   • When you run the command, Cypress will first execute all tests in headless mode, meaning you won’t see the Cypress Test Runner UI.

2. Headed Mode Execution:

   • After completing the headless test execution, Cypress will automatically run the tests again in headed mode, allowing you to see the live test execution in real-time.

⚡ Generate Mochawesome Report (Optional)

Generating a Mochawesome report is optional. It is up to you whether you want to generate a report that can be stored for reference and data. However, using Mochawesome is the preferred way to track test results efficiently.

🛠️ Running Mochawesome Tests

To generate the Mochawesome report, open your terminal and run the appropriate command based on the type of site you’re testing:

For AIWebsite.PublishedSite.test.js - Front-end tests for the website 🖥️:

npm run test

For AIWebsite.WP-Admin.test.js - WordPress admin panel tests ⚙️:

npm run admin

To know that the test execution in headless mode is complete, you will see the following message in the terminal then it will immediately start the headed mode execution:

Once the test execution is completed, you will find the Mochawesome test report in the following directory:

cypress/reports

You can open the report in a browser to view a detailed summary of the test results, including pass/fail status, and errors.

By clicking on the HTML file (default name: “Test Suite Report”), you can view a comprehensive breakdown of the test execution. You can also rename the report file to make it easier to identify which site was tested and whether it passed or failed.

• Example: DemoSite1_report_FAIL.html

This helps in organizing test reports efficiently, especially when handling multiple test executions.

❌ What You Can’t Do in Mochawesome

1. Live Test Modifications Are Not Allowed

   • If you need to modify test scripts (e.g., adding sites or test cases), refer to the Using VS Code and Cypress for Testing section.

   • Changes made while the test is running will not take effect. You must finalize all changes before executing the Mochawesome command.

2. Navigation is Disabled

   • Unlike Cypress Test Runner, you cannot navigate or manually interact with Cypress once the test starts.

   • The test must finish for the report to be generated. If the test is interrupted, no report will be created.

3. Cannot Instantly Switch Between Tests

   • If you want to switch from one test type to another (e.g., Published Site → WP-Admin), you must wait for the current test to finish or manually stop it before running a different command.

✅ What You Can Do in Mochawesome

1. Live Test Execution is Still Visible

   • Although you cannot navigate Cypress manually, after the headless test execution, the test will automatically proceed to headed execution.

   • This allows you to see the test running in real-time, just like when using Cypress Test Runner.

   • The test window will display:

     • Command log
     • App Preview
     • Snapshots
     • Test status menu

2. Modify Tests Before Running

   • You can edit test scripts (e.g., adding sites, selecting specific test cases) before running the command.

   • Just ensure all changes are saved before executing the test.

❓ What If I Accidentally Ran the Command But Need to Make Changes or Stop the Test?

If you need to stop the test immediately, follow these steps:

1. Click on the terminal window where the test is running.

2. Press Ctrl + C on your keyboard.

3. This will immediately stop the test execution.