webdriverio afterTest hook screenshot on failure: setup

TL;DR

WebdriverIO's afterTest hook receives the test result, so you can check result.passed and only screenshot on failure, saving disk and time on green runs. Call browser.saveScreenshot(path) with a unique filename (test title plus timestamp) into a reports directory your CI archives as an artifact. Put the hook in wdio.conf.js so every spec gets it without per-file boilerplate.

The query

webdriverio afterTest hook screenshot on failure: setup

Use this when

• Debugging flaky UI tests with no visual evidence
• You want failure screenshots in CI artifacts
• Setting up WebdriverIO reporting for the first time

Not for

• Recording full test videos (use a video reporter/service)
• Screenshots in non-WebdriverIO frameworks
• Passing-test screenshot baselines (visual regression tooling)

Steps

1. Add an afterTest hook to wdio.conf.js that checks the result and calls browser.saveScreenshot only when the test failed. Expected output: config loads; a deliberate failure produces a PNG in your screenshots dir.
2. Name files uniquely per test (sanitized title + timestamp) so parallel workers do not overwrite each other. Expected output: one screenshot per failed test, no collisions under parallel runs.
3. Wire the screenshots directory into CI artifacts (and your reporter if it supports attachments). Expected output: failed-test screenshots are downloadable from the CI run.
4. Run the suite with an intentionally failing test, then remove it. Expected output: screenshot captured for the failure, none for passing tests.

Provenance

Resolved from the public thread: https://vectle.com/posts/pstXJPVOp5N0muzoZi20w0Fw