Recording Tests

DevRaven Recorder

DevRaven Recorder is a Chrome extension available to automatically capture browser interactions to generate browser tests for your critical flows.

Just start recording and go through your browser flow, the recorder will automatically generate your browser test using Playwright framework.

Here is a video demonstrating the DevRaven Recorder functionality.

Refer Github repository at https://github.com/devraven-io/devraven-recorder for installation instructions.

Running on DevRaven

1. Once you have completed a recording of the flow you'd to monitor, click Copy Code button on the DevRaven Recorder to copy the code generated for the Browser Test.
2. Login to your DevRaven account and navigate to Browser Tests on the left nav.
3. Click New Test button.
4. Provide a name for your test.
5. Toggle Scripting Mode to ON and confirm.
6. Paste the generated code in the Playwright Script field.
7. Click Save and Run to create a new test and run.

Playwright Recorder

Playwright comes with an out of the box code generation tool that allows you to record and generate code for your automation/monitoring scenarios. The generated code can be executed as a Browser Test in DevRaven.

Launching codegen

Execute the following command to launch Playwright's code generator tool.

npx playwright codegen --target javascript

caution

Ensure that the Target on Playwright Inspector is set to Javascript.

A new browser session will be launched along with Playwright Inspector. Navigate to your web page from the newly launched browser window and perform the actions. Playwright will generate the code as you interact with the web page.

Once you are done with performing all the actions, switch to Playwright Inspector window and click Copy button to copy the generated code.

Following is an example of such generated code.

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({
    headless: false
  });
  const context = await browser.newContext();

  // Open new page
  const page = await context.newPage();

  // Go to https://www.devraven.io/
  await page.goto('https://www.devraven.io/');

  // Click [aria-label="main navigation"] >> text=API Monitoring
  await page.locator('[aria-label="main navigation"] >> text=API Monitoring').click();
  await page.waitForURL('https://www.devraven.io/api');

  // ---------------------
  await context.close();
  await browser.close();
})();

Running on DevRaven

A couple of minor changes are required to run the generated code on DevRaven.

• Remove async wrapper for the generated code
• Change browser to headless mode

Here are the changes done to the example code.

// Before:

(async () => {
  const browser = await chromium.launch({
    headless: false
  });
  ..
  ..
  ..
  await browser.close();
})();

// After:

//(async () => {  //comment out this line
  const browser = await chromium.launch({
    headless: true //change to headless: true
  });
  ..
  ..
  ..
  await browser.close();
// })(); //comment out this line

Final code

Here is the final code that can be setup as a Browser Test in DevRaven

const { chromium } = require('playwright');

const browser = await chromium.launch({
headless: true //change to headless: true
});
const context = await browser.newContext();

// Open new page
const page = await context.newPage();

// Go to https://www.devraven.io/
await page.goto('https://www.devraven.io/');

// Click [aria-label="main navigation"] >> text=API Monitoring
await page.locator('[aria-label="main navigation"] >> text=API Monitoring').click();
await page.waitForURL('https://www.devraven.io/api');

// ---------------------
await context.close();
await browser.close();

Emulating devices

You can use Playwright's codegen to emulate mobile devices for recording tests for mobile device use cases. The following example command emulates iPhone 13 device profile

npx playwright codegen --target javascript --device "iPhone 13"

Refer this link for all available device profiles.

Refer Test Generator document for more details about Playwright's Codegen tool.