Convert Playwright scripts to BigTest and created portable test bundles

[taras]

I was playing around with QA Wolf and their UI is pretty nice. Their scripts are JavaScript files that execute Playwright. For example, here is a script that submits the contact form on Frontside.com.

const { context } = await launch();
const page = await context.newPage();
await page.goto('https://frontside.com', { waitUntil: "domcontentloaded" });
// 🐺 create code here
await page.click('text="Learn more"');
await page.click('text="Get in touch"');
await page.click("#name");
await page.fill("#name", "Taras");
await page.press("#name", "Tab");
await page.fill("#email", "[email protected]");
await page.press("#email", "Tab");
await page.fill(".textarea", "Testing");
await page.click(".submit");
// 🐺 QA Wolf will create code here

QA Wolf wants their scripts to be portable and frameworkless. They chose Playwright, which comes with the caveat that the script will only work in Playwright. That eliminates many options. For example, you can't test a web app on a mobile browser. We could help make QA Wolf scripts truly portable by introducing some BigTest goodness.

There are several ways that we could make these scripts truly portable. One option is to make it possible to convert a Playwright script to a BigTest using a codemod. The ability to convert Playwright scripts to BigTest would make it possible to us to compare performance and reliability of BigTest approach vs Playwright. It would also provide a migration path for users of Playwright to upgrade to BigTest.

For this to work, we need the codemod but also a way to bundle the BigTest agent with the test so it can be injected into the page.
Our Browser agent already creates test manifests which are test bundles. We need to create a similar bundle that includes the agent and a reporter that uses console.log.

Discord Discussion Link

[dagda1]

I think this is really cool and a move away from the age of endless configuration and endless setup :). Totally the right way.

I love the no setup ethos.

I love the wolf UI.

There is also overlap between creating mock data for the simulation and mock data for test inputs.

It is all very exciting!

[taras]

"No setup" might become even easier with ES6 modules. Just inject the script and execute your tests.