Playwright如何将页面置为失活/后台状态？测试场景求解

下面提供几种可行的方法，解决Playwright中无法将页面置为后台导致视频播放测试失败的问题：

方法1：模拟页面可见性状态切换（推荐） #

浏览器判断页面是否处于后台的核心依据是document.visibilityState，视频播放的暂停逻辑通常会监听visibilitychange事件。直接通过evaluate修改状态并触发事件，无需依赖窗口操作，适用于所有环境（包括无头模式）：

// 播放视频后，模拟页面进入后台
await page.evaluate(() => {
  // 覆盖visibilityState为hidden
  Object.defineProperty(document, 'visibilityState', { 
    get: () => 'hidden',
    configurable: true
  });
  // 触发visibilitychange事件，让页面感知状态变化
  document.dispatchEvent(new Event('visibilitychange'));
});

// 停留10秒
await page.waitForTimeout(10000);

// 模拟回到前台
await page.evaluate(() => {
  Object.defineProperty(document, 'visibilityState', { 
    get: () => 'visible',
    configurable: true
  });
  document.dispatchEvent(new Event('visibilitychange'));
});

// 检查视频是否暂停（替换为你的视频元素选择器）
const isPaused = await page.evaluate(() => {
  const video = document.querySelector('video');
  return video?.paused ?? false;
});
expect(isPaused).toBe(true);

方法2：多窗口切换激活 #

如果需要模拟真实的窗口切换操作，可以创建新页面后激活它，迫使原页面进入后台：

// 打开视频应用并播放
const videoPage = await browser.newPage();
await videoPage.goto('你的视频应用URL');
await videoPage.click('播放按钮选择器'); // 替换为实际播放按钮的选择器

// 打开Bing页面
const bingPage = await browser.newPage();
await bingPage.goto('https://www.bing.com');

// 激活Bing页面，让视频页面进入后台
await bingPage.bringToFront();

// 停留10秒
await bingPage.waitForTimeout(10000);

// 返回视频页面
await videoPage.bringToFront();

// 检查视频状态
const isPaused = await videoPage.evaluate(() => document.querySelector('video').paused);
expect(isPaused).toBe(true);

注意：部分浏览器或无头模式下bringToFront()可能无法生效，此时优先使用方法1。

方法3：多浏览器上下文切换 #

通过创建独立的浏览器上下文，模拟不同会话的切换，让视频所在上下文处于后台：

// 创建视频应用上下文
const videoContext = await browser.newContext();
const videoPage = await videoContext.newPage();
await videoPage.goto('你的视频应用URL');
await videoPage.click('播放按钮选择器');

// 创建Bing上下文
const bingContext = await browser.newContext();
const bingPage = await bingContext.newPage();
await bingPage.goto('https://www.bing.com');

// 停留10秒，视频上下文自动处于后台
await bingPage.waitForTimeout(10000);

// 切换回视频页面
await videoPage.bringToFront();

// 检查视频状态
const isPaused = await videoPage.evaluate(() => document.querySelector('video').paused);
expect(isPaused).toBe(true);

// 清理资源
await videoContext.close();
await bingContext.close();

内容的提问来源于stack exchange，提问作者Inchess