"Viewport“到底是什么？

Question

我很难理解"Viewport“到底是什么。文档说它定义了“页面”中的“宽度”和“高度”。再说一遍，“页面”到底是什么？我以前认为它是一个浏览器选项卡，但这也是错误的，参见下面.

我的测试失败了，因为我似乎误解了"Viewport"：

page.setViewport({ width: 640, height: 480 })
expect(window.innerWidth).toBe(640) // FAIL, it's 1366, Puppeteers default

从谷歌的周围，我知道有选择推出另一个窗口大小的Puppeteer。但这不是我想要的，有两个原因：

1. 它仍然不能解释什么是"Viewport“
2. 我不能在每一个测试中“重新启动”Puppeteer (我正在测试响应行为)

https://puppeteer.github.io/puppeteer/docs/puppeteer.page.viewport

Answer 1

您应该期望得到page.evaluate的window.innerWidth结果。

记住，页面内部的执行上下文与傀儡上下文是不同的。

import puppeteer, { Browser, BrowserContext, Page } from 'puppeteer'

const start = async () => {
    const browser: Browser = await puppeteer.launch({ headless: false })
    const page: Page = await browser.newPage()
    page.setViewport({ width: 640, height: 480 })
    await page.goto('http://www.samisite.com/test-csb2nf/id43.htm', { waitUntil: 'networkidle0' })
    expect(await page.evaluate(() => window.innerWidth)).toBe(640)
    console.log(await page.evaluate(() => window.innerWidth))
    await page.close()
    await browser.close()
}

;(async () => await start())()