Description
Environment (please complete the following information):
• Node.js version: v20.16.0
• NPM version: 10.8.1
• Browser name and version: Chrome 136.0.7103.93 (Official Build) (arm64)
• Platform name and version: macOS 15.4.1 (Apple M1 Max - 24E263)
• WebdriverIO version:
• v9: ^9.12.7
• @wdio/visual-service version: ^8.0.0
Config of WebdriverIO + @wdio/visual-service
visual: {
baselineFolder: join(process.cwd(), './test/specs/__snapshots__'),
formatImageName: '{tag}-{logName}-{width}x{height}',
screenshotPath: join(process.cwd(), '.tmp/'),
savePerInstance: true,
autoSaveBaseline: true,
enableLegacyScreenshotMethod: true,
}
Describe the bug
While testing visual regression scenarios in WDIO v9, I encountered two related issues:
-
Legacy Screenshot Behavior in Emulation
With enableLegacyScreenshotMethod: true, screenshots on emulated devices (e.g., iPhone X) now capture the entire document height, including off-screen areas beyond the viewport.
In WDIO v8, only the visible viewport was captured, which is the desired behavior for visual testing. -
Viewport Size Missing from Screenshot FilenamesIn WDIO v8, screenshot filenames included the viewport size (e.g., 1200x900), which helped differentiate resolutions.
In WDIO v9, that detail appears to be missing, even though formatImageName includes {width}x{height}
To Reproduce
Steps to reproduce the behavior:
1. Clone the following repositories:
• 🔗 WDIO v9 example
2. Run npm install && npm run test in both repos.
3. Inspect the screenshots under here.
You’ll notice that:
• In WDIO v9, images like webdriverio_v9_portrait_legacy-1200x1291.png and webdriverio_v9_portrait_legacy-1200x1291.png include the full document height (not just viewport).
• Screenshot filenames are less descriptive, lacking expected {width}x{height} dimensions.
Expected behavior
• When using enableLegacyScreenshotMethod: true, screenshots in emulated devices (portrait or landscape) should only capture the viewport, not the entire scrollable area.
• Screenshot filenames should include viewport dimensions when specified in formatImageName.