介绍

在使用Puppeteer时，我们会更希望与Jest一起使用，这样在写脚本时在Jest的组织下，结构会更清晰。

下面给出的版本依赖是puppeteer@4.0.0。

自己项目根目录下的文件

组织

image

下面是各个文件的配置

---

package.json

{

"dependencies": {

"@babel/runtime":"7.10.3"

  },

"devDependencies": {

"@babel/plugin-transform-runtime":"7.10.3",

"@babel/preset-env":"7.10.3",

"babel-core":"6.26.3",

"babel-jest":"26.0.1",

"expect-puppeteer":"4.4.0",

"jest":"26.0.1",

"jest-puppeteer":"4.4.0",

"puppeteer":"4.0.0"

  },

"scripts": {

"test":"jest"

  }

}

---

.babelrc

{

"presets": ["@babel/preset-env"],

"plugins": [

["@babel/plugin-transform-runtime",

{

"regenerator":true

      }

]

]

}

---

.eslintrc.js

module.exports = {

env: {

jest:true,

},

globals: {

page:true,

browser:true,

context:true,

jestPuppeteer:true,

},

}

---

jest.config.js

module.exports = {

preset:"jest-puppeteer",

globalSetup:'./setup.js',

globalTeardown:'./teardown.js',

testEnvironment:'./puppeteer_environment.js',

setupFilesAfterEnv: ["expect-puppeteer"]

};

---

jest-puppeteer.config.js

module.exports = {

launch: {

// dumpio: true,

// headless: process.env.HEADLESS !== 'false',

        headless:false,

args:['--user-data-dir=RunData','--start-maximized',],

slowMo:20,

delay:100

    },

browser:'chromium',

browserContext:'default'

};

---

puppeteer_environment.js

const PuppeteerEnvironment =require('jest-environment-puppeteer')

class CustomEnvironmentextends PuppeteerEnvironment {

async setup() {

await super.setup()

// Your setup

    }

async teardown() {

// Your teardown

        await super.teardown()

}

}

module.exports = CustomEnvironment;

---

setup.js

// global-setup.js

const chalk =require('chalk');

import {setDefaultOptions }from 'expect-puppeteer';

const {setup:setupPuppeteer } =require('jest-environment-puppeteer');

setDefaultOptions({timeout:1000 });

module.exports =async function globalSetup(globalConfig) {

console.log(chalk.green('Setup Puppeteer'));

await setupPuppeteer(globalConfig);

// Your global setup

};

---

teardown.js

//global-teardown.js

const {teardown:teardownPuppeteer } =require('jest-environment-puppeteer');

const chalk =require('chalk');

module.exports =async function globalTeardown(globalConfig) {

// Your global teardown

    console.log(chalk.green('Teardown Puppeteer'));

await teardownPuppeteer(globalConfig);

};

---

示例

import puppeteer from "puppeteer";

import expect from 'expect-puppeteer';

const iPhone =puppeteer.devices['iPhone 6'];

describe('yourname', ()=> {

it('yourname',async () => {

await page.emulate(iPhone);

await page.goto('******');

},180000)

});

执行

npm test file/path.js