C# Selenium - 无法定位元素

Question

I am trying to get the last 'Export' button using Selenium but it throws 'no such element' Exception - Unable to locate element. I've added delays before trying to locate the this element so it shouldn't be caused by HTML document not ready. I've tried finding elements by id (the id of the outer div), xPath, classes and using css selectors but no luck with any of them. How should I get the 'Export' button element correctly?

Here's what I've tried but none of them worked.

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");

Below is the HTML I am trying to access.

<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

Please check in the dev tools (Google chrome) if we have unique entry in HTML DOM or not.

xpath that you should check :

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

Steps to check:

Press F12 in Chrome -> go to element section -> do a CTRL + F -> then paste the xpath and see, if your desired element is getting highlighted with 1/1 matching node.

If we have 1/1 matching node, Please make sure that :

1. This button is not under an iframe.
2. This button is not under a shadow-root.
3. You should not be on new tab/windows launched by selenium.

If it satisfy all the mentioned conditions, then you can try to click it like this :

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

You should add some add/delay before performing this interaction.

other xpath that you can check :

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

there are trailing spaces, and I think that is the reason your this line of code

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

did not work.

Answer 2

The desired element is a dynamic element so you have to induce WebDriverWait for the desired ElementToBeClickable() and you can use either of the following Locator Strategies :

• 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')]")));