fix: use dirname() for resolveSnapshotPath to avoid EISDIR conflict

.changeset/fix-resolve-snapshot-path-eisdir.md

@@ -0,0 +1,10 @@
+---
+"@wdio/visual-service": patch
+---
+
+Fix `EISDIR` error when using `resolveSnapshotPath` with the visual service. The service now uses `dirname()` of the resolved path as the baseline folder, preventing it from creating a directory at a path that `expect-webdriverio`'s snapshot service expects to be a file. Fixes #984.
+
+# Committers: 1
+
+- Wim Selles ([@wswebcreation](https://github.com/wswebcreation))
+

.gitignore

@@ -36,3 +36,6 @@ dist
 
 *.tgz
 bugreport*.zip
+
+# IDE
+.cursor/

packages/visual-service/src/service.ts

@@ -130,7 +130,7 @@ export default class WdioImageComparisonService extends BaseClass {
          * We also check `this.#config` because for standalone usage of the service, the config is not available
          */
         if (this.#config && typeof this.#config.resolveSnapshotPath === 'function' && this.#currentFile && isDefaultBaselineFolder) {
-            return this.#config.resolveSnapshotPath(this.#currentFile, '.png')
+            return dirname(this.#config.resolveSnapshotPath(this.#currentFile, '.png'))
         }
 
         return baselineFolder

packages/visual-service/tests/service.test.ts

@@ -1,4 +1,4 @@
-import { join } from 'node:path'
+import { dirname, join, normalize } from 'node:path'
 import logger from '@wdio/logger'
 import { expect as wdioExpect } from '@wdio/globals'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -199,5 +199,41 @@ describe('@wdio/visual-service', () => {
             const [saveScreenOptions] = vi.mocked(saveScreen).mock.calls[0]
             expect((saveScreenOptions as any).saveScreenOptions?.wic?.alwaysSaveActualImage).toBe(true)
         })
+
+        it('should use dirname() of resolveSnapshotPath result as baselineFolder to avoid EISDIR conflicts', async () => {
+            vi.mocked(saveScreen).mockResolvedValue({} as any)
+            const resolveSnapshotPath = vi.fn().mockReturnValue('/custom/snapshots/specs/test.e2e.png')
+            const config = {
+                framework: 'mocha',
+                resolveSnapshotPath,
+            } as unknown as WebdriverIO.Config
+            const service = new VisualService({}, {}, config)
+            ;(service as any).defaultOptions = {}
+            ;(service as any).folders = { baselineFolder: normalize('./__snapshots__/') }
+            const browser = {
+                isMultiremote: false,
+                addCommand: vi.fn((name, fn) => {
+                    (browser as any)[name] = fn
+                }),
+                capabilities: {},
+                requestedCapabilities: {},
+                on: vi.fn(),
+                execute: vi.fn().mockResolvedValue(1),
+            } as any as WebdriverIO.Browser
+
+            await service.before({}, [], browser)
+            service.beforeTest({
+                file: '/project/specs/test.e2e.ts',
+                parent: 'suite',
+                title: 'test',
+            } as any)
+            await (browser as any).saveScreen('tag')
+
+            expect(resolveSnapshotPath).toHaveBeenCalledWith('/project/specs/test.e2e.ts', '.png')
+            const [saveScreenOptions] = vi.mocked(saveScreen).mock.calls[0]
+            expect((saveScreenOptions as any).folders.baselineFolder).toBe(
+                dirname('/custom/snapshots/specs/test.e2e.png')
+            )
+        })
     })
 })