Перейти до основного змісту
Версія: 27.x

Використання з puppeteer

За допомогою Global Setup/Teardown та Async Test Environment APIs, Jest може коректно працювати з puppeteer.

note

Створення покриття коду для тестових файлів за допомогою Puppeteer на даний час неможливе, якщо ваш тест використовує page.$eval, page.$$eval або page.evaluate оскільки перехідна функція виконується за межами області Jest. Перевірте issue #7962 на GitHub.

Використовуємо налаштування jest-puppeteer

Jest Puppeteer надає всю необхідну конфігурацію, щоб запустити ваші тести за допомогою Puppeteer.

  1. Спочатку встановіть jest-puppeteer
yarn add --dev jest-puppeteer
  1. Додайте preset у вашій Jest конфігурації:
{
"preset": "jest-puppeteer"
}
  1. Створіть тест
describe('Google', () => {
beforeAll(async () => {
await page.goto('https://google.com');
});

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

Немає потреби завантажувати будь-які залежності. Puppeteer's page and browser класи будуть автоматично завантажені

Дивіться документацію.

Спеціальний приклад без шаблону jest-puppeteer

Ви тако ж можете налаштувати puppeteer з нуля. Основна ідея:

  1. launch & file the websocket endpoint of puppeteer with Global Setup
  2. під'єднатися до puppeteer з кожного тестового середовища
  3. закрити puppeteer з Global Teardown

Ось приклад скрипту для GlobalSetup

setup.js
const {mkdir, writeFile} = require('fs').promises;
const os = require('os');
const path = require('path');
const puppeteer = require('puppeteer');

const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');

module.exports = async function () {
const browser = await puppeteer.launch();
// store the browser instance so we can teardown it later
// this global is only available in the teardown but not in TestEnvironments
global.__BROWSER_GLOBAL__ = browser;

// use the file system to expose the wsEndpoint for TestEnvironments
await mkdir(DIR, {recursive: true});
await writeFile(path.join(DIR, 'wsEndpoint'), browser.wsEndpoint());
};

Далі нам треба користувацьке тестове середовище для puppeteer

puppeteer_environment.js
const {readFile} = require('fs').promises;
const os = require('os');
const path = require('path');
const puppeteer = require('puppeteer');
const NodeEnvironment = require('jest-environment-node');

const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');

class PuppeteerEnvironment extends NodeEnvironment {
constructor(config) {
super(config);
}

async setup() {
await super.setup();
// get the wsEndpoint
const wsEndpoint = await readFile(path.join(DIR, 'wsEndpoint'), 'utf8');
if (!wsEndpoint) {
throw new Error('wsEndpoint not found');
}

// connect to puppeteer
this.global.__BROWSER_GLOBAL__ = await puppeteer.connect({
browserWSEndpoint: wsEndpoint,
});
}

async teardown() {
await super.teardown();
}

getVmContext() {
return super.getVmContext();
}
}

module.exports = PuppeteerEnvironment;

Нарешті ми можемо закрити екземпляр puppeteer та очистити файл

teardown.js
const fs = require('fs').promises;
const os = require('os');
const path = require('path');

const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
module.exports = async function () {
// close the browser instance
await global.__BROWSER_GLOBAL__.close();

// clean-up the wsEndpoint file
await fs.rm(DIR, {recursive: true, force: true});
};

Після всіх налаштувань, ми можемо писати тести як:

test.js
const timeout = 5000;

describe(
'/ (Home Page)',
() => {
let page;
beforeAll(async () => {
page = await global.__BROWSER_GLOBAL__.newPage();
await page.goto('https://google.com');
}, timeout);

it('should load without error', async () => {
const text = await page.evaluate(() => document.body.textContent);
expect(text).toContain('google');
});
},
timeout,
);

Finally, set jest.config.js to read from these files. (jest-puppeteer preset виконує щось на зразок цього під капотом.)

module.exports = {
globalSetup: './setup.js',
globalTeardown: './teardown.js',
testEnvironment: './puppeteer_environment.js',
};

Ось код повний робочий приклад.