Playwright Recorder

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."