Name: jest-puppeteer
Owner: Formidable
Description: Run your tests using Jest & Puppeteer ??
Forked from: smooth-code/jest-puppeteer
Created: 2018-03-17 13:18:37.0
Updated: 2018-03-17 13:18:39.0
Pushed: 2018-03-17 02:45:49.0
Size: 186
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Run your tests using Jest & Puppeteer ??
install jest-puppeteer-preset puppeteer
Update your Jest configuration:
reset": "jest-puppeteer-preset"
Use Puppeteer in your tests:
ribe('Google', () => {
foreAll(async () => {
await page.goto('https://google.com')
('should display "google" text on page', async () => {
await expect(page).toMatch('google')
Writing integration test can be done using Puppeteer API but it can be complicated and hard because API is not designed for testing.
To make it simpler, expect-puppeteer API add some specific matchers if you make expectation on a Puppeteer Page.
Some examples:
ssert that current page contains 'Text in the page'
t expect(page).toMatch('Text in the page')
ssert that a button containing text "Home" will be clicked
t expect(page).toClick('button', { text: 'Home' })
ssert that a form will be filled
t expect(page).toFillForm('form[name="myForm"]', {
rstName: 'James',
stName: 'Bond',
Jest Puppeteer integrates a functionality to run start a server when your test suite is started. It automatically close the server when tests are done.
To use it, specify a server section in your jest-puppeteer.config.js.
est-puppeteer.config.js
le.exports = {
rver: {
command: 'node server.js',
port: 4444,
Jest Puppeteer automatically detect the best config to start Puppeteer but sometimes you may need to specify custom options. All Puppeteer launch options can be specified in jest-puppeteer.config.js at the root of the project. Since it is JavaScript, you can use all stuff you need, including environment.
est-puppeteer.config.js
le.exports = {
unch: {
dumpio: true,
headless: process.env.HEADLESS !== 'false',
Jest Puppeteer exposes two new globals: browser, page and expectPage. If you want to avoid errors, you can add them to your .eslintrc.js:
eslintrc.js
le.exports = {
v: {
jest: true,
obals: {
page: true,
browser: true,
expectPage: true,
Sometimes you want to use your own environment, to do that you can extend PuppeteerEnvironment.
t PuppeteerEnvironment = require('jest-environment-puppeteer')
s CustomEnvironment extends PuppeteerEnvironment {
ync setup() {
await super.setup()
// Your setup
ync teardown() {
// Your teardown
await super.teardown()
le.exports = CustomEnvironment
globalSetup or globalTeardownIt is possible to access globalSetup or globalTeardown in your scripts.
t {
tup: setupPuppeteer,
ardown: teardownPuppeteer,
require('jest-environment-puppeteer')
c function setup() {
ait setupPuppeteer()
...
c function teardown() {
...
ait teardownPuppeteer()
global.browserGive access to the Puppeteer Browser.
should open a new page', async () => {
nst page = await browser.newPage()
ait page.goto('https://google.com')
global.pageGive access to a Puppeteer Page opened at start (you will use it most of time).
should fill an input', async () => {
ait page.type('#myinput', 'Hello')
global.expect(page)Helper to make Puppeteer assertions, see documentation.
t expect(page).toMatch('A text in the page')
..
jest-puppeteer.config.jsYou can specify a jest-puppeteer.config.js at the root of the project.
launch <[object]> All Puppeteer launch options can be specified in jest-puppeteer.config.js at the root of the project. Since it is JavaScript, you can use all stuff you need, including environment.server <[Object]> Server optionscommand <[string]> Command to start serverport <[number]> If specified, it will wait port to be listenedoptions <[Object]> Optional options for spawndest-puppeteer.config.js
le.exports = {
unch: {
dumpio: true,
headless: process.env.HEADLESS !== 'false',
rver: {
command: 'node server.js',
port: 4444,
Thanks to Fumihiro Xue for his great Jest example.
MIT