为什么剧作家这么早就关页了？答案

【问题标题】：Why is Playwright closing the page so early?为什么剧作家这么早就关页了？
【发布时间】：2021-08-23 12:30:12
【问题描述】：

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

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

我现在正在使用相同的配置在我的 linux (Debian) 上工作，但需要大约 45 秒才能运行更大的转换集。我想录制 50 秒的视频。

但是在nodejs/playwright 下运行它，我发现 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 秒。

为什么剧作家要关闭页面？

【问题讨论】：

标签： javascript playwright

【解决方案1】：

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

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

【讨论】：