Synthetics Replicator

This sample futuristic libation order application showcases how to use a common test suite for e2e test suites run within CI pipelines that can also be used for Synthetic Monitoring. It is the main example showcased within the talks Ctrl > Shift > Left > Right: Joining Dev and Support Forces Together Using e2e Testing and Synthetic Monitoring and Synthetic Monitoring and E2E Testing: 2 Sides of the Same Coin. These talks have been given at several conferences and meetups, including:

1. Front Endgineers
2. Devoxx UK 2023
3. React Summit 2023
4. SRE Day
5. London.js

It will appear at the following upcoming sessions:

6. Devoxx Belgium
7. All Day DevOps
8. SRECon

Details of the approach are also provided in the blog Two sides of the same coin: Uniting testing and monitoring with Synthetic Monitoring. An advanced example showing how to monitor OAuth authentication flows are available in this Elastic Advent Calendar entry and corresponding GitHub example.

The application is built using Svelte and Vite.

Architecture

The aim is to meet the objective of allowing developers, QA engineers, operations agents, and SRE and DevOps experts to use a common approach to test and monitor an application. For this experiment, the following approach is used:

1. e2e test journeys written using Playwright and Elastic Synthetics.
2. Execution of the e2e test suite within CI using GitHub Actions.
3. Upload of the Synthetic tests from GitHub Actions to Elastic Synthetics.

Running Locally

Before running locally please ensure you have the following pre-requisites installed:

1. Nx global install
2. NPM

Start synthetics-replicator app:

npm install
nx serve synthetics-replicator

Running the synthetics suite (requires a locally running synthetics-replicator app):

cd apps/synthetics-replicator-tests
npm install
cd ../../
npm run test

Hosting

The e2e suite serves locally at http://localhost:5173/ both on your local machine and within the CI job.

For the deployed production instance, Elastic Synthetics pings a live production instance hosted on Netlify at https://synthetics-replicator.netlify.app/.

Data Sources

1. Allergen Information: 14 Allergens | Food Standards Agency
2. Drinks: The Geeky Bartender by Cassandra Reeder, The Geeky Chef
3. Food & Drinks: The Geeky Chef Cookbook by Cassandra Reeder, The Geeky Chef