Seamless End-To-End Browser Tests with QA Wolf

Browser tests are a great way for teams to quickly write useful end-to-end tests that check the most important pieces of functionality of your app. Depending on the tooling, writing tests can be automated using browser extensions, which enable you to start a recording, browse around your application, and use the steps you performed to generate tests. Configurations that allow running browser tests in parallel reduce the time it takes to complete test runs, allowing you to write even more tests to achieve broader coverage.

A few weeks ago, I wrote about setting up Cypress tests to run in CI. Cypress is a powerful browser-testing foundation and, until now, one of the few great choices when it came to browser tests. If you wanted features like parallel test runs or recordings, though, you were required to use their Dashboard service, which works great, but locks you in.

QA Wolf is another recent attempt to browser testing, based on Node.js, Playwright, and Jest, which allows you to generate browser tests based on a powerful recorder, and then run those tests, in parallel, in any CI environment of choice, supporting features like recording videos of test runs, and capturing browser logs. Using Playwright as the browser automation library also gives the instant benefits of supporting Chrome (Chromium), Firefox, and Safari (WebKit) out of the box, all using the same API.

🐺 Getting Started with QA Wolf

Let's start by creating our project with the following commands

# Create our directory, switch to it
mkdir qawolf-test && cd qawolf-test

# Initialize project (create package.json)
yarn init -y

# Install and configure QA Wolf
yarn create qawolf

You'll be asked to confirm the location QA Wolf will use for storing generated tests in and detecting tests to run in general. After we've gotten through the initial setup, we can go ahead and record our first test! For this, run

yarn qawolf create https://brunoscheufler.com "blog posts should load"

This will open up an instance of Chromium and start recording the test. Click around for a bit and save the test by heading back to the terminal and confirming 💾 Save and exit. We can see that QA Wolf generated a test file at .qawolf/blog posts should load.test.js, which contains something like the following

const qawolf = require('qawolf');

let browser;
let page;

beforeAll(async () => {
  browser = await qawolf.launch();
  const context = await browser.newContext();
  await qawolf.register(context);
  page = await context.newPage();
});

afterAll(async () => {
  await qawolf.stopVideos();
  await browser.close();
});

test('blog posts should load', async () => {
  await page.goto('https://brunoscheufler.com/');
  await page.click('text=Blog');
  await qawolf.scroll(page, 'html', { x: 0, y: 2931 });
  await page.click('[href="/blog/archive/1"]');
  await qawolf.scroll(page, 'html', { x: 0, y: 0 });
  await page.click('text=Blog');
});

As you can see, everything in here is a completely regular Jest test suite, which first takes care of launching a browser instance and then goes on to run the test generated based on our actions during recording.

QA Wolf emphasizes the design decision to keep the core API minimal and rather rely on Playwright and Jest to handle what they do best; manage browsers and run tests. I really like the decision the team made here as this allows to leverage all the community efforts made in those projects to improve the experience of creating and running browser tests even further.

But now, let's get back to running our tests! QA Wolf exposes a few environment variables we can supply to toggle features such as storing browser logs and recording videos of the test run (which is only supported on Chromium right now, due to Playwright limitations).

# Store browser logs in .artifacts directory
export QAW_ARTIFACT_PATH=.artifacts

# Record videos of the browser
export FFMPEG_PATH=/usr/local/bin/ffmpeg

yarn qawolf test --headless

This will define that artifacts be stored in a temporary directory and that we should record videos of our tests, using an installation of FFmpeg (installation details are covered here).

And just with those few steps, we generated our first browser test and ran it! There's nothing left other than to record all the tests! We only covered the basics, though, editing tests, managing authentication and other great resources are available as guides. Automating test runs in CI is similarly straightforward: Because it's just Jest and headless Playwright in the end, you can run your tests anywhere, anytime.

Oh, and don't forget to run yarn qawolf howl, you're in for a surprise 🐺

For me, one of the most important aspects of choosing QA Wolf is the philosophy of not building the whole system again. We already use Jest for testing our code, and tools like Puppeteer and Playwright for automating browsers. We just needed a project to glue this together, and I think this is where QA Wolf really has a bright future.

I'm excited about the features that are up next and hope the community picks it up and runs with it. If you're still searching for a way to create and run browser tests, go ahead and give it a shot!

Thanks for reading! If you've got any questions, suggestions, or feedback in general, don't hesitate to reach out on Twitter or by mail.