Playwright Recorder

Playwright offers a feature where you can record the actions in your browser to a Playwright script file.

This allows you to easily create tests by recording your own actions, similar to Selenium IDE.

To get started, install these packages:

npm install playwright

Example

Now you can record your actions to a Playwright file:

npx playwright codegen --target javascript -o example.js https://testingbot.com

This command will start a Chromium browser and will record every action you take, in Javascript format, to a file called example.js.

You can choose to save the file in a different format, these are the options:

  • javascript
  • python
  • python-async
  • csharp

The example.js file can contain something similar to this:

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://testingbot.com/
  await page.goto('https://testingbot.com/');

  // Click text=Take your automated and manual testing to the next level.
  await page.click('text=Take your automated and manual testing to the next level.');

  // Click img[alt="Automated Testing"]
  await page.click('img[alt="Automated Testing"]');

  // Close page
  await page.close();

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

Run on TestingBot

To run the generated file on a browser in the TestingBot grid, you'll have to modify the script.

Before

const browser = await chromium.launch();

After

const capabilities = {
  'tb:options': {
    key: process.env.TB_KEY,
    secret: process.env.TB_SECRET
  },
  browserName: 'chrome',
  browserVersion: 'latest'
}
await chromium.connect({
  wsEndpoint: `wss://cloud.testingbot.com/playwright?capabilities=${encodeURIComponent(JSON.stringify(capabilities))}`
})

Playwright Agents

An alternative approach to recording tests would be to generate tests from your existing code. Playwright comes with 3 agents that can be used to create tests.

  • planner explores the app and produces a Markdown test plan
  • generator transforms the Markdown plan into the Playwright Test files
  • healer executes the test suite and automatically repairs failing tests, for example due to bad/missing locators

To get started, use this command to initialize the agent definitions:

npx playwright init-agents --loop=claude

You can now use your AI tool of choice to generate tests and point these to use a remote TestingBot browser by replacing the launch command with a connect command, as shown in the previous sections.

For example with a prompt: "Create one or more Playwright tests from the markdown test plan that was generated."

Was this page helpful?

Looking for More Help?

Have questions or need more information?
You can reach us via the following channels: