{
  "doc": {
    "id": "api/node-events/after-screenshot-api",
    "title": "after:screenshot event",
    "description": "The after:screenshot event fires after a screenshot is taken in Cypress.",
    "section": "api",
    "source_path": "/llm/markdown/api/node-events/after-screenshot-api.md",
    "version": "efcbe8c28d49ff52285a47072f279cb65f20c0fc",
    "updated_at": "2026-09-09T13:41:20.773Z",
    "headings": [
      {
        "id": "api/node-events/after-screenshot-api#after-screenshot-event",
        "text": "After Screenshot Event",
        "level": 1
      },
      {
        "id": "api/node-events/after-screenshot-api#syntax",
        "text": "Syntax",
        "level": 2
      },
      {
        "id": "api/node-events/after-screenshot-api#usage",
        "text": "Usage",
        "level": 2
      },
      {
        "id": "api/node-events/after-screenshot-api#modify-screenshot-details",
        "text": "Modify screenshot details",
        "level": 3
      },
      {
        "id": "api/node-events/after-screenshot-api#modify-screenshot-path",
        "text": "Modify screenshot path",
        "level": 4
      },
      {
        "id": "api/node-events/after-screenshot-api#see-also",
        "text": "See also",
        "level": 2
      }
    ]
  },
  "chunks": [
    {
      "id": "api/node-events/after-screenshot-api#syntax",
      "doc_id": "api/node-events/after-screenshot-api",
      "heading": "Syntax",
      "heading_level": 2,
      "content_markdown": "## Syntax\n\n⚠️ This code is part of the [setupNodeEvents](/llm/markdown/app/plugins/plugins-guide.md#Using-a-plugin) function and thus executes in the Node environment. You cannot call `Cypress` or `cy` commands in this function, but you do have the direct access to the file system and the rest of the operating system.\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\n\nmodule.exports = defineConfig({\n  // setupNodeEvents can be defined in either\n  // the e2e or component configuration\n  e2e: {\n    setupNodeEvents(on, config) {\n      on('after:screenshot', (details) => {\n        /* ... */\n      })\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\n\nexport default defineConfig({\n  // setupNodeEvents can be defined in either\n  // the e2e or component configuration\n  e2e: {\n    setupNodeEvents(on, config) {\n      on('after:screenshot', (details) => {\n        /* ... */\n      })\n    },\n  },\n})\n```\n\n**details _(object)_**\n\nAn object describing the screenshot that was taken, with the following properties:\n\n| Property | Type | Description |\n| --- | --- | --- |\n| `size` | `number` | The size of the image file (in bytes). |\n| `takenAt` | `string` | The date and time the screenshot was taken. ISO 8601 format in UTC (example: `'2020-03-09T07:30:37.686Z'`) |\n| `duration` | `number` | Duration taking and saving the screenshot (in milliseconds). |\n| `dimensions` | `object` | The width and height of the image in pixels (example: `{ width: 100, height: 50 }`) |\n| `multipart` | `boolean` | Whether the screenshot was stitched together from multiple screenshot images. |\n| `pixelRatio` | `number` | _(Optional)_ The ratio of screenshot pixels to the browser's displayed pixels. |\n| `name` | `string` | _(Optional)_ The `fileName` argument passed in via [cy.screenshot()](/llm/markdown/api/commands/screenshot.md#Arguments) |\n| `specName` | `string` | The name of the specfile where the screenshot was taken. |\n| `path` | `string` | The absolute path to the image. |\n| `scaled` | `boolean` | Whether the application under test was scaled to fit into the browser viewport. May be `scale` argument passed in via [cy.screenshot()](/llm/markdown/api/commands/screenshot.md#Arguments) |\n| `blackout` | `array` | The `blackout` argument passed in via [cy.screenshot()](/llm/markdown/api/commands/screenshot.md#Arguments) |\n",
      "section": "api",
      "anchors": [
        "syntax"
      ],
      "path": "/llm/json/chunked/api/node-events/after-screenshot-api.json",
      "token_estimate": 459
    },
    {
      "id": "api/node-events/after-screenshot-api#usage",
      "doc_id": "api/node-events/after-screenshot-api",
      "heading": "Usage",
      "heading_level": 2,
      "content_markdown": "## Usage\n\n### Modify screenshot details\n\nUsing [setupNodeEvents](/llm/markdown/app/plugins/plugins-guide.md#Using-a-plugin) you can tap into the `after:screenshot` event.\n\nIf you change the `path`, `size` or `dimensions` of the image, you'll want to update the new values so that the details are correctly reported in the test results. _Any other properties besides `path`, `size`, and `dimensions` will be ignored._\n\nYou can return an object or a promise that resolves to an object from the callback function. _Any type of returned value other than an object will be ignored._ The object can contain the following properties:\n\n*   **path**: The absolute path to the current location of the image\n*   **size**: The size of the current image file (in bytes)\n*   **dimensions**: The width and height of the current image in pixels (as an object with the shape `{ width: 100, height: 50 }`)\n\nThe properties will be merged into the screenshot details and passed to the `onAfterScreenshot` callback (if defined with [Cypress.Screenshot.defaults()](/llm/markdown/api/cypress-api/screenshot-api.md) and/or [cy.screenshot()](/llm/markdown/api/commands/screenshot.md)).\n\n#### Modify screenshot path\n\nIf you move the location of the screenshot image, you'll want to specify the new `path` of the image.\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\nconst fs = require('fs')\n\nmodule.exports = defineConfig({\n  // setupNodeEvents can be defined in either\n  // the e2e or component configuration\n  e2e: {\n    setupNodeEvents(on, config) {\n      on('after:screenshot', (details) => {\n        console.log(details) // print all details to terminal\n\n        const newPath = '/new/path/to/screenshot.png'\n\n        return new Promise((resolve, reject) => {\n          // fs.rename moves the file to the existing directory 'new/path/to'\n          // and renames the image to 'screenshot.png'\n          fs.rename(details.path, newPath, (err) => {\n            if (err) return reject(err)\n\n            // because we renamed and moved the image, resolve with the new path\n            // so it is accurate in the test results\n            resolve({ path: newPath })\n          })\n        })\n      })\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\nimport fs from 'fs'\n\nexport default defineConfig({\n  // setupNodeEvents can be defined in either\n  // the e2e or component configuration\n  e2e: {\n    setupNodeEvents(on, config) {\n      on('after:screenshot', (details) => {\n        console.log(details) // print all details to terminal\n\n        const newPath = '/new/path/to/screenshot.png'\n\n        return new Promise((resolve, reject) => {\n          // fs.rename moves the file to the existing directory 'new/path/to'\n          // and renames the image to 'screenshot.png'\n          fs.rename(details.path, newPath, (err) => {\n            if (err) return reject(err)\n\n            // because we renamed and moved the image, resolve with the new path\n            // so it is accurate in the test results\n            resolve({ path: newPath })\n          })\n        })\n      })\n    },\n  },\n})\n```\n",
      "section": "api",
      "anchors": [
        "usage"
      ],
      "path": "/llm/json/chunked/api/node-events/after-screenshot-api.json",
      "token_estimate": 547
    },
    {
      "id": "api/node-events/after-screenshot-api#modify-screenshot-details",
      "doc_id": "api/node-events/after-screenshot-api",
      "heading": "Modify screenshot details",
      "heading_level": 3,
      "content_markdown": "### Modify screenshot details\n\nUsing [setupNodeEvents](/llm/markdown/app/plugins/plugins-guide.md#Using-a-plugin) you can tap into the `after:screenshot` event.\n\nIf you change the `path`, `size` or `dimensions` of the image, you'll want to update the new values so that the details are correctly reported in the test results. _Any other properties besides `path`, `size`, and `dimensions` will be ignored._\n\nYou can return an object or a promise that resolves to an object from the callback function. _Any type of returned value other than an object will be ignored._ The object can contain the following properties:\n\n*   **path**: The absolute path to the current location of the image\n*   **size**: The size of the current image file (in bytes)\n*   **dimensions**: The width and height of the current image in pixels (as an object with the shape `{ width: 100, height: 50 }`)\n\nThe properties will be merged into the screenshot details and passed to the `onAfterScreenshot` callback (if defined with [Cypress.Screenshot.defaults()](/llm/markdown/api/cypress-api/screenshot-api.md) and/or [cy.screenshot()](/llm/markdown/api/commands/screenshot.md)).\n\n#### Modify screenshot path\n\nIf you move the location of the screenshot image, you'll want to specify the new `path` of the image.\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\nconst fs = require('fs')\n\nmodule.exports = defineConfig({\n  // setupNodeEvents can be defined in either\n  // the e2e or component configuration\n  e2e: {\n    setupNodeEvents(on, config) {\n      on('after:screenshot', (details) => {\n        console.log(details) // print all details to terminal\n\n        const newPath = '/new/path/to/screenshot.png'\n\n        return new Promise((resolve, reject) => {\n          // fs.rename moves the file to the existing directory 'new/path/to'\n          // and renames the image to 'screenshot.png'\n          fs.rename(details.path, newPath, (err) => {\n            if (err) return reject(err)\n\n            // because we renamed and moved the image, resolve with the new path\n            // so it is accurate in the test results\n            resolve({ path: newPath })\n          })\n        })\n      })\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\nimport fs from 'fs'\n\nexport default defineConfig({\n  // setupNodeEvents can be defined in either\n  // the e2e or component configuration\n  e2e: {\n    setupNodeEvents(on, config) {\n      on('after:screenshot', (details) => {\n        console.log(details) // print all details to terminal\n\n        const newPath = '/new/path/to/screenshot.png'\n\n        return new Promise((resolve, reject) => {\n          // fs.rename moves the file to the existing directory 'new/path/to'\n          // and renames the image to 'screenshot.png'\n          fs.rename(details.path, newPath, (err) => {\n            if (err) return reject(err)\n\n            // because we renamed and moved the image, resolve with the new path\n            // so it is accurate in the test results\n            resolve({ path: newPath })\n          })\n        })\n      })\n    },\n  },\n})\n```\n",
      "section": "api",
      "anchors": [
        "modify-screenshot-details"
      ],
      "path": "/llm/json/chunked/api/node-events/after-screenshot-api.json",
      "token_estimate": 544
    },
    {
      "id": "api/node-events/after-screenshot-api#modify-screenshot-path",
      "doc_id": "api/node-events/after-screenshot-api",
      "heading": "Modify screenshot path",
      "heading_level": 4,
      "content_markdown": "#### Modify screenshot path\n\nIf you move the location of the screenshot image, you'll want to specify the new `path` of the image.\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\nconst fs = require('fs')\n\nmodule.exports = defineConfig({\n  // setupNodeEvents can be defined in either\n  // the e2e or component configuration\n  e2e: {\n    setupNodeEvents(on, config) {\n      on('after:screenshot', (details) => {\n        console.log(details) // print all details to terminal\n\n        const newPath = '/new/path/to/screenshot.png'\n\n        return new Promise((resolve, reject) => {\n          // fs.rename moves the file to the existing directory 'new/path/to'\n          // and renames the image to 'screenshot.png'\n          fs.rename(details.path, newPath, (err) => {\n            if (err) return reject(err)\n\n            // because we renamed and moved the image, resolve with the new path\n            // so it is accurate in the test results\n            resolve({ path: newPath })\n          })\n        })\n      })\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\nimport fs from 'fs'\n\nexport default defineConfig({\n  // setupNodeEvents can be defined in either\n  // the e2e or component configuration\n  e2e: {\n    setupNodeEvents(on, config) {\n      on('after:screenshot', (details) => {\n        console.log(details) // print all details to terminal\n\n        const newPath = '/new/path/to/screenshot.png'\n\n        return new Promise((resolve, reject) => {\n          // fs.rename moves the file to the existing directory 'new/path/to'\n          // and renames the image to 'screenshot.png'\n          fs.rename(details.path, newPath, (err) => {\n            if (err) return reject(err)\n\n            // because we renamed and moved the image, resolve with the new path\n            // so it is accurate in the test results\n            resolve({ path: newPath })\n          })\n        })\n      })\n    },\n  },\n})\n```\n",
      "section": "api",
      "anchors": [
        "modify-screenshot-path"
      ],
      "path": "/llm/json/chunked/api/node-events/after-screenshot-api.json",
      "token_estimate": 335
    }
  ]
}