为什么 Playwright 这么早关闭页面？

Question

我正在尝试录制一组 CSS 转换的视频，我的模式就像开场标题序列一样。我在我的 macbook 笔记本电脑上使用单个旋转立方体进行了更简单的测试。

我已经设置了一个 index.html，其中包含进行转换所需的所有 css 和 html。在 Chrome 浏览器中独立运行，它工作正常。

我现在正在使用相同的配置开发我的 linux (Debian)，但需要大约 45 秒到运行的一组更大的转换。我想录制 50 秒的视频。

但是运行在 nodejs/playwright 下我发现剧作家过早地关闭了页面 - 我如何找出原因？

代码驱动编剧

const { chromium } = require('playwright');  // Or 'firefox' or 'webkit'.


(async () => {
  const browser = await chromium.launch();
console.log('got browser')
  const context = await browser.newContext({
    recordVideo: {
      dir: './videos',
      size: {
        width:1920,
        height:1080
      }
    },
    viewport: {
      width:1920,
      height:1080
    }

  });
console.log('got context')
  const page = await context.newPage();
  const start = new Date().getTime();
  page.on('close', () => {
    const closetime = new Date().getTime();
    console.log('page close occurred after', closetime - start, 'ms');
  });
console.log('got page');
  await page.goto('http://localhost:8000/index.html',{timeout: 0});
console.log('page loaded')
  await new Promise(accept => setTimeout(accept, 50000));

const timeouttime = new Date().getTime();
  console.log('timeout complete after', timeouttime - start, 'ms');
  await browser.close();
console.log('browser closed');

})();

结果如控制台所示

got browser
got context
got page
page loaded
page close occurred after 2254 ms
timeout complete after 50152 ms
browser closed

可以看出，页面（在我看来）在大约两秒后随机关闭，而我假设它可以运行持续 50 秒。

为什么 Playwright 关闭页面？

Answer 1

我发现了问题。我页面上的元素之一使用的是 css 属性 filter: blur(1em);

这导致页面一遇到就在剧作家中关闭。我最终使用 box-shadow（带有插图和正常的外部阴影）和低不透明度 opacity 来产生类似的效果并且问题消失了。

为什么 Playwright 这么早关闭页面？

Why is Playwright closing the page so early?

javascript

playwright