Principle:DevExpress Testcafe Screenshot And Video Capture
| Knowledge Sources | |
|---|---|
| Domains | Testing, Web_Automation |
| Last Updated | 2026-02-12 04:00 GMT |
Overview
Screenshot and Video Capture is the concept of recording visual evidence during test execution for debugging, documentation, and failure analysis purposes.
Description
Screenshot and video capture provides a visual record of test execution, capturing browser state at specific moments (manual screenshots), failure points (automatic on-fail screenshots), or continuously throughout test execution (video recording). This visual evidence is essential for diagnosing test failures, especially in headless or remote environments where direct observation is impossible.
The capture system must coordinate with browser automation, managing timing to ensure complete page rendering before capture, handling viewport scrolling for full-page screenshots, generating thumbnails for quick review, and organizing output files using configurable path patterns. Video recording introduces additional complexity: frame capture synchronization, encoding with codecs (H.264, VP8), temporary file management, and post-processing for concatenation or trimming.
Path patterns enable organized storage using placeholders like ${DATE}, ${TIME}, ${FIXTURE}, ${TEST}, ${BROWSER} that expand to create hierarchical directory structures. This organization is crucial for CI environments where hundreds of tests may run in parallel, each producing multiple visual artifacts.
Usage
Use screenshot and video capture when testing applications that:
- Have complex visual states difficult to assert programmatically
- Run in headless or remote environments requiring post-execution review
- Need failure evidence for bug reports and CI dashboards
- Require visual regression testing through screenshot comparison
- Benefit from video documentation for onboarding or compliance
Theoretical Basis
Screenshot and video capture applies the Memento Pattern and Template Method Pattern:
Memento Pattern: Each screenshot/video frame captures browser state at a specific moment, creating a memento that can be reviewed later. The test run doesn't need to interpret these mementos; they're stored for external analysis.
Observer Pattern: The capture system observes test run lifecycle events (test start, action execution, test end, failure) and triggers captures at appropriate moments.
Strategy Pattern: Different capture strategies (on-fail, full-page, continuous video) can be configured and swapped without changing test code.
Pseudocode structure:
class ScreenshotManager {
constructor(config: { enabled, path, pathPattern, fullPage, onFails }) {
this.config = config
this.testEntries = new Map()
}
createCapturerFor(test, testRun): Capturer {
const pathPattern = this.resolvePattern(test, testRun)
return new Capturer(this.config.path, pathPattern, this.config.fullPage)
}
resolvePattern(test, testRun): string {
// ${DATE}_${TIME}/${FIXTURE}/${TEST}/${BROWSER}.png
return pattern
.replace('${DATE}', formatDate())
.replace('${FIXTURE}', test.fixture.name)
.replace('${TEST}', test.name)
.replace('${BROWSER}', testRun.browser.name)
}
}
class VideoRecorder {
constructor(browserJob, basePath, options) {
this.frames = []
this.tempDirectory = createTempDir()
this.options = options
}
async onTestRunCreate(testRun) {
await this.startCapture(testRun)
}
async onTestRunBeforeDone(testRun) {
await this.stopCapture()
if (this.shouldSave(testRun)) {
await this.encode(testRun)
}
}
async encode(testRun) {
const videoPath = this.resolveOutputPath(testRun)
await ffmpeg.encode(this.frames, videoPath, this.options.codec)
}
}
The capture system maintains weak references to test objects, preventing memory leaks during long test runs with many captured artifacts.