Webdriverio: Click on a shadow dom element

Question

I am trying to click on a button within a shadow root with Wedriverio 7.1.1 in Javascript used with Appium. I read the documentation as well as I saw this thread but none of them helped me. Code is pretty simple to be understood but I don't understand why it's not working.

const wdio = require('webdriverio');                                               
                                                               
const pageToOpen = 'https://www.musement.com/uk/paris/eiffel-tower-v/';            
                                                                                    
const opts = {                                                                     
  path: '/wd/hub',                                                                 
  logLevel: 'info',                                                                
  port: 4723,                                                                      
  capabilities: {                                                                  
    platformName: 'Android',                                                       
    platformVersion: '11',                                                         
    deviceName: 'Android Emulator',                                                
    browserName: 'Chrome',                                                         
    automationName: 'UiAutomator2',                                                
    avd: 'Pixel_3a_API_30_x86'                                                     
  }                                                                                
};                                                                                 
                                                                                   
async function main () {                                                           
                                                                                   
  const mobileBrowser = await wdio.remote(opts);                                   
  await mobileBrowser.setTimeout({ 'pageLoad': 10000 });                         
  await mobileBrowser.url(pageToOpen);                                             
                                                                                                                                             
                                                                                
  // find and click on element "Accept Cookies" button                             
  console.log('find the "Accept Cookies" button on the page');                     
                                                                 
  const cookieBanner = await mobileBrowser.$('msm-cookie-banner');                 
  const acceptCookiesButton = cookieBanner.shadow$('[data-test="cookie-banner__accept-cookies"]');
  await acceptCookiesButton.waitForDisplayed({ timeout: 10000 });               
  await acceptCookiesButton.click();
}

If you look at that page you will see these elements. The issues I have is this

2021-04-18T21:23:05.138Z INFO webdriver: DATA {
  script: 'return (function (elem) {\n' +
    '        return (function() {\n' +
    '      // element has a shadowRoot property\n' +
    '      if (this.shadowRoot) {\n' +
    `        return this.shadowRoot.querySelector('[data-test="cookie-banner__accept-cookies"]')\n` +
    '      }\n' +
    '      // fall back to querying the element directly if not\n' +
    `      return this.querySelector('[data-test="cookie-banner__accept-cookies"]')\n` +
    '    }).call(elem);\n' +
    '    }).apply(null, arguments)',
  args: [
    {
      'element-6066-11e4-a52e-4f735466cecf': '3ae2a458-32d3-4366-aed6-bd7dbc5febbd',
      ELEMENT: '3ae2a458-32d3-4366-aed6-bd7dbc5febbd'
    }
  ]
}

(node:46421) UnhandledPromiseRejectionWarning: TypeError: acceptCookiesButton.click is not a function

Could you please help me?

Answer 1

You've just missed the await keyword. You have to await the element (button) before interacting (clicking) with it. So, your script looks good, just add the await for the acceptCookiesButton element.

//                           ↓ missed await
const acceptCookiesButton = await cookieBanner.shadow$('[data-test="cookie-banner__accept-cookies"]');