[🐛 Bug]: Error allow custom commands scoped to element

[yopasa94]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

WebdriverIO Version

latest

Node.js Version

latest

Mode

Standalone Mode

Which capabilities are you using?

capabilities: [
    {
      maxInstances: 1,
      browserName: 'chrome',
      'goog:chromeOptions': {
        args: ['--start-maximized'],
      },
      acceptInsecureCerts: true,
    },
  ]

What happened?

Custom commands should use a '$' symbol at the end to be processed unfortunately it produce a new issue when we call wrapCommand from shim.js class

Related PR
#8134

SetValueSafe$ does not exist in the (this) (WebDriver:Element) context. Event though I can see the list of wdio default commands (i.e click, $, $$, setValue....so on)

What is your expected behavior?

I should be able to call custom commands from elements

How to reproduce the bug.

wdio.chain.command.type.d.ts

import 'webdriverio';
declare module 'webdriverio' {
  interface ChainablePromiseElement<T> {
    setValueSafe$: (value: string) => Promise<void>;
  }
}

wdio.command.type.d.ts

declare global {
  namespace WebdriverIO {
    interface Element {
      setValueSafe$: (value: string) => Promise<void>;
    }
  }
}

MyCustomCommand.ts

export async function setValueSafe(this: WebdriverIO.Element, value: string, expectedValue = value): Promise<void> {
  await this.waitForDisplayed();
  await this.setValue(value);
}

wdio-conf.ts

  before() {
    browser.addCommand('setValueSafe$', setValueSafe, true);
  }

Relevant log output

TypeError: Cannot read properties of undefined (reading 'apply')
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Code of Conduct

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

Is there an existing issue for this?

• I have searched the existing issues

[jayrepo]

Does it occur if you remove trailing $ from your command?

[yopasa94]

No, it does not occur but I'd need to use multiple await to call the new custom command i.e

I would like to call the new custom comman in this way ->
await mypage.nameInput.setValueSafe$('querty');

If I remove the '$, it forces me to use multiple await
await (await mypage.nameInput).setValueSafe('querty');

[jayrepo]

Tried with minimal code below, both commands are working fine

async function setValueSafe(value) {
  await this.waitForDisplayed();
  await this.setValue(value);
}

describe('My Login application', () => {
  beforeAll(() => {
    browser.addCommand('setValueSafe$', setValueSafe, true);
    browser.addCommand('setValueSafe', setValueSafe, true);
  });
  it('should login with valid credentials', async () => {
    await browser.url(`https://the-internet.herokuapp.com/login`);

    await $('#username').setValueSafe$('tomsmith');
    await $('#password').setValueSafe('SuperSecretPassword!');
    await $('button[type="submit"]').click();

    await expect($('#flash')).toBeExisting();
    await expect($('#flash')).toHaveTextContaining('You logged into a secure area!');
  });
});

there might be issue with mypage.nameinput, can you please provide an example?

[yopasa94]

Could you share your package.json file ? I'd like to use the same version dependencies

[jayrepo]

{
    "devDependencies": {
        "@wdio/cli": "^7.20.2",
        "@wdio/jasmine-framework": "^7.20.0",
        "@wdio/local-runner": "^7.20.2",
        "@wdio/spec-reporter": "^7.20.0",
        "chromedriver": "^102.0.0",
        "wdio-chromedriver-service": "^7.3.2"
    }
}

[christian-bromann]

@yopasa94 please provide a reproducible example to help us identify this issue for you, otherwise we can only close it.

[christian-bromann]

Closing due to inactivity.