How to convert this selector that we can directly use in Developer Tools to WebDriverIO syntax?

Question

I am trying to locate and click on an element with the following locator

(//button[@class="btn btn-link input-group-append input-group-text"])[1]

How can I use this in WebDriverIO syntax ??

I tried like this const date = await $('(//button[@class="btn btn-link input-group-append input-group-text"])[1]"')

But Getting this error: [chrome 102.0.5005.115 windows #0-0] invalid selector: Unable to locate an element with the xpath expression (//button[@class="btn btn-link input-group-append input-group-text"])[1]" because of the following error: SyntaxError: Failed to execute 'evaluate' on 'Document': The string '(//button[@class="btn btn-link input-group-append input-group-text"])[1]"' is not a valid XPath expression. (Session info: chrome=102.0.5005.115)

Answer 1

Thanks to the comment above, there was a silly mistake that VSCode didn't tell me. Now the code worked.

We can directly use the designed XPath in Webdriver.IO syntax.

sample code with custom XPath as below:

describe('Ram', async () => {
it('Ram Practice', async () => {
    await browser.url('https://webdriver.io');
    await browser.maximizeWindow();
    await expect(browser).toHaveTitle('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js | WebdriverIO');
    const button = await browser.$('(//a[@class="button button--outline button--secondary button--lg"])[1]');
    await button.click();
    await expect(browser).toHaveTitle('Getting Started | WebdriverIO');
    
    await browser.pause(10000);
    const api = await browser.$('//a[@class="navbar__item navbar__link" and text() ="API"]');
    await api.click();

   
});

});