Question

即使我使用puppeteer进行的端到端测试的大部分过程都可以正常工作（这只是一系列的page.select/type/waitfor/etc系列），UI似乎还是偏斜的。

该过程结束后，UI会重新调整为应具有的外观，但前提是一切都必须结束。我尝试启动一个普通的Chromium实例，看起来也应该如此。

测试代码看起来像这样

const x = d3
  .scaleLinear()
  .domain([
    d3.min(data, ({ Year }) => (Year ? Year - 1 : 0)) as number,  // cast to number
    d3.max(data, ({ Year }) => (Year ? Year + 1 : 0)) as number   // cast to number
  ])
  .range([0, width]);

我在MacOS Mojave 10.14上，虽然我认为这不是罪魁祸首。

Answer 1

即使您以headless: false模式启动人偶，页面也将以给定的视口运行。默认情况下，视口大小为800x600。如果您将窗口调整为更大的尺寸，则它的确看起来像是在iframe中运行的页面。您无法通过调整浏览器窗口的大小来调整视口的大小。为此，您必须依靠功能。

代码示例

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

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

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

UI在puppeteer上似乎有所不同

1 个答案: