Running in a terminal

The React Browser Tests package provides some utilities to facilitate running tests via terminal. A headless browser (e.g. puppeteer) is necessary. tsx is also recommended to run the tests. These packages are not included in the React Browser Tests package. They can be installed with:

yarn add --dev puppeteer tsx

Example script - puppeteer

Below is an example script that uses puppeteer. It receives a URL of a page with tests, and runs the tests in a headless browser. The script logs the test results to the console.

import * as puppeteer from "puppeteer";
import { getNumFailedTests } from "react-browser-tests";
import { TestScriptYargsArgv, defaultPuppeteerLaunchOptions, goToUrl, initPage, showTestProgress, testScriptYargsArgv } from "react-browser-tests/scripts";

// Function to launch Puppeteer and visit a URL in headless mode.
async function runTestsOnUrl(url: string, log: boolean) {
  const browser = await puppeteer.launch(defaultPuppeteerLaunchOptions);
  const page = await initPage(browser, log);
  await goToUrl(page, url);

  // Wait until all tests are complete. Show the test results on the console.
  const testContainerStates = await showTestProgress(page);
  const numFailedTest = getNumFailedTests(testContainerStates);

  if (numFailedTest) {
    console.error(`${numFailedTest} test(s) failed.`);
  } else {
    console.log("All tests passed ✨");
  }

  await browser.close();
}

runTestsOnUrl((testScriptYargsArgv as TestScriptYargsArgv).url, (testScriptYargsArgv as TestScriptYargsArgv).log).catch(error => {
  console.error("Error running tests on URL:", error);
  process.exit(1);
});

If we create a file called puppeteerScriptExample.ts with the above script, we can run it with:

npx tsx puppeteerScriptExample.ts -u <test page url>

Terminal helpers - puppeteer

const defaultPuppeteerLaunchOptions = {
  headless: true,
  args: ['--no-sandbox', '--disable-setuid-sandbox']
};

import * as puppeteer from "puppeteer";
import { defaultPuppeteerLaunchOptions, initPage } from "react-browser-tests/scripts";

const browser = await puppeteer.launch(defaultPuppeteerLaunchOptions);
const page = await initPage(browser, true);

Other things that may help

React Browser Tests adds an object to the window global: window.reactBrowserTests. This object contains the following:

type ReactBrowserTestsWindowObject = {
  testContainers: TestContainerState[];
  getContainerState: (containerId?: string, windowRef?: Window) => TestContainerState | undefined;
  getTestRecord: (containerId?: string, windowRef?: Window) => Record<string, TestType>;
  getTestArray: (containerId?: string, windowRef?: Window) => TestType[];
  checkIfContainerTestsComplete: (containerId?: string, windowRef?: Window) => boolean;
  checkIfTestsFromAllContainersComplete: (windowRef?: Window) => boolean;
  sumTotalNumberOfTests: (windowRef?: Window) => number | null;
  checkIfAllTestsRegistered: (windowRef?: Window) => boolean;
}

These properties can be accessed by a puppeteer script. Here's an example of how to fetch the container states:

// page is a puppeteer page object.
testContainerStates = await page.evaluate(() => {
  return window.reactBrowserTests.testContainers;
});

The window functions and script helpers are available in the following files:

• puppeteerHelpers.ts
• window.ts