How to Test with Jest using 0Browser, a Headless Browser as a Service

Test with Jest

Let's see how we can test a web page using 0Browser, Jest and Jest-Puppeteer.

In this example, we will walk through an end to end testing scenario.

Prerequisites

1. NPM packages

let's make sure you have all the dependencies needed for this example installed on your system. You can add Puppeteer, Jest and Jest-Puppeteer by running the following commands:
npm init -y
# initialize and say yes to all default questions.

> npm install --save-dev jest-puppeteer puppeteer jest

Also Make sure you have Node.js installed on your system and have your 0Browser Account API Key handy.
If something doesn't add up here, please check out the 0Browser Getting Started guide for all details on this.

Setup

Now that we have the prerequisites in order, let's get to the fun part!
Use your favorite IDE to create a new JS file called google.test.js.
Following code snippet shows how to test www.Google.com landing page title is correctly set to "Google"!
describe('Google', () => {
    beforeAll(async () => {
        await page.goto('https://google.com');
    });

    it('should be titled "Google"', async () => {
        await expect(page.title()).resolves.toMatch('Google');
    });
});

let's create another file named jest-puppeteer.config.js
jest-puppeteer reads this config file automatically in order to initialize Puppeteer. According to Github documentation all Puppeteer launch or connect options can be specified in jest-puppeteer.config.js at the root of the project. You can fine more information on this here.
module.exports = {
    connect: {
        browserWSEndpoint: 
        'wss://proxy.0browser.com?token={YOUR-API-KEY}&timeout=60000'
    },
    browser: 'chromium'
  }

Also make sure that in the package.json file, scripts and dependencies section looks as shown in the following snippet.
{
  "name": "0browser-documentation",
  "version": "1.0.0",
  "description": "testing title on google",
  "jest": {
    "preset": "jest-puppeteer"
  },
  "devDependencies": {
    "jest": "^25.1.0",
    "jest-puppeteer": "^4.4.0",
    "puppeteer": "^2.0.0"
  },
  "scripts": {
    "test": "jest"
  },
  "author": "0browser"  
}

Run

Now you are ready to run the test using the following command.
 > npm run test

You should see an output similar to the screen shot below, verifying that the Google landing web page title is correctly set!
jest success results

Simple, Right ? Great job!

Find this source code on Github

Now you can virtually test any component or interaction on any web page using 0Browser, Jest and Jest-Puppeteer.

...
0Browser