Building E2E dashboard using CodeceptJS - ElasticSearch - Kibana

Cookbook
1

Last time we explore how to build an end-to-end dashboard using CodeceptJS, Allure, Grafana, and Prometheus, continue that series, we would explore how to build the E2E dahsboard using ESK - ElasticSearch - Kibana:

  1. Setting Up ESK - ElasticSearch - Kibana: Essentially, the Ops team provides this, however if you want to have a playground, you could use this docker-compose https://github.com/deviantony/docker-elk
  2. Implement End-to-End Testing with CodeceptJS: CodeceptJS is a testing framework that simplifies end-to-end testing for web applications. You can use it to simulate user interactions and test various scenarios. Write test scripts using CodeceptJS to simulate user actions on your web application, including interactions with the elements you want to monitor and display on your dashboard.
  3. Send test results to ESK: @ngraf has done a great job to implement a plugin that does that job for you. You could find that plugin here A plugin for CodeceptJS to send test results to an Elasticsearch index · GitHub
  4. Display Metrics on Kibana Dashboard: Create Kibana dashboards that visualize the metrics collected by ES. You can design panels that display various metrics and their trends over time. Customize the panels to show the specific data points you’re interested in monitoring. There would be no limitation with what you could visulize your data, here is the example, on the left I made a pie chart to display the passed/failed percentage. Next to it is the bar chart to display the top 3 duration of scenarios.

Screenshot 2023-10-24 at 09.35.11
Screenshot 2023-10-24 at 09.35.111763×552 55.7 KB

  1. Continuous Integration and Deployment: Set up a CI/CD pipeline to automate the process of running your end-to-end tests, and updating the Kibana dashboards. This ensures that your dashboards stay up to date with the latest test results and metrics.

By following these steps, you can build an end-to-end dashboard using CodeceptJS, ES, and Kibana to monitor and visualize the performance and behavior of your automated tests.

Please note that the information provided is based on the content you’ve provided and may require additional research or configuration specific to your project’s requirements.

Sample E2E tests that I used in this tutorial: GitHub - kobenguyent/codeceptjs-rest-demo

1 Like