---
title: "Headless testing web applications using Jest and Puppeteer in JavaScript"
canonical: "https://docs.getxray.app/space/XRAYCLOUD/74321497/Headless%20testing%20web%20applications%20using%20Jest%20and%20Puppeteer%20in%20JavaScript"
format: markdown
---
# Overview

In this tutorial, we will create some headless tests in JavaScript using Puppeteer and Jest framework; we'll use "jest-junit" to generate a compatible JUnit XML report.


Requirements

- puppeteer
- jest-environment-node
- jest
- jest-junit

# Code

The following code and setup instructions were inspired by the [jest-puppeteer-example](https://github.com/xfumihiro/jest-puppeteer-example) tutorial.

The first thing we need to do is configure jest to use the "jtest-junit" reporter in order to produce a JUnit XML report.


<details>
<summary>jest.config.js</summary>

```javascript
module.exports = {
  globalSetup: './setup.js',
  globalTeardown: './teardown.js',
  testEnvironment: './puppeteer_environment.js',
  reporters: [ "default",
         ["jest-junit", {"classNameTemplate": "e2e","titleTemplate": "{classname} {title}"}]
        ]
}
```
</details>


We will create two simple tests based on Google search.

##### **__tests__/google.js**

```javascript
const timeout = 5000

describe(
  '/ (Search Home Page)',
  () => {
    let page
    beforeAll(async () => {
      page = await global.__BROWSER__.newPage()
      await page.goto('https://www.google.com', { waitUntil: 'networkidle0' })
    }, timeout)

    afterAll(async () => {
      await page.close()
    })

    it('should return a proper title', async () => {
      // just to make sure
      const title = await page.title();
      expect(title).toBe('Google');
    })
    it('should return link to Marketplace upon searching Xray', async () => {
      await page.waitForSelector('input#lst-ib',{ visible: true});
      await page.type('input#lst-ib', 'Xray test management')

      await page.screenshot({path: 'screenshot1.png'});
      await page.keyboard.press('Enter');

      await page.waitForSelector('div#rcnt',{ visible: true});
      await page.screenshot({path: 'screenshot2.png'});
      const results = await page.evaluate(() => document.querySelector('div#rcnt').innerText);
      expect(results).toContain('Xray - Test Management for Jira | Atlassian Marketplace');
    })
  },
  timeout
)


```


After running the tests and generating the JUnit XML report (e.g. junit.xml), it can be imported to Xray (by using either the REST API or the **Import Execution Results** action within the Test Execution).

```
npm test __test__/google.js
```


![image](media://446183fc-cca3-4a13-a6bf-4cab547418af)


Each test/"it block" is mapped to a Generic Test in Jira, and the **Generic Test Definition** field contains an unique identifer based on the Test Suite and the test name. In fact, the [jest-junit package](https://www.npmjs.com/package/jest-junit) allows full customization of some attributes of the JUnit XML, which in turn will allow you to define exactly how to fine-tune the value for the **Generic Test Definition** field accordingly with the rules described in [Taking advantage of JUnit XML reports](https://getxraydocs.atlassian.net/wiki/spaces/XRAYCLOUD/pages/44564745).

The Execution Details of the Generic Test contains information about the Test Suite, which in this case corresponds to the name of the "describe" block.

![image](media://ccc77ed2-b079-4da8-816b-169e7ef32bbd)

# References

- [Puppeteer](https://facebook.github.io/jest/docs/en/puppeteer.html)
- [Jest Puppeteer Example](https://github.com/xfumihiro/jest-puppeteer-example)
- [Jest JUnit](https://www.npmjs.com/package/jest-junit)
- [Running Puppeteer Examples](https://github.com/GoogleChrome/puppeteer/blob/master/examples/)