Xpath和CssSelectors用于相同的标签，属性和元素

Question

我正在尝试为具有4个按钮的相同代码的按钮创建Selenium测试（以下html重复4次）：

    <div class="item">
<div class="head">
   <a class="title caps_style primary-color-text"href="https://www.www.www/link/link-link-complex-api-testing" target="_blank">Rake Athlete Complex API TESTING</a>
</div>
<div class="middle">
   <div class="photo_square">
      <a class="" href="https://www.www.www/link/link-link-complex-api-testing" target="_blank"><img src="/assets/2.png"></a>
   </div>
   <span class="stats">
      <span class="title caps_style votes">salvations</span>
      <span class="amt caps_style primary-color-text">
         <i class="heart"></i><!-- react-text: 58 -->240
         <!-- /react-text -->
      </span>
   </span>
   <div class="stats">
      <span class="title caps_style">Pickles Grazed</span>
      <span class="amt caps_style primary-color-text">
         <span class="fastack"><i class="fastack2x"></i>
         <i class="fainverse"></i></span>
         <i class="usb"></i><!-- react-text: 66 -->184 k<!-- /react-text -->
      </span>
   </div>
</div>
<div class="bottom">
   <span class="snippit">latin fillin text</span>
</div>
<div class="inline-b">
   <div>
      <button class="vote-btn primary-color-background">
      <img src="//www.www.www/assets/pic.png">
      <span class="primary-color-background">Give</span>
      </button>
   </div>
</div>

这是我尝试为第一个按钮（CssSelector和XPath）运行的C＃代码：

driver.FindElement(By.CssSelector("button.vote-btn.primary-color-background")).Click();

和：

driver.FindElement(By.XPath("//*[@id='Sections-react-component-0']/div/div[3]/div/div[1]/div[1]/div[4]/div/button").Click();

我进行硒测试时收到以下错误消息：

Message: System.InvalidOperationException : unknown error: Element <button class="vote-btn primary-color-background">...</button> is not clickable at point (286, 1233). 
Other element would receive the click: <p>...</p>
      (Session info: chrome=61.0.3163.100)
      (Driver info: chromedriver=2.32.498550

是否可以使用CssSelector选择特定选项？ 例如在代码中的某处使用[2]或[4]？

Answer 1

您应该尝试使用“ className”选择器，例如

driver.FindElement(By.className("vote-btn")).Click();

或者，您也可以尝试使用“ css选择器”之类的方法，

driver.FindElement(By.CssSelector(".vote-btn.primary-color-background")).Click();

Answer 2

如果您有多个具有相同按钮的部分-最佳选择是在定位器中从上到下，并指定部分并在其中找到按钮。

由于button [n]不会告诉您要寻找的确切按钮。 如果添加另一个按钮会怎样？ 也指定部分，而不只是按钮。

而且在css定位器中，无法通过位置编号来识别元素。

带有部分的页面示例将极大地帮助我们构建高效的定位器。