Forem: HeadlessTesting

Screen recording with Playwright

HeadlessTesting — Wed, 03 Jun 2020 15:48:54 +0000

When you run headless tests with Playwright, the browser will run the test without showing any browser window (UI).

The advantage of headless testing is that it is much faster to run tests than for example with Selenium.
One disadvantage however is that it makes it harder to debug any problems, since you can not record the UI into a video file.

If you're looking to record videos of your browser sessions, then you can use a NPM package called playwright-video. This package uses the DevTools protocol (more specifically Page.startScreencast) to capture screencastFrame's and glue these together with ffmpeg.

Installation

To start, please install the necessary NPM packages:
npm i -D playwright-video ffmpeg-static

Running your first test

Now you can run your first test with video. The example below will open a remote browser session in the HeadlessTesting cloud and send the video frames back. playwright-video will then glue these frames together into a video file and save it on your disk.

const pw = require('playwright-core');
const { saveVideo } = require('playwright-video');

(async () => {
  const browser = await pw.chromium.connect({
    wsEndpoint: 'wss://chrome.headlesstesting.com?token=[YOUR-TOKEN]&browserVersion=dev',
  });
  const context = await browser.newContext();
  const page = await context.newPage();

  await saveVideo(page, '/tmp/video.mp4');

  await page.goto('https://headlesstesting.com/');
  await page.screenshot({ path: 'screenshot.png' });

  await browser.close();
})();

This basic example will open a Chrome browser in the HeadlessTesting.com cloud, open a tab and go to our webpage, and then finally take a screenshot. It will save a video recording of these actions in a file called /tmp/video.mp4 on your disk.

Integration with Jest and Mocha

This can be integrated in your favourite test runner as well. Simply add the logic to your before/after hooks to capture a video:

let capture
beforeEach(async function() {
    this.timeout(35000)
    browser = await pw.chromium.connect({
        wsEndpoint: 'wss://chrome.headlesstesting.com?token=[YOUR-TOKEN]&browserVersion=dev',
    })
    context = await browser.newContext()
    page = await context.newPage()
    capture = await saveVideo(page, `${this.currentTest.title.replace(/ +/g, '_')}.mp4`)
})
afterEach(async function() {
    await capture.stop()
})

Headless Testing with Playwright and Jest

HeadlessTesting — Mon, 11 May 2020 09:53:38 +0000

Playwright is a NodeJS package which can be used to automate Chrome, Firefox, Edge and Safari browsers in a headless manner.

It is developed by the same team that created Puppeteer at Google and is now actively developed at Microsoft.

The advantage of using Headless Testing is that it uses a real browser, but is much faster to run your tests than for example Selenium.

The combination of Jest, which is a NodeJS test runner framework maintained by Facebook and Playwright makes for a very robust Headless Testing toolkit.

Installing jest-playwright
There's a jest-playwright NPM library which makes it easy to get started with Jest and Playwright.

The package comes in combination with a jest-playwright-preset which you can then use as a preset for Jest in jest.config.js.

To install these packages, please enter this command in your terminal:
npm install -D jest jest-playwright-preset playwright

Once you've included the Playwright preset, you can either run the tests on a browser on your computer, or connect it to an online browser grid.

module.exports = {
  rootDir: '.',
  testTimeout: 20000,
  testMatch: [
    '/*.spec.js'
  ],
  preset: 'jest-playwright-preset'
}

Configuring jest-playwright
To connect your tests to a Headless Browser grid, please specify the connectBrowserApp setting in a file called jest-playwright.config.js.

module.exports = {
    connectBrowserApp: {
        wsEndpoint: 'wss://chrome.headlesstesting.com/?token=[YOUR-API-TOKEN]&browserVersion=dev'
    }
}

This will instruct Jest Playwright to start and use a headless Chrome browser on the HeadlessTesting.com grid.

Running your first test with jest-playwright
Now you are ready to run your first test with Jest and Playwright.
To get started, please create a new test file sample.spec.js:

describe('Google', () => {
  beforeAll(async () => {
    await page.goto('https://google.com')
  })

  it('should display google text on page', async () => {
    await expect(page).toMatch('google')
  })
})

You can now run this sample test:
$ jest
Depending on whether you want to run this test locally or on a cloud platform, the test will start a headless browser and navigate to Google, finally verifying if the word google appears on the page.

expect-playwright
There's also a NPM package available called expect-playwright. This is a Jest utility matcher for Playwright. It exposes various matchers, making it easier and cleaner to write certain assertions in your test scripts.

To get started, you can install the library:
npm install -D expect-playwright

Now you can use various matchers:

await expect(page).toHaveText("h1", "HeadlessTesting.com")

The various matchers include:

toHaveSelector
toHaveText
toEqualText
toEqualValue

Great Combo
Jest and Playwright is a great combination to do Headless testing. Both frameworks are under active development and keep getting better.

Headless Testing with Puppeteer

HeadlessTesting — Wed, 25 Mar 2020 15:28:35 +0000

Puppeteer is a popular open-source library, built to control a headless instance of the Chrome and Chromium browser.

Puppeteer is used to automate any action you can perform in the browser. You can use it to automate flows, take screenshots and generate PDFs.
It is compatible with Chrome, Firefox and Microsoft Edge (Chromium).

Why should you use Puppeteer?

There are multiple reasons why you should want to use Puppeteer.
Some of the more popular reasons include:

Generating PDFs
Taking screenshots

Generating PDFs

Let's say you want to generate a PDF of a specific webpage, for example an invoice that your customer can download. Instead of setting up a third-party tool like wkhtmltopdf, you can choose Puppeteer.

Generating PDFs through the Chromium browser will deliver a pixel-perfect PDF.
Puppeteer provides multiple different options to customise the PDF file, ranging from orientation and scale to margins and formats.

Taking screenshots

Puppeteer makes it easy to take screenshots from any web page. There are some options to customise the screenshot, including quality, clipping and other formatting options.

Why should I use Puppeteer for Headless Testing?

Yes, it's true that there are alternative solutions, such as Selenium. But we believe there's a couple of reasons why you should go for Headless Testing with Puppeteer:

Puppeteer uses the DevTools Protocol, this is a protocol built into Chrome/Chromium and optimised for both accuracy and performance.
Headless is enabled by default. Contrary to Selenium, running tests in headless mode is a lot faster, because the browser does not have to do any visible rendering during the test.
Selenium WebDriver uses the HTTP protocol to send and receive commands between the client and the node. Puppeteer uses a WebSocket tunnel, which means less latency and faster tests.

How to run tests with Puppeteer

A popular package to run automated tests with Puppeteer is called Jest-Puppeteer.
This open-source package allows you to use Jest as a test runner with Puppeteer.

If you include a package called expect-puppeteer, you can write automated tests in a clean way, see this example:

import 'expect-puppeteer'

describe('Google', () => {
  beforeAll(async () => {
    await page.goto('https://google.com')
  })

  it('should display "google" text on page', async () => {
    await expect(page).toMatch('google')
  })
})

This will launch a browser on your local machine and run the test in headless mode. You will receive a test status back from Jest.

Running Headless Tests in the Cloud

The next step is to run all the tests you've created with a CI (Continuous Integration) system.

You could use a cloud provider such as HeadlessTesting to have your Puppeteer scripts connect with the browsers in our grid. Then you can run multiple tests in parallel, drastically shortening the total test duration of your test suite.