UI 在 puppeteer 上似乎有所不同

Question

尽管我使用 puppeteer 进行的端到端测试的大部分过程工作正常（这是一个相当简单的一系列页面。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，但我想这不是罪魁祸首。

Answer 1

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

代码示例

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

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

您也可以通过调用函数 page.setViewport.

来更改它

UI 在 puppeteer 上似乎有所不同

UI seems different on puppeteer

puppeteer

jest-puppeteer