UI кажется другим на кукловода

Question

Несмотря на то, что большая часть процесса моего сквозного теста с кукловодом работает нормально (это просто серия page.select/type/waitfor/etc), пользовательский интерфейс кажется искаженным.

Когда процесс закончен, в самом его конце пользовательский интерфейс перенастраивается на то, как он должен выглядеть, но только после того, как все закончится. Я попытался запустить простой экземпляр 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 В режиме, страница будет работать с заданным окном просмотра. По умолчанию этот размер области просмотра 800x600, Если вы измените размер окна на что-то большее, оно действительно может выглядеть так, будто страница запускается внутри фрейма. Вы не можете изменить размер окна просмотра, изменив размер окна браузера. Вы должны полагаться на функции для этого.

Пример кода

Чтобы изменить видовой экран по умолчанию, вы можете добавить аргумент при вызове puppeteer.launch:

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

Вы также можете изменить его, вызвав функцию page.setViewport,