feat: added wait before and after screenshot

cli/types/cypress.d.ts

@@ -2858,6 +2858,8 @@ declare namespace Cypress {
     capture: 'runner' | 'viewport' | 'fullPage'
     clip: Dimensions
     disableTimersAndAnimations: boolean
+    waitBefore: number
+    waitAfter: number
     padding: Padding
     scale: boolean
     onBeforeScreenshot: ($el: JQuery) => void

packages/driver/src/cy/commands/screenshot.js

@@ -285,6 +285,8 @@ const takeScreenshot = (Cypress, state, screenshotConfig, options = {}) => {
     padding,
     clip,
     disableTimersAndAnimations,
+    waitBefore,
+    waitAfter,
     onBeforeScreenshot,
     onAfterScreenshot,
   } = screenshotConfig
@@ -362,6 +364,7 @@ const takeScreenshot = (Cypress, state, screenshotConfig, options = {}) => {
     : $dom.wrap(state('document').documentElement)
 
   return before()
+  .then(() => new Promise((resolve) => setTimeout(resolve, waitBefore)))
   .then(() => {
     if (onBeforeScreenshot) {
       onBeforeScreenshot.call(state('ctx'), $el)
@@ -379,6 +382,7 @@ const takeScreenshot = (Cypress, state, screenshotConfig, options = {}) => {
 
     return automateScreenshot(state, automationOptions)
   })
+  .then(() => new Promise((resolve) => setTimeout(resolve, waitAfter)))
   .then((props) => {
     if (onAfterScreenshot) {
       onAfterScreenshot.call(state('ctx'), $el, props)

packages/driver/src/cypress/error_messages.js

@@ -1340,6 +1340,18 @@ module.exports = {
         docsUrl: `https://on.cypress.io/${getScreenshotDocsPath(obj.cmd)}`,
       }
     },
+    invalid_waitBefore (obj) {
+      return {
+        message: `${cmd(obj.cmd)} \`waitBefore\` option must be a number. You passed: \`{{arg}}\``,
+        docsUrl: `https://on.cypress.io/${getScreenshotDocsPath(obj.cmd)}`,
+      }
+    },
+    invalid_waitAfter (obj) {
+      return {
+        message: `${cmd(obj.cmd)} \`waitAfter\` option must be a number. You passed: \`{{arg}}\``,
+        docsUrl: `https://on.cypress.io/${getScreenshotDocsPath(obj.cmd)}`,
+      }
+    },
     multiple_elements: {
       message: `${cmd('screenshot')} only works for a single element. You attempted to screenshot {{numElements}} elements.`,
       docsUrl: 'https://on.cypress.io/screenshot',

packages/driver/src/cypress/screenshot.js

@@ -10,6 +10,8 @@ const reset = () => {
     disableTimersAndAnimations: true,
     screenshotOnRunFailure: true,
     blackout: [],
+    waitBefore: 0,
+    waitAfter: 0,
     onBeforeScreenshot () {},
     onAfterScreenshot () {},
   }
@@ -118,7 +120,7 @@ const validate = (props, cmd, log) => {
     })
   }
 
-  const { capture, blackout, clip, padding } = props
+  const { capture, blackout, clip, padding, waitBefore, waitAfter } = props
 
   if (capture) {
     if (!validCaptures.includes(capture)) {
@@ -186,6 +188,28 @@ const validate = (props, cmd, log) => {
     values.padding = normalizePadding(padding)
   }
 
+  if (waitBefore) {
+    if (!_.isNumber(waitBefore) && waitBefore < 0) {
+      $errUtils.throwErrByPath('screenshot.invalid_waitBefore', {
+        log,
+        args: { cmd, arg: $utils.stringify(waitBefore) },
+      })
+    }
+
+    values.waitBefore = waitBefore
+  }
+
+  if (waitAfter) {
+    if (!_.isNumber(waitAfter) && waitAfter < 0) {
+      $errUtils.throwErrByPath('screenshot.invalid_waitAfter', {
+        log,
+        args: { cmd, arg: $utils.stringify(waitAfter) },
+      })
+    }
+
+    values.waitAfter = waitAfter
+  }
+
   validateAndSetCallback(props, values, cmd, log, 'onBeforeScreenshot')
   validateAndSetCallback(props, values, cmd, log, 'onAfterScreenshot')