A complete framework for monitoring web applications using browser tests. Easily monitor your web applications by continously running browser tests that simulate user behaviour. Browser level tests have advantages over traditional protocol level tests because they are capable of testing any user behaviour simply with easy to maintain readable scripts.
The process of using FloodRunner is simple and easy:
- Schedule browser tests: Easily schedule your browser tests to ensure your application is being continously tested.
- On-demand browser tests: Create a Personal Access Token and run your browser test via an API call.
- Multiple browser test types: Supports both Puppeteer and Element scripts.
- Detailed Results: View detailed results of your test executions including all log output, screenshots and execution time.
- Integrate with Flood.io (coming soon): Leverage Flood.io to run your scripts as load tests (applies to Element scripts only)
- Secure login and API authorization: Secured using Auth0.com ensuring that login is secure and that data is completely isolated between users.
- Cloud native: Cloud-architecture enabled allowing you to easily deploy the components to a cloud provider like Azure
This is for anyone who wants to run browser tests on either a fixed schedule or on demand via a powerful API. No complex setup required, just paste in your script and see the results.
Once your FloodRunner instance is up and running you will be able to login and will be presented with an overview page like this:
Click Create Test and create your browser test using the form:
Your tests will display on the overview page showing their status (passing/failing), test schedule, last run date and test type.
Click View Results to see detailed results of your test executions. Here you can view and download your test script using the View Script button and delete the test if its no longer needed. A graph is shown with the latest test executions and clicking on a bar will download that tests logs and any screenshots.
FloodRunner allows you to create the following browser tests:
Puppeteer scripts are fully supported with a few caveats:
- Puppeteer and a browser instance is already provided so your script should use the provided browser instance
- Screenshots must be saved to a particular location (due to the read-only nature of Azure Functions) so when you save a screenshot, ensure that you append it to the path variable
screenshotPathas shown below
Shown below is what a normal script would look like when uploaded to FloodRunner.
const puppeteer = require('puppeteer');
const browser = await puppeteer.launch({
product: "chrome",
headless: true,
});
const page = await browser.newPage();
await page.goto("https://example.com");
await page.screenshot({ path: "screenshot.png" });
browser.close();
const page = await browser.newPage();
await page.goto("https://example.com");
await page.screenshot({ path: path.join(screenshotPath, "screenshot.png") });
The NestJS backend API is fully Swagger compatible and can be accessed by creating an access token and providing it in the x-api-key request header when sending a request.
The Swagger UI can be accessed on the path /swagger as shown below
Open to the settings menu and select Personal access token
Then create a token by clicking the Create Token button
You can then include this token in any request made to the backend API.
FloodRunner is fully cloud native and can be deployed into any cloud environment. The architecture shown below is when deployed to Azure
NB. Currently only Microsoft Azure Blob Storage can be used as a storage provider. The framework allows for other providers to be added as long as they implment the
IFileServiceinterface, PR's for other storage providers are welcomed.
Prerequisites:
- An Azure subscription to host FloodRunner.
You will need to provision the following components in Azure:
- A Linux-Based App Service Plan (for the API and frontend) NB. If you use a Windows app service plan, ensure that you change the startup command for the React frontend in the yml pipeline
- An Azure Web app for the React front-end
- An Azure Web app for the NestJS backend
- An Azure Functions app for the SandboxRunner API
- An Azure storage account for storing tests and test results
Additionally, you will need a MongoDB database, you can either use one Azure or use a free one through MongoDB Atlas.
If you choose to use Azure blob storage for storing the browser test logs and screenshots, it is important to configure the CORS origins in the portal to include to allow the frontend web portal to fetch the resources. For a broad configuration use:
- Allowed origins: *
- Allowed methods: GET
- Allowed headers: *
- Exposed headers: *
- Max age: 600
If this is not configured you will receive CORS errors when fetching the resources.
You can either manually deploy each of the components to Azure, or use the floodrunner-pipeline.yml, in the .azuredevops folder, as a template pipeline for an Azure DevOps pipeline.
The yml file includes all the required steps to deploy each of the components.
NB. For deploying the NestJS Backend API there are a number of secrets that need to be configured as pipeline variables. These get inserted into the
production.ymlconfig file and used when the application runs.
If you're interested to learn more about FloodRunner then check out these blog posts:
- Introducing FloodRunner: Automated monitoring using Flood Element tests
- Monitoring applications made easy with FloodRunner
If you've enjoyed using this project, or have an suggestions on making this project better please open a pull requests or issue.
If you encounter any issues with the framework please open an issue on the GitHub project.