如何单击 WebdriverIO 中的 SVG 元素？答案

【问题标题】：How to click on SVG element in WebdriverIO?如何单击 WebdriverIO 中的 SVG 元素？
【发布时间】：2021-02-26 09:45:26
【问题描述】：

我正在使用 WebdriverIO + Cucumber 并希望单击 SVG 图标。我尝试使用这样的 Xpath 选择器执行 click()：

$('//div[@class="unique-class"]//ul[@class="list"]//li[2]//div[@class="item-link"]');
$('//div[@class="unique-class"]//ul[@class="list"]//li[2]//div[@class="item-link"]//svg');
$('//div[@class="unique-class"]//ul[@class="list"]//div[@class="item-link"]//svg[@class="icon2"]');

但这似乎不起作用。我不知道我在这里做错了什么。

HTML 看起来像这样：

<div class="unique-class">
  <ul class="list">
    <li class="list-item">
       <div class="item-link">
          <svg class="icon1"></svg>
      </div>
    </li>
    <li class="list-item">
       <div class="item-link">
          <svg class="icon2"></svg>
      </div>
    </li>
    <li class="list-item">
       <div class="item-link">
          <svg class="icon3"></svg>
      </div>
    </li>
  </ul>
</div>

我是测试新手，请注意 :)

【问题讨论】：

标签： svg automated-tests cucumber webdriver-io

【解决方案1】：

如果你还没有弄清楚，xpath 中的 svg 不起作用。您应该使用 //*[@class] 或 //*[@id]

例子

$("//div[@class='parent']/*[contains(@class, 'svg-child')]")

您可以使用 SVGEvents 触发对 svg 元素的点击。

clickSVG(xpath) {
    browser.execute(function (xpath) {
      var event = document.createEvent("SVGEvents");
      event.initEvent("click", true, true);
      var locator = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
      locator.dispatchEvent(event);
    }, xpath);
  }

例子

clickSVG("//div[@class='parent']/*[contains(@class, 'svg-child')]");

【讨论】：