Webdriverio：单击阴影 dom 元素

Question

我正在尝试在与 Appium 一起使用的 Javascript 中单击带有 Wedriverio 7.1.1 的影子根中的按钮。我阅读了documentation 以及我看到了this 线程，但它们都没有帮助我。 代码很容易理解，但我不明白为什么它不起作用。

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();
}

如果您查看该页面，您会看到这些元素。 我遇到的问题是这样的

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

你能帮帮我吗？

Answer 1

您刚刚错过了await 关键字。在与元素（按钮）交互（单击）之前，您必须 await 元素（按钮）。因此，您的脚本看起来不错，只需为 acceptCookiesButton 元素添加 await。

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