In Multiremote configuration, every browser tries to take a screenshot when running checkScreen command

[kluverua]

A problem
I have a web and mobile environment and I want to compare screens from only the mobile device.
Currently the visual service is trying to capture images from both.

Describe the solution you'd like
Add an additional parameter to 'wdio-ics:options'
For example: disable: true

capabilities: {
  webBrowser: {
    capabilities: {
      browserName: 'chrome',
      browserVersion: 'stable',
      'wdio-ics:options': {
	disable: true
      },
    }
  },
  appiumBrowser: {
    hostname: '127.0.0.1',
    port: 4723,
    capabilities: {
      'appium:avd': avd,
      'appium:platformName': 'Android',
      'appium:browserName': '',
      'appium:automationName': 'uiautomator2',
      'wdio-ics:options': {
         logName: 'Medium_Tablet_36',
      },
    }
  }
}

Describe alternatives you've considered
Any other parameter in capabilities or in service options

[wswebcreation]

Hi @kluverua

What's the code you use to capture the screenshot? Because it should work like this for a single instance

await multiremotebrowser.appiumBrowser.checkScreen('tag')

using

await browser.checkScreen('tag')

will always create screenshots of both instances, that's how Mutliremote works

[kluverua]

I use this code browser['appiumBrowser'].checkScreen('tag')
But somehow my code jumps to the middle of method #addMultiremoteCommand

[wswebcreation]

And that doesn't work? Because it should only create one screenshot

[kluverua]

I have created new wdio project from scratch (npm init wdio@latest):

package.json

{
  "name": "wdio_sandbox",
  "type": "module",
  "scripts": {
    "test": "wdio run wdio.conf.ts"
  },
  "devDependencies": {
    "@types/jasmine": "^5.1.8",
    "@wdio/cli": "^9.15.0",
    "@wdio/jasmine-framework": "^9.15.0",
    "@wdio/local-runner": "^9.15.0",
    "@wdio/spec-reporter": "^9.15.0",
    "@wdio/visual-service": "^8.0.4"
  }
}

wdio.conf.ts

capabilities: {
        chrome: {
            capabilities: {
                browserName: 'chrome',
                'goog:chromeOptions': {
                    args: [
                        'window-size=1280,800'
                    ]
                },
                'wdio-ics:options': {
                    logName: 'chrome',
                },
            }
        },
        edge: {
            capabilities: {
                browserName: 'MicrosoftEdge',
                'wdio-ics:options': {
                    logName: 'edge',
                },
            }
        }
    },
    services: [
        [
            'visual',
            {
                screenshotPath: './screenshots',
                baselineFolder: 'reference-images',
                autoSaveBaseline: false,
                formatImageName: '{tag}-{logName}',
            }
        ]
    ],

test

import {browser, multiremotebrowser} from '@wdio/globals'

describe('My Login application', () => {
    it('should login with valid credentials', async () => {
        await browser.url(`https://the-internet.herokuapp.com/login`)
        await browser.pause(1000)
        await multiremotebrowser.chrome.checkScreen('login-success')
    })
})

put only one image (login-success-chrome.png) in reference-images folder

Error:
#####################################################################################
Baseline image not found, save the actual image manually to the baseline.
The image can be found here:
screenshots\actual\login-success-edge.png
#####################################################################################

Maybe something changes in wdio 9.15.0...

[wswebcreation]

Ok, let me check this . It might be a bit later because I'm pretty busy lately, but this feels like a bug

[P-Courteille]

$${\color{red}→}$$ $${\color{red}replace}$$ $${\color{red}by}$$ $${\color{red}my}$$ $${\color{red}next}$$ $${\color{red}comment}$$
Hello,

The implementation issue seems to be obvious in debug mode:

• The browser of your execution is global with "isMultiremote" to true
  • 'checkScreen' has been added to all devices as multi-remote function with a loop of "browserName" inside

So even if you call it from one browser, it will loop on each of them

I observe the same issue in the implementation of the ocr-service when I tried to fix issue_657.

---

@wswebcreation
A quick fix could be:

• don't make a distinction between multiremote or not for the add command but inside the command so remove the distinction between #addCommandsToBrowser and #addMultiremoteCommand

instead of:

for (const browserName of browserNames) {
	const browserInstance = browser.getInstance(browserName);

Do:

const instancesToLoop = this.isMultiremote ?
	Object.values(browserNames).map(browserName => ({
		name: browserName,
		instance: this.getInstance(browserName)
	})):
	[{
		name: this.capabilities.browserName,
		instance: this
	}]

for (const { name: browserName, instance: browserInstance } of instancesToLoop) {

~~And at the end : ~~

if (this.isMultiremote) {
	return returnData
}
return Object.values(returnData)[0]

So if the function is called by browser, all of them will run the function and in the other case, only the browser from "this" will do it.

📝 An example is availabe in this PR.

Best regard,
Paul

[P-Courteille]

Hello,

After more analysis, I put my finger on the root issue (the suggestion in my previous comment was a workaround, not a fix).

The first block should be after the second one so after inversion:

• The first block add the command to Browser in a Multi Remote version (with a loop to do the function in each instance)
  • the @wdio\utils\build\index.js (line 388) will add the Multi Remote version to each instance
• The second block fix this mistake by add the Single Remote version to each instance

---

I did the fix for ocr-service in this new PR but I didn't do it for visual-service because I've a type issue for fn for all the this.execute(fn):

it seems that execute is now expecting a function with type
string | ((...args: TransformElement<InnerArguments>) => ReturnValue)
Instead of:
string | ((...args: InnerArguments) => ReturnValue)

So I tried to do something like the change done here here but after it's the executor type which is no longer correct...

So I only test it in javascript and it work 🙂

Best regard,
Paul

[P-Courteille]

Hello @wswebcreation and @kluverua,

I think I fix this issue with my last version of this PR and in a same time this issue and a missing parameter to build on Windows.

Best regard,
Paul