[💡 Feature]: Allow custom commands scoped to element to be chainable in async mode

[nextlevelbeard]

Is your feature request related to a problem?

With async mode, we can do this:

await $("id=foo").$("bar").click();

but if we add a custom command to the element scope that we would like to chain:

await browser.addCommand('$foo', async function () {
  // Do something with an element
  return element;
}, true)

and try to do this:

await $("id=asd").$foo("bar").click();

we get a TypeError: $(...).$foo(...).click is not a function

Context:
I'm trying to add a custom locator strategy through the addCommand feature.

Describe the solution you'd like.

What I'm requesting is that if:

• The custom command is for the element scope
• The custom command returns an element (promise)

Then that command should be chainable in async mode.

Describe alternatives you've considered.

I've considered using the custom locator strategy feature: custom$.
I cannot use it for this purpose because that only works in a web context (not my use case).

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[christian-bromann]

Thanks for reporting!

I am totally for this and I believe it is just a matter on how these commands are being wrapped.

Any contributions that resolves the bug are highly appreciated. Please take a look into our contribution guidelines and let us know if you have any questions. Cheers!

[nextlevelbeard]

Do you think you can point me in the right direction?
What might be an workaround for someone dealing with this problem?
What wrapper function would I import and how could I wrap an element result at runtime?

Something like

import { wrapper } from 'webdriverio/???'
await browser.addCommand('$foo', async function () {
  // Do something with an element
  return wrapper(element);
}, true)

or

import { wrapper } from 'webdriverio/???'
await browser.addCommand('$foo', wrapper(async function () {
  // Do something with an element
  return element;
}), true)

[christian-bromann]

What might be an workaround for someone dealing with this problem?

I honestly haven't invested time looking into a workaround because I would be more interested into a fix.

Do you think you can point me in the right direction?

I think we should investigate where the core command wrapper fails to properly chain the commands.

[jayrepo]

Just ran into the same problem.
It's caused by the command wrapper only chain commands in the ELEMENT_QUERY_COMMANDS

webdriverio/packages/wdio-utils/src/shim.ts

Lines 70 to 73 in 92f073f

	const ELEMENT_QUERY_COMMANDS = [
	'$', '$$', 'custom$', 'custom$$', 'shadow$', 'shadow$$', 'react$',
	'react$$', 'nextElement', 'previousElement', 'parentElement'
	]

An effortless way to fix it will be assuming the user added commands which need to be chained contains $, and add it as a condition.
Or we need to add a config which allows users to add custom command to the list.

[christian-bromann]

@jayrepo I think this is a good solution you are suggesting. We would chain commands as long as they end with $ or $$.

[erwinheitzman]

Resolved by #8134