When you are writing automation tests, it is important after the test execution to generate detailed and easy-to-understand reports. Mochawesome is a reporter for Mocha and can help you by providing an HTML report that can help you analyze your test results efficiently. In this post, I’ll guide you through configuring Mochawesome Reporter in an Appium JavaScript framework.
Before we install and configure the Mochawesome reporter, ensure you have installed and configured Node.js, npm, and a working Appium JavaScript framework set up using Mocha as the test runner.
Install Mochawesome in your project
npm install --save-dev mochawesome– This command is used to install Mochawesome in your project.
After running this command, you can check if Mochawesome is installed.
You can do it by checking the package.json file. In the devDependencies block you should see something like this:
Or you can run npm list mochawesome in the terminal. If the Mochawesome reporter is successfully installed you should see its version. If not, this will be empty.
Run the tests and generate the report
Now when the Mochawesome reporter is installed, you can run the tests and create a Mochawesome report by using the following command:
npx mocha --reporter mochawesome ./tests"I am writing “./tests” at the end because my test files are in my project’s “tests” folder.
or you can define this command in the package.json file like this:
"scripts": {
"test": "mocha --reporter mochawesome ./tests"
}And then you can run the tests simply by calling the npm test command in your terminal.
When the test execution is complete, a mochawesome-report folder will be automatically created in your project root folder, where you can find the HTML and JSON files of your report.
Open the HTML report file in your browser and you should see a report similar to this:
Custom Reporter Configuration
If you want to customize your report, you can do it directly in the package.json file.
For example, if you want the reports to be stored in your custom folder, and each report to have a different name than the default one, you can do it by adding the --reporter-options, and the following parameters to the test command in the package.json file:
reportDir: Specifies the directory where the report will be generated.reportFilename: Specifies the name of the report file.
So the command will now look like this:
"scripts": {
"test": "mocha --reporter mochawesome --reporter-options reportDir=reports, reportFilename=report ./tests"
}Now, when you run the npm test command in the terminal, there should be a new reports folder automatically created in your project, where the new report is stored. If you open the folder, you should see that the reports have the names report.html and report.json.
To differentiate the reports generated from different test runs, adding a timestamp to the report filename is a good practice.
You can do it by defining the timestamp format in the test command in the package.json file, and adding that timestamp to the filename, like this:
"scripts": {
"test": "timestamp=$(date +%d-%m-%Y-%H-%M-%S) && mocha --reporter mochawesome --reporter-options reportDir=reports, reportFilename=report-$timestamp ./tests"
}Now, when the test execution is completed, you should see that the new report has the defined timestamp.
Other Reporter Options
In the following table, you can see all the possible Mochawesome reporter-options, including their descriptions, default values, and example usage. You can customize your report to fit best to your needs.
| Option | Description | Default Value | Example Usage |
|---|---|---|---|
reportDir | Directory where the reports will be generated | mochawesome-report | reportDir=reports |
reportFilename | Name of the report file | mochawesome | reportFilename=TestReport |
overwrite | Overwrites existing reports if set to true | true | overwrite=false |
html | Enables HTML report generation | true | html=true |
json | Enables JSON report generation | true | json=true |
quiet | Suppresses log messages in the console | false | quiet=true |
code | Includes code snippets for failed tests in the report | true | code=false |
timestamp | Adds a timestamp to the report filename | false | timestamp=true |
reportPageTitle | Sets a custom title for the HTML report page | Mochawesome Report | reportPageTitle="My Custom Report" |
reportTitle | Sets the title displayed within the report | Mochawesome | reportTitle="My Test Suite Results" |
autoOpen | Automatically opens the report in the browser after tests | false | autoOpen=true |
inlineAssets | Inlines CSS and JS assets into the HTML file | false | inlineAssets=true |
charts | Includes charts in the report | true | charts=true |
saveJson | Saves the JSON output of the report to a file | false | saveJson=true |
dev | Outputs reporter options to the console for debugging | false | dev=true |
With the steps that are described above, you should be able to setup a well-organized reporting system that improves visibility and helps in analyzing test results.
