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

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

0 голосов
/ 03 мая 2019

Несмотря на то, что большая часть процесса моего сквозного теста с кукловодом работает нормально (это довольно просто серия 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, хотя я думаю, что это не виновник здесь.

1 Ответ

1 голос
/ 06 мая 2019

Даже если вы запускаете кукловода в режиме headless: false, страница будет работать с заданным окном просмотра. По умолчанию размер области просмотра составляет 800x600. Если вы измените размер окна на что-то большее, оно действительно может выглядеть так, будто страница запускается внутри фрейма. Вы не можете изменить размер окна просмотра, изменив размер окна браузера. Вы должны полагаться на функции для этого.

Пример кода

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

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

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

...