--- id: api/node-events/after-screenshot-api title: After Screenshot Event | Cypress Node Events description: 'The after:screenshot event fires after a screenshot is taken in Cypress.' section: api source_path: docs/api/node-events/after-screenshot-api.mdx version: e6988a974973e9090ce70406c38cb2b9e0eac9fa updated_at: '2026-05-15T15:50:22.536Z' --- # After Screenshot Event After a screenshot is taken, you can get details about the screenshot via the `after:screenshot` node event. This event is called when a screenshot is taken with [`cy.screenshot()`](/llm/markdown/api/commands/screenshot.md) or as a result of a test failure. The event is called after the screenshot image is written to disk. This allows you to record those details, manipulate the image as needed, and return the updated details about the image. ## Syntax ⚠️ 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. * cypress.config.js * cypress.config.ts ``` const { defineConfig } = require('cypress')module.exports = defineConfig({ // setupNodeEvents can be defined in either // the e2e or component configuration e2e: { setupNodeEvents(on, config) { on('after:screenshot', (details) => { /* ... */ }) }, },}) ``` ``` import { defineConfig } from 'cypress'export default defineConfig({ // setupNodeEvents can be defined in either // the e2e or component configuration e2e: { setupNodeEvents(on, config) { on('after:screenshot', (details) => { /* ... */ }) }, },}) ``` **details _(object)_** An object describing the screenshot that was taken, with the following properties: | Property | Type | Description | | --- | --- | --- | | `size` | `number` | The size of the image file (in bytes). | | `takenAt` | `string` | The date and time the screenshot was taken. ISO 8601 format in UTC (example: `'2020-03-09T07:30:37.686Z'`) | | `duration` | `number` | Duration taking and saving the screenshot (in milliseconds). | | `dimensions` | `object` | The width and height of the image in pixels (example: `{ width: 100, height: 50 }`) | | `multipart` | `boolean` | Whether the screenshot was stitched together from multiple screenshot images. | | `pixelRatio` | `number` | _(Optional)_ The ratio of screenshot pixels to the browser's displayed pixels. | | `name` | `string` | _(Optional)_ The `fileName` argument passed in via [cy.screenshot()](/llm/markdown/api/commands/screenshot.md#Arguments) | | `specName` | `string` | The name of the specfile where the screenshot was taken. | | `path` | `string` | The absolute path to the image. | | `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) | | `blackout` | `array` | The `blackout` argument passed in via [cy.screenshot()](/llm/markdown/api/commands/screenshot.md#Arguments) | ## Usage ### Modify screenshot details Using [setupNodeEvents](/llm/markdown/app/plugins/plugins-guide.md#Using-a-plugin) you can tap into the `after:screenshot` event. If 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._ You 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: * **path**: The absolute path to the current location of the image * **size**: The size of the current image file (in bytes) * **dimensions**: The width and height of the current image in pixels (as an object with the shape `{ width: 100, height: 50 }`) The 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)). #### Modify screenshot path If you move the location of the screenshot image, you'll want to specify the new `path` of the image. * cypress.config.js * cypress.config.ts ``` const { defineConfig } = require('cypress')const fs = require('fs')module.exports = defineConfig({ // setupNodeEvents can be defined in either // the e2e or component configuration e2e: { setupNodeEvents(on, config) { on('after:screenshot', (details) => { console.log(details) // print all details to terminal const newPath = '/new/path/to/screenshot.png' return new Promise((resolve, reject) => { // fs.rename moves the file to the existing directory 'new/path/to' // and renames the image to 'screenshot.png' fs.rename(details.path, newPath, (err) => { if (err) return reject(err) // because we renamed and moved the image, resolve with the new path // so it is accurate in the test results resolve({ path: newPath }) }) }) }) }, },}) ``` ``` import { defineConfig } from 'cypress'import fs from 'fs'export default defineConfig({ // setupNodeEvents can be defined in either // the e2e or component configuration e2e: { setupNodeEvents(on, config) { on('after:screenshot', (details) => { console.log(details) // print all details to terminal const newPath = '/new/path/to/screenshot.png' return new Promise((resolve, reject) => { // fs.rename moves the file to the existing directory 'new/path/to' // and renames the image to 'screenshot.png' fs.rename(details.path, newPath, (err) => { if (err) return reject(err) // because we renamed and moved the image, resolve with the new path // so it is accurate in the test results resolve({ path: newPath }) }) }) }) }, },}) ``` ## See also * [cy.screenshot()](/llm/markdown/api/commands/screenshot.md) * [Cypress Cloud](/llm/markdown/cloud/get-started/introduction.md) * [Screenshots and Videos](/llm/markdown/app/guides/screenshots-and-videos.md) * [Visual Testing](/llm/markdown/app/tooling/visual-testing.md) * [How to use Plugins](/llm/markdown/app/plugins/plugins-guide.md) * [Node Events Overview](/llm/markdown/api/node-events/overview.md)