C# Selenium - 無法定位元素

Question

我正在嘗試使用 Selenium 獲取最后一個“導出”按鈕，但它拋出“沒有這樣的元素”異常 - 無法定位元素。 我在嘗試定位 this 元素之前添加了延遲，因此它不應該是由 HTML 文檔未准備好引起的。 我試過通過 id（外部 div 的 id）、xPath、類和使用 css 選擇器來查找元素，但對它們中的任何一個都沒有運氣。 我應該如何正確獲取“導出”按鈕元素？

這是我嘗試過的，但沒有一個奏效。

driver.FindElement(By.XPath("//*[@id='QbDP57yUX-']/button")); //Got this xpath from chrome F12 - copy xpath, but realized the id is dynamic so this doesn't work.
driver.FindElement(By.XPath("//button[@type='button'][text()='Export']");
driver.FindElement(By.CssSector[button[class='slds-button slds-button_neutral action-bar-action-ReportExportAction reportAction report-action-ReportExportAction']]);
driver.FindElement(By.ClassName("report-action-ReportExportAction");

下面是我試圖訪問的 HTML。

<div class="action-bars">
  <div class="slds-m-left--xx-small">
    <div
      class="slds-button-group actionBarButtonGroup"
      id="rKS91liTR"
      role="group"
    >
      <div
        class="slds-tooltip-trigger"
        style="display: inline-block; line-height: 1"
      >
        <button
          class="
            slds-button slds-button_icon-border
            action-bar-action-searchTable
            reportAction
            report-action-searchTable
          "
          type="button"
        >
          <svg aria-hidden="true" class="slds-button__icon" viewBox="0 0 52 52">
            <path
              d="M49.598 45.298l-13.4-13.3c2.7-3.8 4.1-8.6 3.4-13.7-1.2-8.6-8.2-15.4-16.9-16.2-11.8-1.2-21.8 8.8-20.6 20.7.8 8.6 7.6 15.7 16.2 16.9 5.1.7 9.9-.7 13.7-3.4l13.3 13.3c.6.6 1.5.6 2.1 0l2.1-2.1c.6-.6.6-1.6.1-2.2zm-41.6-24.4c0-7.1 5.8-12.9 12.9-12.9 7.1 0 12.9 5.8 12.9 12.9 0 7.1-5.8 12.9-12.9 12.9-7.1 0-12.9-5.7-12.9-12.9z"
              fill-rule="evenodd"
            ></path></svg
          ><span class="slds-assistive-text">Search report table</span></button
        ><span></span>
      </div>
    </div>
  </div>
  <div class="slds-m-left--xx-small">
    <div
      class="slds-button-group actionBarButtonGroup"
      id="vSt8t2ooSr"
      role="group"
    >
      <button
        class="
          slds-button slds-button_neutral
          action-bar-action-addChart
          reportAction
          report-action-addChart
          action-bar-sprite-button
        "
        type="button"
      >
        <svg
          aria-hidden="true"
          class="slds-button__icon slds-button__icon_left"
          viewBox="0 0 100 100"
        >
          <path
            d="M45.2 67.5c-.7-5.7 1.1-11.5 4.9-15.8 3.8-4.3 9.3-6.7 15-6.7.8 0 1.7.1 2.5.2.9.1 1.8.3 2.7.6 1.4.4 2.7-.7 2.5-2.1-1.1-11.9-10-21.5-21.6-23.7-1.6-.3-3.2 1-3.2 2.6v22.7c0 1.5-1.2 2.7-2.7 2.7H22.7c-1.7 0-2.9 1.5-2.6 3.2 2.2 11.5 11.7 20.4 23.6 21.6 1.4.1 2.5-1.2 2.1-2.5-.3-.9-.5-1.9-.6-2.8z"
          ></path>
          <path
            d="M43.5 40.8V22.7c0-1.7-1.5-2.9-3.2-2.6-10.8 2-18.3 9.5-20.3 20.3-.3 1.6 1 3.2 2.6 3.2h18.2c1.5-.1 2.7-1.3 2.7-2.8zm36.4 22.3c-.8-6.6-6.2-12-12.9-12.9-.6-.1-1.3-.1-1.9-.1-8.9 0-16 7.7-14.9 16.9.8 6.7 6.2 12.1 12.9 12.9.6.1 1.3.1 1.9.1 8.9 0 16-7.7 14.9-16.9zm-7.6 3.1c0 .7-.5 1.2-1.2 1.2h-3.6v3.8c0 .7-.5 1.2-1.2 1.2h-2.5c-.7 0-1.2-.5-1.2-1.2v-3.7h-3.7c-.7 0-1.2-.5-1.2-1.2v-2.5c0-.7.5-1.2 1.2-1.2h3.6v-3.7c0-.7.5-1.2 1.2-1.2h2.5c.7 0 1.2.5 1.2 1.2v3.7h3.7c.7 0 1.2.5 1.2 1.2v2.4z"
          ></path></svg
        >Add Chart
      </button>
    </div>
  </div>
  <div class="slds-m-left--xx-small">
    <div
      class="slds-button-group actionBarButtonGroup"
      id="JCYd4LSS01"
      role="group"
    >
      <div
        class="slds-tooltip-trigger"
        style="display: inline-block; line-height: 1"
      >
        <button
          aria-pressed="false"
          class="
            action-bar-action-toggleFilter
            reportAction
            report-action-toggleFilter
            slds-button slds-not-selected
            slds-button_icon-border
          "
          type="button"
        >
          <svg
            aria-hidden="true"
            class="slds-button__icon slds-button__icon_stateful"
            viewBox="0 0 52 52"
          >
            <path
              d="M48.3 4H3.9C2.4 4 1.7 5.7 2.6 6.8L22 29.5c.6.7.9 1.7.9 2.6v14.4c0 .8.8 1.5 1.6 1.5h3c.8 0 1.4-.7 1.4-1.5V32.1c0-1 .4-1.9 1.1-2.6L49.6 6.8c.9-1.1.2-2.8-1.3-2.8z"
            ></path></svg
          ><span class="slds-assistive-text">Filters</span></button
        ><span></span>
      </div>
    </div>
  </div>
  <div class="slds-m-left--xx-small">
    <div
      class="slds-button-group actionBarButtonGroup"
      id="Bui2PwoQfe"
      role="group"
    >
      <div
        class="slds-tooltip-trigger"
        style="display: inline-block; line-height: 1"
      >
        <button
          class="
            slds-button slds-button_icon-border
            action-bar-action-refreshReport
            reportAction
            report-action-refreshReport
          "
          type="button"
        >
          <svg aria-hidden="true" class="slds-button__icon" viewBox="0 0 52 52">
            <path
              d="M46.5 4h-3c-.8 0-1.5.7-1.5 1.5v7c0 .9-.5 1.3-1.2.7-.3-.4-.6-.7-1-1-5-5-12-7.1-19.2-5.7-2.5.5-4.9 1.5-7 2.9-6.1 4-9.6 10.5-9.7 17.5-.1 5.4 2 10.8 5.8 14.7 4 4.2 9.4 6.5 15.2 6.5 5.1 0 9.9-1.8 13.7-5 .7-.6.7-1.6.1-2.2l-2.1-2.1c-.5-.5-1.4-.6-2-.1-3.6 3-8.5 4.2-13.4 3-1.3-.3-2.6-.9-3.8-1.6C11.7 36.6 9 30 10.6 23.4c.3-1.3.9-2.6 1.6-3.8C15 14.7 19.9 12 25.1 12c4 0 7.8 1.6 10.6 4.4.5.4.9.9 1.2 1.4.3.8-.4 1.2-1.3 1.2h-7c-.8 0-1.5.7-1.5 1.5v3.1c0 .8.6 1.4 1.4 1.4h18.3c.7 0 1.3-.6 1.3-1.3V5.5C48 4.7 47.3 4 46.5 4z"
            ></path></svg
          ><span class="slds-assistive-text">Refresh</span></button
        ><span></span>
      </div>
    </div>
  </div>
  <div class="slds-m-left--xx-small">
    <div
      class="slds-button-group actionBarButtonGroup"
      id="QbDP57yUX-"
      role="group"
    >
      <button
        class="
          slds-button slds-button_neutral
          action-bar-action-ReportExportAction
          reportAction
          report-action-ReportExportAction
        "
        type="button"
      >
        Export
      </button>
    </div>
  </div>
</div>

Answer 1

如果我們在HTML DOM是否有唯一條目，請檢查dev tools （谷歌瀏覽器）。

您應該檢查的 xpath ：

//button[contains(@class,'ReportExportAction')]

檢查步驟：

Press F12 in Chrome -> 轉到element部分 -> 執行CTRL + F -> 然后粘貼xpath並查看您想要的element是否被1/1匹配節點突出顯示。

如果我們有 1/1 匹配節點，請確保：

1. 此按鈕不在 iframe 下。
2. 此按鈕不在 shadow-root 下。
3. 您不應該在 selenium 啟動的新選項卡/窗口上。

如果它滿足所有提到的條件，那么您可以嘗試像這樣單擊它：

IWebElement e = Driver.FindElement(By.XPath($"//button[contains(@class,'ReportExportAction')]"));
e.Click();

您應該在執行此交互之前添加一些添加/延遲。

您可以檢查的其他 xpath ：

//button[contains(@class,'ReportExportAction') and contains(text(),'Export')]

有尾隨空格，我認為這就是你這行代碼的原因

driver.FindElement(By.XPath("//button[@type='button'][text()='Export']");

不工作。

Answer 2

所需的元素是一個動態元素，因此您必須為所需的ElementToBeClickable()引入WebDriverWait ，您可以使用以下任一定位器策略：

• CssSelector ：

   new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable(By.CssSelector("button.action-bar-action-ReportExportAction.report-action-ReportExportAction")));

• XPath ：

   new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable(By.XPath("//button[contains(@class, 'report-action-ReportExportAction') and contains(., 'Export')]")));