介绍
在使用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
