时间戳

首页 > 解决方案 > 用户界面在 puppeteer 上似乎有所不同

puppeteer - 用户界面在 puppeteer 上似乎有所不同

问题描述

尽管我使用 puppeteer 进行端到端测试的大部分过程都可以正常工作（这是一系列相当简单的 page.select/type/waitfor/etc），但 UI 似乎有偏差。

当流程结束时，UI 会重新调整到它应该看起来的样子，但前提是一切都结束了。我尝试启动一个普通的 Chromium 实例，它看起来也应该如此。

测试代码看起来像这样

beforeAll(async () => {
  browser = await puppeteer.launch(
    {
      headless: false,
      slowMo: 250,
    }
  )
  page = await browser.newPage()
  await page.goto('http://localhost:3000/');
})

describe('on page load', () => {
  test('MessageLists loads', async () => {
    await page.waitForSelector('.MessageList', { timeout: 3000 })
    await page.waitForSelector('.messageOuterContainer', { timeout: 10000 })
  },
    16000
  );
  test('Post Question', async () => {
    await page.waitForSelector('.messageOuterContainer', { timeout: 10000 })
    await page.focus('.input');
    await page.keyboard.type('test');
    await page.$('.AnswerList');
    await page.screenshot({ path: 'screenshot1.png' });
  }, 20000)
})

afterAll(() => {
  // browser.close()
})

我在 MacOS Mojave 10.14 上，但我想这不是罪魁祸首。

标签： puppeteerjest-puppeteer

解决方案

即使您在headless: false模式下启动 puppeteer，页面也会以给定的视口运行。默认情况下，视口大小为800x600. 如果您将窗口调整为更大的尺寸，它可能看起来确实像页面在 iframe 中运行。您不能通过调整浏览器窗口的大小来调整视口的大小。为此，您必须依赖函数。

代码示例

要更改默认视口，您可以在调用时添加一个参数puppeteer.launch：

const browser = await puppeteer.launch({
    defaultViewport: { // example: 1600x800
        width: 1600,
        height: 800
    },
    headless: false,
    slowMo: 250,
})

您也可以通过调用函数来更改它page.setViewport。

推荐阅读