Getting Started Guide 🚀

Last Updated on Feb 21, 2022

DeploySentinel continually monitors your web applications for issues completing a user workflow. You can set up DeploySentinel Tests, which defines a user flow on your web application (ex. add item to cart), and DeploySentinel will run the test continuously on a schedule and alert you when the test fails.

DeploySentinel Tests are composed of a Playwright script run on a specified interval (ex. every 5 min) and can alert when the script fails to complete (ex. missing element). Each test run has telemetry and recording saved so that you can debug failures quickly.

Watch a quick demo of the DeploySentinel platform here.

Creating Your First Test

On the DeploySentinel Dashboard, click "Create New Test" on the upper right corner.

Afterwards give the test a name (ex. Login Flow).

To define a test script under the "Test Code" section, we recommend you start off with installing the DeploySentinel Recorder Extension, which will automatically generate a test script based on recorded browser actions. This allows you to build tests quickly and with minimal code needed.

Make sure to hit "Save" periodically while defining your initial test script to not lose your work.

Creating or Editing Tests with the Code Editor

DeploySentinel Tests are powered with Playwright, so the API provided is largely the same. DeploySentinel Tests expect you to export a function that accepts an object with a Playwright.Page.

We expect you to define a function with the following type signature:

export async function myTest({ page }: { page: Playwright.Page }): Promise<void>;

At test-time, your function will be called with a pre-created Playwright Page, which allows us to automatically collect the correct telemetry to show in the debug UI. This also eliminates common boilerplate code associated with creating and closing a new browser/page in Playwright.

As an example, the following DeploySentinel Test script will open Wikipedia, fill in the search box and click search:

import { test, expect } from '@playwright/test';

test('default', async ({ page }) => {
  await page.goto('https://en.wikipedia.org/wiki/Main_Page');
  await page.type('#searchInput', 'Playwright');
  await page.click('#searchButton');
});

Creating Tests with the Recorder Extension

The DeploySentinel Recorder Extension is a browser extension that allows you to record browser actions and generate a test script automatically. It eliminates needing to manually find selectors and writing out each action's API call.

While the DeploySentinel Recorder can generate working tests, you can always edit the generated code post-recording to optimize selectors or add more advanced logic in a test.

You can install the extension here:

You can optionally view the extension source code on Github.

After installing the DeploySentinel Recorder, when you create a new test on the DeploySentinel website, you can simply enter the URL you'd like to start a test on, and the extension will automatically open the URL with the recording started. After clicking "End Recording", it will take the generated code and pass it back to the test editor page. All recordings are kept local until you hit "Save Test" for the first time.

Setting Alert Options

After defining the test code, you can specify a method of being alerted when a test run fails. Currently you can either specify an email address to send an error alert to, or connect your Slack workspace and send the error to a specific Slack channel.

Viewing Test Run Results

From the Dashboard, you can click into a specific test, and from there you can either click on a failing test from the results history bar which will open the full run result page, or select one of the test results from the latest test runs section which will open a run result preview. From the run result preview you can click "View Full Run Result" to get more details.

Debugging Failures

If a test failed, the best place to start is to view the full run result page. At the top of the page, you can see the error message that was returned from the test above the line of code where the error was encountered. This allows you to gain context around what actions were being taken before the error was encountered. Viewing the video recording can help visually reconstruct at what step the test failed at.

To get further telemetry such as network requests, console logs, recorded DOM, etc. you can click on the "View Detailed Trace" page to load a Playwright trace viewer. From there you can click on the individual actions on the left pane to view the DOM state before and after the action, as well as the console logs and network requests made during that action.

Error Result