Функция setContent кукловода не делает сетевые запросы для статических файлов

Question

В настоящее время я пытаюсь выяснить, как отобразить свое приложение React в браузере кукловода, чтобы в будущем я мог сделать снимок экрана и выполнить визуальный регрессионный тест. В большинстве случаев я видел, как это было достигнуто, путем запуска экспресс-сервера и обслуживания html-страницы при запросе определенной конечной точки. Однако я хотел бы избежать запуска сервера, если это возможно, и хотел бы, возможно, использовать что-то вроде ReactDOM.render в браузере кукловода, чтобы отобразить его так, как это сделал бы React.

До сих пор я пытался создать сборку приложения React, а затем с помощью api page.setContent пользователя puppeteer вывести файл index.html сборки непосредственно в браузер puppeteer. Однако, когда я делаю это, браузер ничего не отображает на экране и не делает сетевые запросы для статических файлов.

Вот как это выглядит у кукловода: браузер кукловода

Это метод с page.setContent:

const buildHTML = await fs.readFileSync('build/index.html', 'utf8');

// create a new browser tab
const page = await browser.newPage();
await page.setViewport({ width: 1920, height: 1080 });

// set page's html content with build's index.html
await page.setContent(buildHTML);

// take a screenshot
const contentLoadingPageScreenshot = await page.screenshot({fullPage: true});

Кроме того, если кто-нибудь знает, как лучше запустить тест снимка изображения без необходимости запуска сервера, пожалуйста, дайте мне знать. Спасибо.

Answer 1

С помощью ref: puppeteer doc вы можете указать для setContent параметры ожидания сетевого запроса.

await page.setContent(reuslt, {
    waitUntil: ["load","networkidle0"]
});