How do I click 'Search Tires' on this site using Selenium WebDriver and C#?

Question

I'm trying to click on 'Search Tires'. Usually we just use Driver.Navigate() to 'http://website.com/WebOrder/Product/Search' but in this case doesn't work I tried http and https. After I use Driver.Navigate(), I refresh the page.

HTML:

<div class="col-xs-100 bar">
  <!-- ngIf: isSessionValid && mainMenu.commandList.length > 0 -->
  <div ng-if="isSessionValid &amp;&amp; mainMenu.commandList.length > 0" class="menu ng-scope">
    <div class="col-xs-100">
      <div class="col-xs-10">
        <div ng-class="col-xs-100" ui-menu="mainMenu" ui-height="bar" class="ng-isolate-scope">
          <div class="dropdown bar open" ng-click="uiMenu.onMenuClick(this)">
            <div data-toggle="dropdown" ng-transclude="">
              <button ng-class="{'selected':mainMenu.toolbar.isHomeSelected}" class="col-xs-100 default-button-height menu-button ng-binding ng-scope">
                <i class="fa fa-align-justify fa-lg">&nbsp;&nbsp;</i>MENU </button>
            </div>
            <ul class="dropdown-menu view-list main-menu-button" style="text-align: left;">
              <!-- ngRepeat: command in uiMenu.commandList -->
              <li ng-repeat="command in uiMenu.commandList" class="ng-scope">
                <a class="font12 normal ng-binding" href="/WebOrder/Home/Index">Home</a>
              </li>
              <!-- end ngRepeat: command in uiMenu.commandList -->
              <li ng-repeat="command in uiMenu.commandList" class="ng-scope">
                <a class="font12 normal ng-binding" href="/WebOrder/InforCsdAccount/Invoice">Invoices</a>
              </li>
              <!-- end ngRepeat: command in uiMenu.commandList -->
              <li ng-repeat="command in uiMenu.commandList" class="ng-scope">
                <a class="font12 normal ng-binding" href="/WebOrder/InforCsdAccount/BalanceStatement">Statements &amp; Balances</a>
              </li>
              <!-- end ngRepeat: command in uiMenu.commandList -->
              <li ng-repeat="command in uiMenu.commandList" class="ng-scope">
                <a class="font12 normal ng-binding" href="/WebOrder/Company/ContactUs">ContactUs</a>
              </li>
              <!-- end ngRepeat: command in uiMenu.commandList -->
              <li ng-repeat="command in uiMenu.commandList" class="ng-scope">
                <a class="font12 normal ng-binding" href="/WebOrder/User/Logout">Logout</a>
              </li>
              <!-- end ngRepeat: command in uiMenu.commandList -->
            </ul>
          </div>
        </div>
      </div>
      <!-- ngIf: costarLive.isWholesale -->
      <div ng-if="costarLive.isWholesale" class="ng-scope">
        <!-- ngIf: mainMenu.toolbar.showSearchByVehicle -->
        <div class="col-xs-12 ng-scope" ng-if="mainMenu.toolbar.showSearchByVehicle">
          <form action="/WebOrder/Vehicle/Search/" name="vehicleSearch" method="post" class="ng-pristine ng-valid"></form>
          <button ng-class="{'selected':mainMenu.toolbar.isSearchByVehicleSelected}" class="col-xs-100 default-button-height menu-button" ng-click="mainMenu.toolbar.click('vehicleSearch')">SEARCH BY VEHICLE </button>
          <div class="menu-separator">&nbsp;</div>
        </div>
        <!-- end ngIf: mainMenu.toolbar.showSearchByVehicle -->
        <div class="col-xs-12" ng-switch="" on="(costarLive.webUiLoginType == 'Both') || (costarLive.webUiLoginType == 'Old')">
          <!-- ngSwitchWhen: true -->
          <div class="col-xs-100 ng-scope" ng-switch-when="true">
            <form action="/WebOrder/Product/Search" name="productSearchTires" method="post" class="ng-pristine ng-valid">
              <input type="hidden" id="DataField" name="CriteriaList[0].DataField" value="SpecificationClass">
              <input type="hidden" id="String" name="CriteriaList[0].String" value="TIRES">
              <input type="hidden" id="DataField" name="CriteriaList[1].DataField" value="IsClassicSearch">
              <input type="hidden" id="Boolean" name="CriteriaList[1].Boolean" value="False">
            </form>
            <form action="/WebOrder/Product/Search" name="productSearchTiresOld" method="post" class="ng-pristine ng-valid">
              <input type="hidden" id="DataField" name="CriteriaList[0].DataField" value="SpecificationClass">
              <input type="hidden" id="String" name="CriteriaList[0].String" value="TIRES">
              <input type="hidden" id="DataField" name="CriteriaList[1].DataField" value="IsClassicSearch">
              <input type="hidden" id="Boolean" name="CriteriaList[1].Boolean" value="True">
            </form>
            <div class="col-xs-100" ui-height="bar">
              <div class="dropdown bar">
                <div data-toggle="dropdown">
                  <button ng-class="{'selected':mainMenu.toolbar.isTiresSelected}" class="col-xs-100 default-button-height menu-button selected">
                    <i class="fa fa-align-justify fa-lg">&nbsp;&nbsp;</i> SEARCH TIRES </button>
                </div>
                <ul class="dropdown-menu view-list">
                  <li>
                    <a class="font12 normal ng-binding" href="#" ng-click="mainMenu.toolbar.click('productSearchTiresOld')">Classic Search</a>
                  </li>
                  <li>
                    <a class="font12 normal ng-binding" href="#" ng-click="mainMenu.toolbar.click('productSearchTires')">Search Tires</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- ngSwitchDefault:  -->
          <div class="menu-separator">&nbsp;</div>
        </div>
        <!-- ngIf: mainMenu.toolbar.showWheels -->
        <!-- ngIf: mainMenu.toolbar.showOther -->
        <div class="col-xs-12 ng-scope" ng-if="mainMenu.toolbar.showOther">
          <form action="/WebOrder/Product/Search" name="productSearchOther" method="post" class="ng-pristine ng-valid">
            <input type="hidden" id="DataField" name="CriteriaList[0].DataField" value="SpecificationClass">
            <input type="hidden" id="String" name="CriteriaList[0].String" value="OTHER">
          </form>
          <button ng-class="{'selected':mainMenu.toolbar.isOtherSelected}" class="col-xs-100 default-button-height menu-button" ng-click="mainMenu.toolbar.click('productSearchOther')">SEARCH OTHER </button>
          <div class="menu-separator">&nbsp;</div>
        </div>
        <!-- end ngIf: mainMenu.toolbar.showOther -->
        <!-- ngIf: mainMenu.toolbar.showTireStorage -->
        <div class="col-xs-12">
          <form action="/WebOrder/InforCsdOrder/Search" name="viewMyOrders" method="post" class="ng-pristine ng-valid"></form>
          <button ng-class="{'selected':mainMenu.toolbar.isViewMyOrdersSelected}" class="col-xs-100 default-button-height menu-button" ng-click="mainMenu.toolbar.click('viewMyOrders')">TRACK ORDERS </button>
          <div class="menu-separator">&nbsp;</div>
        </div>
        <div class="col-xs-18">
          <form action="/WebOrder/Order/Current" name="viewOrder" method="post" class="ng-pristine ng-valid"></form>
          <!-- ngIf: costarWebSummary.totalPiecesCount > 0 -->
          <div class="menu-separator">&nbsp;</div>
        </div>
      </div>
      <!-- end ngIf: costarLive.isWholesale -->
    </div>
  </div>
  <!-- end ngIf: isSessionValid && mainMenu.commandList.length > 0 -->
</div>

I tried to locate the element by CSS selector and XPath but I receive the error,

NoSuchElementException: no such element: Unable to locate element: {"method":"xpath","selector":"//button[contains(text(), 'SEARCH TIRES')]"}:

Code:

var dropdown = new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementToBeClickable(By.XPath("//button[contains(text(), 'SEARCH TIRES')]")));
dropdown.Click();

var searchTiresOption = new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementToBeClickable(By.LinkText("Search Tires")));
searchTiresOption.Click();

var searchButton = new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementToBeClickable(By.XPath("//button[contains(text(), 'Search Tires')]")));
searchButton.Click();

score 1 · Accepted Answer · answered Mar 16 '23 at 18:38

XPath contains() isn't working in this case because there's also an I tag inside the BUTTON,

<button ...>
    <i ...>&nbsp;&nbsp;</i> SEARCH TIRES 
</button>

You can switch your XPath to

//button[contains(.,'SEARCH TIRES')]

or

//button[text()=' SEARCH TIRES ']

Either will work.

See this for more info on . vs text() in XPath.

You can also use a CSS selector

button[ng-class*='isTiresSelected']

How do I click 'Search Tires' on this site using Selenium WebDriver and C#?

1 Answers1