Docs
Test Recorder Extension

DeploySentinel Recorder

DeploySentinel Recorder automatically records browser interactions to auto generate Playwright and Puppeteer test scripts. Simply step through your website while recording with DeploySentinel Recorder and the extension will convert the captured user flow into a Playwright or Puppeteer script.

Demo Video

Getting Started

Installing the Extension

If you don't have the extension yet, you can get started by downloading the extension from the Chrome or Firefox extension stores. Using another browser? Feel free to open a new issue on our Github repo (opens in a new tab) to let us know.

Chrome Store Icon (opens in a new tab) Firefox Addon Icon (opens in a new tab)

Start Your First Recording

To start your first recording:

  1. Visit the page you'd like to start your test on and click the DeploySentinel Recorder Icon extension icon in your browser.

    Tip: Start the test from a non-logged in state so that the test recording doesn't depend on any local cookies or session state that may be set on your computer. Alternatively, you can enable the extension in incognito mode and start a test from there.

  2. Click "Start Recording from Current Tab" to kick off the recording.

  3. Navigate through the website as you would normally.

    Tip: Try to adjust where you click based on the selector the extension detects for a given element, to make sure you're capturing stable selectors.

  4. Click "Show More" in the overlay panel to see the generated code from the actions taken so far, as well as to view the overall actions taken. You can copy your code during a recording at any time without ending the recording.

  5. Click the blue "End Test" button to stop recording actions. From there you can copy the generated code to your code editor.

  6. After closing the recording, you can view the previous recording at any time by clicking on the extension icon in your browser and clicking "View Last Recording".

Tip: To quickly preview tests locally in headed mode, uncomment the // headless: false... line near the top of the generated code.

Awaiting/Asserting on Text Content

During a test, you may need to either wait for some text content to appear before continuing on in a test to prevent race conditions (ex. ensure async content loaded completely before continuing), or assert that a text element is visible after completing an action (ex. success message is displayed to the user).

To accomplish either of those use cases, you can right click over a given text during a recording and select "Assert/wait for selected text" which will add an await action to your recorded test for the text to appaer. If the text appears in multiple places on the page, the await action will complete once at least one occurence of the text is found on the page.

Playwright Code Generation Example:

await page.waitForSelector('text=Taco');

Puppeteer Code Generation Example:

await page.waitForFunction("document.body.innerText.includes('Taco')");

Recording Hover Events

Some UI elements involve needing to trigger a hover event before showing up. DeploySentinel does not automatically capture hover events to keep recordings concise. However, you can record a hover event by right clicking the element you'd like to hover over, and selecting "Record hover over element". The DeploySentinel Recorder will add a hover event over the selected element.

Recording Screenshots

If using the recording outside of DeploySentinel, which captures test screenshots and video telemetry automatically, you may need to capture screenshots manually before/after actions to help debug test failures.

You can insert a screenshot action by clicking on "Show More" in the overlay, and clicking "Record Screenshot".

Contributing

Have feedback or want to contribute improvements? View this extension on Github (opens in a new tab).

Playwright Watch