Can't use @wdio/visual-service via remote options

[Kiattikhun-W]

Environment (please complete the following information):

• Node.js version: 20.11.1
• NPM version: 10.3.0
• Browser name and version: Chrome 123.0.6300.3
• Platform name and version: Windows 10
• WebdriverIO version: 8.32.0
• @wdio/visual-service version: 3.0.2

Config of WebdriverIO + @wdio/visual-service

import { remote } from "webdriverio";
import VisualService from "@wdio/visual-service";

let visualService = new VisualService({
  autoSaveBaseline: true,
});

const browser = await remote({
  logLevel: "silent",
  capabilities: {
    browserName: "chrome",
    browserVersion: "dev",
  },
});

await visualService.before(browser.capabilities);
await browser.url("https://webdriver.io/");

// or use this for ONLY saving a screenshot
await browser.saveFullPageScreen("examplePaged", {});

// or use this for validating. Both methods don't need to be combined, see the FAQ
await browser.checkFullPageScreen("examplePaged", {});

await browser.deleteSession();

Describe the bug error at await visualService.before(browser.capabilities);

file:///F:/Wdio-test/node_modules/@wdio/visual-service/dist/utils.js:176
    if (driver.isMobile) {
               ^

TypeError: Cannot read properties of undefined (reading 'isMobile')
    at determineNativeContext (file:///F:/Wdio-test/node_modules/@wdio/visual-service/dist/utils.js:176:16)
    at WdioImageComparisonService.before (file:///F:/Wdio-test/node_modules/@wdio/visual-service/dist/service.js:30:33)
    at file:///F:/Wdio-test/visual-test.js:16:21
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

To Reproduce Steps to reproduce the behavior:

• npm i
• node [your-file]

Expected behavior Able to use the function of visual-testing service.

[wswebcreation]

Hi @Kiattikhun-W

Thanks for submitting an issue, I've already created a Pull Request for this, see https://github.com/webdriverio/visual-testing/pull/219. I'm waiting for a review and hope to release it this week.

[wswebcreation]

Hi @Kiattikhun-W

We've released a new version, please try the latest one and make sure you use it like this

import { remote } from 'webdriverio'
import VisualService from '@wdio/visual-service'

let visualService = new VisualService({
    autoSaveBaseline: true
})

const browser = await remote({
    logLevel: 'silent',
    capabilities: {
        browserName: 'chrome',
    }
})

// "Start" the service to add the custom commands to the `browser`
visualService.remoteSetup(browser)

await browser.url('https://webdriver.io/')

// or use this for ONLY saving a screenshot
await browser.saveFullPageScreen('examplePaged', {})

// or use this for validating. Both methods don't need to be combined, see the FAQ
await browser.checkFullPageScreen('examplePaged', {})

await browser.deleteSession()