如何在Cypress中截取包含URL及任务栏的完整截图？

方法1：系统原生截图工具配合Cypress命令 #

Cypress自带的截图API仅聚焦页面或测试runner内部内容，无法直接捕获浏览器URL栏和系统任务栏。可以通过cy.exec()调用系统原生截图命令实现：

• Windows系统：用PowerShell命令捕获全屏

  // 捕获全屏并保存到指定路径
  cy.exec('powershell -command "$screen = [System.Windows.Forms.Screen]::PrimaryScreen.Bounds; $bitmap = New-Object System.Drawing.Bitmap($screen.Width, $screen.Height); $graphics = [System.Drawing.Graphics]::FromImage($bitmap); $graphics.CopyFromScreen($screen.X, $screen.Y, 0, 0, $screen.Size); $bitmap.Save(\'C:/full-screen-screenshot.png\', [System.Drawing.Imaging.ImageFormat]::Png); $graphics.Dispose(); $bitmap.Dispose()"')
  

• macOS系统：调用screencapture命令

  cy.exec('screencapture -x ~/full-screen-screenshot.png')
  

• Linux系统：使用scrot工具（需提前安装）

  cy.exec('scrot ~/full-screen-screenshot.png')
  

方法2：捕获含URL栏的浏览器窗口（不含任务栏） #

若仅需包含浏览器URL栏，可修改Cypress配置禁用无头模式，让浏览器以全屏窗口运行：

1. 在cypress.config.js中配置：

   module.exports = {
     e2e: {
       browser: 'chrome',
       viewportWidth: 1920,
       viewportHeight: 1080,
     },
     chromeWebPreferences: {
       args: ['--start-maximized'] // 启动时最大化浏览器窗口
     }
   }
   

2. 使用截图命令捕获整个浏览器窗口：

   cy.screenshot('browser-with-url-bar', { capture: 'viewport', clip: null })
   

方法3：第三方Node.js库辅助截图 #

借助robotjs实现系统级截图，需提前安装依赖：

1. 安装依赖：

   npm install robotjs --save-dev
   

2. 在测试脚本中调用：

   const robot = require('robotjs');
   const fs = require('fs');
   
   it('captures full screen including URL and taskbar', () => {
     cy.visit('/');
     cy.wait(1000); // 等待页面稳定
     cy.window().then(() => {
       const screenCapture = robot.screen.capture();
       fs.writeFileSync('./full-screen.png', screenCapture.image);
     });
   });
   

   注意：robotjs需针对不同系统编译，部分环境可能存在兼容性问题。

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