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 秒。

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

Answer 1

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

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

为什么剧作家这么早关闭页面？

1 个答案: