1

I am unable to click on the linkText "Merchandising" which is present on the left hand top corner of webpage. I tried the below xpath

1) //a[@id='link-MerchandisingDashboard']

2) //a[contains(text(), 'Merchandising')]

Don't know where I am going wrong though its not in any of the frames or Iframes but still i could see that at run time it throws a NoSuchElementException.

Snapshot of the UI

enter image description here

enter image description here

The Dom Structure 

<html>

<head>
  <meta charset="utf-8">
  <title>Sitecore Commerce</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="favicon.ico" rel="icon" type="image/x-icon">
  <base href="/">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic" rel="stylesheet" type="text/css">
  <script src="https://js.braintreegateway.com/js/braintree-2.32.1.min.js"></script>
  <script src="https://cdn.ckeditor.com/4.5.11/full/ckeditor.js"></script>
  <style>
    .cke {
      visibility: hidden;
    }
  </style>
  <style>
    .cdk-visually-hidden {
      z-index: 1200 !important;
    }

    .cdk-overlay-container {
      z-index: 1201 !important;
    }
  </style>
  <link href="styles.7d97d18c07d31c10cc21.bundle.css" rel="stylesheet">
  <style>
    i[_ngcontent-c0]:hover {
      color: gray;
    }

    .homeicon[_ngcontent-c0] {
      color: white
    }
  </style>
</head>

<body class="sc sc-fullWidth">
  <app-root _nghost-c0="" ng-version="4.4.6">
    <sc-progress-indicator-panel _ngcontent-c0="">
      <div class="progress-indicator-panel">

        <sc-page class="page show-nav" _ngcontent-c0="">
          <div class="page-header" _ngcontent-c0="" scPageHeader="">
            <sc-global-header _ngcontent-c0="">
              <header class="global-header show">
                <div class="gh-menu">
                  <button class="btn btn-link btn-icon-only basic-xx-light p-0" type="button">
          <sc-icon icon="menu_toggle">
    <i class="si si-menu_toggle  " aria-hidden="true"></i>
  </sc-icon>
        </button>
                </div>
                <div class="gh-page">Sitecore Experience Commerce</div>
                <div class="gh-close">
                  <button class="btn btn-link btn-icon-only basic-xx-light p-0" type="button">
          <sc-icon size="small" icon="dialog_close">
    <i class="si si-dialog_close si-s " aria-hidden="true"></i>
  </sc-icon>
        </button>
                </div>
                <div class="gh-content">
                  <div class="gh-logo">
                    <div _ngcontent-c0="" gh-logo="">
                      <a href="/" _ngcontent-c0="">
                        <i class="si si-home si-l homeicon" _ngcontent-c0=""></i>
                      </a>
                    </div>
                  </div>
                  <div class="gh-app"></div>
                  <div class="gh-account">
                    <div _ngcontent-c0="" gh-account="">
                      <sc-bizfx-login _ngcontent-c0="">
                        <!----><button class="btn btn-chromeless" id="sc-logout" type="button" scButton="chromeless">Log out</button>
                      </sc-bizfx-login>
                    </div>
                  </div>
                </div>
              </header>
            </sc-global-header>
          </div>
          <div class="page-app">
            <aside class="page-nav" _ngcontent-c0="" scPageNav="">
              <sc-bizfx-nav _ngcontent-c0="">
                <!---->
                <div>
                  <!---->
                  <sc-menu>
                    <nav class="menu">

                      <sc-menu-category class="ng-tns-c2-0" icon="shopping_cart2" text="Commerce">
                        <button class="menu-category" type="button">
      <sc-icon class="ng-tns-c2-0">
    <i class="si si-shopping_cart2  " aria-hidden="true"></i>
  </sc-icon><span class="ng-tns-c2-0">Commerce</span><sc-icon class="ng-tns-c2-0" size="small" color="basic-default">
    <i class="si si-navigate_up si-s basic-default" aria-hidden="true"></i>
  </sc-icon>
    </button>
                        <ul class="ng-tns-c2-0 show ng-trigger ng-trigger-openState">

                          <!---->
                          <sc-menu-item title="Merchandising">
                            <li class="menu-item">

                              <a id="link-MerchandisingDashboard" href="/entityView/MerchandisingDashboard" routerLinkActive="" scMenuItemLink="">Merchandising</a>

                            </li>
                          </sc-menu-item>
                          <sc-menu-item title="Inventory">
                            <li class="menu-item">

                              <a id="link-InventoryDashboard" href="/entityView/InventoryDashboard" routerLinkActive="" scMenuItemLink="">Inventory</a>

                            </li>
                          </sc-menu-item>
                          <sc-menu-item title="Pricing">
                            <li class="menu-item">

                              <a id="link-PricingDashboard" href="/entityView/PricingDashboard" routerLinkActive="" scMenuItemLink="">Pricing</a>

                            </li>
                          </sc-menu-item>
                          <sc-menu-item title="Promotions">
                            <li class="menu-item">

                              <a id="link-PromotionsDashboard" href="/entityView/PromotionsDashboard" routerLinkActive="" scMenuItemLink="">Promotions</a>

                            </li>
                          </sc-menu-item>
                          <sc-menu-item title="Orders">
                            <li class="menu-item">

                              <a id="link-OrdersDashboard" href="/entityView/OrdersDashboard" routerLinkActive="" scMenuItemLink="">Orders</a>

                            </li>
                          </sc-menu-item>
                          <sc-menu-item title="Customers">
                            <li class="menu-item">

                              <a id="link-CustomersDashboard" href="/entityView/CustomersDashboard" routerLinkActive="" scMenuItemLink="">Customers</a>

                            </li>
                          </sc-menu-item>
                          <sc-menu-item title="Relationship Definitions">
                            <li class="menu-item">

                              <a id="link-RelationshipsDashboard" href="/entityView/RelationshipsDashboard" routerLinkActive="" scMenuItemLink="">Relationship Definitions</a>

                            </li>
                          </sc-menu-item>
                          <sc-menu-item title="Composer">
                            <li class="menu-item">

                              <a id="link-ComposerDashboard" href="/entityView/ComposerDashboard" routerLinkActive="" scMenuItemLink="">Composer</a>

                            </li>
                          </sc-menu-item>

                        </ul>
                      </sc-menu-category>

                    </nav>
                  </sc-menu>
                </div>

                <!---->
              </sc-bizfx-nav>
            </aside>
            <main class="page-main">
              <div class="page-app-header" _ngcontent-c0="" scPageAppHeader="">
                <sc-application-header _ngcontent-c0="">
                  <header class="app-header">
                    <div class="app-header-bg">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 90" width="1920px" height="90px" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <linearGradient id="linearGradient-1" x1="100%" y1="50%" x2="0.697835%" y2="50%">
              <stop stop-color="#ca241c" offset="0%" />
              <stop stop-color="#c52425" offset="100%" />
            </linearGradient>
            <linearGradient id="linearGradient-2" x1="100%" y1="50%" x2="0.697835%" y2="50%">
              <stop stop-color="#c8231d" offset="0%" />
              <stop stop-color="#c21c22" stop-opacity="0" offset="100%" />
            </linearGradient>
            <path id="path-3" d="M 154.078 28.2205 C 162.344 22.8741 222.599 19.134 334.843 17 L 278.155 134.9 C 120.596 188.717 50.3843 197.315 67.5217 160.692 C 93.2278 105.759 141.678 36.24 154.078 28.2205 Z" />
            <polygon id="path-4" points="400,24 546.86,24 577.554,137.556 474.618,133.6" />
            <polygon id="path-5" points="514.874,21.0225 818.74,0.183594 881.627,136.479 580.919,135.385" />
            <polygon id="path-6" points="890.159,25.9561 967.396,32 1085.03,126.822 992.762,130.301" />
            <path id="path-7" d="M 769 15.5085 C 848.63 13.2426 896.097 18.5495 911.4 31.4294 C 934.355 50.7492 967.233 79.5324 1003.06 132.697 C 1026.94 168.14 965.089 168.14 817.494 132.697 L 769 15.5085 Z" />
          </defs>
          <g id="Page-1" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
            <g id="asset_applicationheader_bg">
              <g id="Group" transform="translate(0 -32)">
                <rect id="Rectangle-3" fill="url(#linearGradient-1)" x="0" y="32" width="1920" height="90" />
                <rect id="Rectangle-3-Copy" fill="url(#linearGradient-2)" x="1121" y="32" width="799" height="90" />
                <rect id="Rectangle-4" stroke="#cb3327" transform="translate(335.325 50.594) rotate(50) translate(-335.325 -50.594)" x="335.325" y="4.09404" width="1" height="93" />
                <polygon id="Rectangle-5" fill="#c01920" points="545.087,69.5542 579.659,122 509.065,122" />
                <g id="Rectangle-Copy-5">
                  <use fill="#d73127" fill-rule="evenodd" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-3" />
                  <path stroke="#e23629" stroke-width="1" d="M 277.796 134.495 L 334.04 17.5154 C 222.578 19.647 162.468 23.3897 154.349 28.6403 C 148.265 32.5754 133.128 51.8222 116.205 77.1415 C 97.5964 104.983 79.8752 135.473 67.9746 160.904 C 59.6478 178.698 72.4802 185.474 107.266 181.215 C 142.299 176.925 199.149 161.351 277.796 134.495 Z" />
                </g>
                <g id="Rectangle-Copy-2" transform="translate(488.777 80.7778) scale(-1 1) translate(-488.777 -80.7778)">
                  <use fill="#c42224" fill-rule="evenodd" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-4" />
                  <path stroke="#cb3327" stroke-width="1" d="M 400.945 24.5 L 474.889 133.11 L 576.894 137.03 L 546.478 24.5 L 400.945 24.5 Z" />
                </g>
                <g id="Rectangle-Copy-3">
                  <use fill="#c42224" fill-rule="evenodd" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-5" />
                  <path stroke="#cb3327" stroke-width="1" d="M 515.708 21.4665 L 581.208 134.886 L 880.844 135.976 L 818.431 0.706001 L 515.708 21.4665 Z" />
                </g>
                <g id="Rectangle-Copy-4" opacity="0.5">
                  <use fill="#ce2d27" fill-rule="evenodd" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-6" />
                  <path stroke="#d02f26" stroke-width="1" d="M 891.453 26.5588 L 992.963 129.793 L 1083.68 126.373 L 967.203 32.4864 L 891.453 26.5588 Z" />
                </g>
                <g id="Rectangle-Copy">
                  <use fill="#d73127" fill-rule="evenodd" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-7" />
                  <path stroke="#e23629" stroke-width="1" d="M 769.739 15.9878 L 817.859 132.27 C 891.489 149.944 943.738 158.779 974.581 158.779 C 1005.18 158.779 1014.3 150.266 1002.64 132.976 C 986.229 108.615 969.512 87.9606 952.042 69.7172 C 938.948 56.0431 927.464 45.6023 911.078 31.8119 C 895.958 19.0857 848.792 13.7787 769.74 15.9878 L 769.739 15.9878 Z" />
                </g>
              </g>
            </g>
          </g>
        </svg>
                    </div>

                    <div class="app-header-logo">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109 90" width="109px" height="90px" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <defs />
          <g id="Page-2" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
            <g id="asset_applicationheader_logo" fill="#a21d16" fill-rule="nonzero">
              <g transform="translate(0 -98)">
                <path d="M 93 0.5 C 41.6 0.5 0 42.4 0 94 C 0 145.6 41.6 187.5 93 187.5 C 144.4 187.5 186 145.6 186 94 C 186 42.4 144.4 0.5 93 0.5 Z M 93.9 161.8 C 56.3 161.8 25.9 131.2 25.9 93.4 C 25.9 55.6 56.3 25 93.9 25 C 131.5 25 161.9 55.6 161.9 93.4 C 161.9 131.2 131.5 161.8 93.9 161.8 Z" />
                <path d="M 30.8 110.8 C 30.8 110.8 41.9 154.3 85.5 159 C 129 163.7 150.8 125.8 150.8 125.8 L 139.1 118.6 C 139.1 118.6 121 149.2 88.6 148.1 C 56.2 147.1 39.9 127.7 30.8 110.8 Z" />
                <path d="M 53.7 135.4 C 63.5 142.4 75.1 146 88.6 146.5 C 119.6 147.5 137.5 118.1 137.7 117.8 L 138.6 116.4 L 140 117.3 L 150.9 124.1 C 160.9 107.6 158.5 89.2 158.5 89.2 L 138.3 89.4 C 138.3 89.4 139.9 119.2 104.1 136 C 89.2 143 64.2 141.9 49.2 130 C 49.2 130 50.5 132.4 53.7 135.4 Z" />
                <path d="M 135.4 87.8 L 135.3 86.1 L 137 86.1 L 158.2 85.9 C 157.3 69.4 144.8 54.9 144.8 54.9 L 121 69.7 C 121 69.7 136.2 81 122.4 107.8 C 117.6 117.1 107.3 127.2 97.9 131.6 C 86.4 137 77.5 137.3 77.5 137.3 C 78.7 137.8 89.8 140 105.5 133 C 136.4 119.3 135.4 88.9 135.4 87.8 Z" />
              </g>
            </g>
          </g>
        </svg>
                    </div>

                    <div class="app-header-content">
                      <h3 class="app-header-text">Sitecore Experience Commerce</h3>

                      <sc-bizfx-breadcrumb class="d-block" _ngcontent-c0="">
                        <sc-breadcrumb class="d-block">
                          <nav class="breadcrumb">

                            <!----><a class="breadcrumb-item" href="/" scBreadcrumbItem="">COMMERCE</a>

                          </nav>
                        </sc-breadcrumb>
                      </sc-bizfx-breadcrumb>

                    </div>
                  </header>
                </sc-application-header>
              </div>
              <div class="page-content-section">
                <div class="page-content">
                  <div class="page-action-bar" _ngcontent-c0="" scPageActionBar="">
                    <sc-action-bar class="action-bar" _ngcontent-c0="">

                      <sc-action-bar-left class="action-bar-left" _ngcontent-c0="">

                        <!---->

                        <sc-bizfx-env _ngcontent-c0="">
                          <!---->
                          <div>
                            <select class="form-control ng-untouched ng-pristine ng-valid" id="dropdown-environments">
                              <!---->
                              <option value="HabitatAuthoring" label="HabitatAuthoring">HabitatAuthoring</option>
                              <option value="HabitatShops" label="HabitatShops">HabitatShops</option>
                            </select>
                          </div>
                        </sc-bizfx-env>

                      </sc-action-bar-left>

                      <sc-action-bar-right class="action-bar-right" _ngcontent-c0="">

                        <sc-bizfx-languages _ngcontent-c0="">
                          <!---->
                          <div class="m-3">
                            <label class="ml-3">Language displayed</label>
                            <select class="form-control ml-3 ng-untouched ng-pristine ng-valid" id="dropdown-languages">
                              <!---->
                              <option value="en">English: English</option>
                            </select>
                          </div>
                        </sc-bizfx-languages>

                      </sc-action-bar-right>

                    </sc-action-bar>
                  </div>
                  <article class="page-article dashboardpage" _ngcontent-c0="" scPageContent="">
                    <sc-bizfx-nav _ngcontent-c0="">
                      <!---->

                      <!---->
                      <div class="m-5">
                        <div class="d-flex flex-wrap">
                          <!---->
                          <div class="tile ml-5">
                            <div class="tile-description">
                              <div class="tile-description-item">
                                <a title="Merchandising" id="link-icon-MerchandisingDashboard" href="/entityView/MerchandisingDashboard" routerLinkActive="">
                                  <i class="si si-xxxl si-store basic-x-dark" aria-hidden="true"></i>
                                </a>
                              </div>
                              <div class="tile-description-item" style="text-align: center;">
                                Merchandising
                              </div>
                            </div>
                          </div>
                          <div class="tile ml-5">
                            <div class="tile-description">
                              <div class="tile-description-item">
                                <a title="Inventory" id="link-icon-InventoryDashboard" href="/entityView/InventoryDashboard" routerLinkActive="">
                                  <i class="si si-xxxl si-barrels basic-x-dark" aria-hidden="true"></i>
                                </a>
                              </div>
                              <div class="tile-description-item" style="text-align: center;">
                                Inventory
                              </div>
                            </div>
                          </div>
                          <div class="tile ml-5">
                            <div class="tile-description">
                              <div class="tile-description-item">
                                <a title="Pricing" id="link-icon-PricingDashboard" href="/entityView/PricingDashboard" routerLinkActive="">
                                  <i class="si si-xxxl si-moneybag_dollar basic-x-dark" aria-hidden="true"></i>
                                </a>
                              </div>
                              <div class="tile-description-item" style="text-align: center;">
                                Pricing
                              </div>
                            </div>
                          </div>
                          <div class="tile ml-5">
                            <div class="tile-description">
                              <div class="tile-description-item">
                                <a title="Promotions" id="link-icon-PromotionsDashboard" href="/entityView/PromotionsDashboard" routerLinkActive="">
                                  <i class="si si-xxxl si-shopping_cart basic-x-dark" aria-hidden="true"></i>
                                </a>
                              </div>
                              <div class="tile-description-item" style="text-align: center;">
                                Promotions
                              </div>
                            </div>
                          </div>
                          <div class="tile ml-5">
                            <div class="tile-description">
                              <div class="tile-description-item">
                                <a title="Orders" id="link-icon-OrdersDashboard" href="/entityView/OrdersDashboard" routerLinkActive="">
                                  <i class="si si-xxxl si-shopping_basket basic-x-dark" aria-hidden="true"></i>
                                </a>
                              </div>
                              <div class="tile-description-item" style="text-align: center;">
                                Orders
                              </div>
                            </div>
                          </div>
                          <div class="tile ml-5">
                            <div class="tile-description">
                              <div class="tile-description-item">
                                <a title="Customers" id="link-icon-CustomersDashboard" href="/entityView/CustomersDashboard" routerLinkActive="">
                                  <i class="si si-xxxl si-businessperson2 basic-x-dark" aria-hidden="true"></i>
                                </a>
                              </div>
                              <div class="tile-description-item" style="text-align: center;">
                                Customers
                              </div>
                            </div>
                          </div>
                          <div class="tile ml-5">
                            <div class="tile-description">
                              <div class="tile-description-item">
                                <a title="Relationship Definitions" id="link-icon-RelationshipsDashboard" href="/entityView/RelationshipsDashboard" routerLinkActive="">
                                  <i class="si si-xxxl si-link basic-x-dark" aria-hidden="true"></i>
                                </a>
                              </div>
                              <div class="tile-description-item" style="text-align: center;">
                                Relationship Definitions
                              </div>
                            </div>
                          </div>
                          <div class="tile ml-5">
                            <div class="tile-description">
                              <div class="tile-description-item">
                                <a title="Composer" id="link-icon-ComposerDashboard" href="/entityView/ComposerDashboard" routerLinkActive="">
                                  <i class="si si-xxxl si-tools basic-x-dark" aria-hidden="true"></i>
                                </a>
                              </div>
                              <div class="tile-description-item" style="text-align: center;">
                                Composer
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </sc-bizfx-nav>
                    <sc-bizfx-messagebar type="danger" _ngcontent-c0="">
                      <!---->
                    </sc-bizfx-messagebar>
                    <router-outlet _ngcontent-c0=""></router-outlet>
                  </article>
                </div>

              </div>
            </main>
          </div>
        </sc-page>

        <!---->
        <!---->
      </div>
    </sc-progress-indicator-panel>
  </app-root>
  <script src="inline.dae78c03bf01a9b50490.bundle.js" type="text/javascript"></script>
  <script src="polyfills.9d27157941ed2fdedcdc.bundle.js" type="text/javascript"></script>
  <script src="vendor.7eaf8fb3759d3e45cc81.bundle.js" type="text/javascript"></script>
  <script src="main.5586ec01dfda60eddd87.bundle.js" type="text/javascript"></script>
</body>

</html>
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
Balaji Singh .Y
  • 683
  • 2
  • 9
  • 22

3 Answers3

2

My instinct would be to directly leverage the id field of the link: link-MerchandisingDashboard. 

WebDriver driver = ...;
driver.get("...");
driver.findElement(By.id("link-MerchandisingDashboard")).click();

xpath tends to be less stable, and can break with small UI updates. Finding by id is good as long as the convention of only using an id once on a page is upheld.

CEH
  • 5,701
  • 2
  • 16
  • 40
Brydenr
  • 798
  • 1
  • 19
  • 30
1

This could be synchronization issue. Please try below code :

Solution 1

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
link = WebDriverWait(driver, 15).until(EC.visibility_of_element_located((By.XPATH, "//a[contains(text(),'Merchandising']")))
link.click()

Solution 2

link = WebDriverWait(driver, 15).until(EC.element_to_be_clickable((By.ID, "link-icon-MerchandisingDashboard")))
link.click()

Solution 3

from selenium.webdriver.common.by import By
from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

from selenium.webdriver.common.action_chains import ActionChains

link = WebDriverWait(driver, 15).until(EC.element_to_be_clickable((By.ID, "link-icon-MerchandisingDashboard")))
ActionChains(driver).move_to_element(link).click().perform()
SeleniumUser
  • 4,065
  • 2
  • 7
  • 30
0

The desired element is a React element so to locate and click() on the element you have to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

  • Element with text as Merchandising in the side drawer:

    • cssSelector:

      new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("ul.ng-trigger-openState sc-menu-item[title='Merchandising'] a#link-MerchandisingDashboard[href$='MerchandisingDashboard']"))).click();

    • xpath:

      new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//ul[contains(@class, 'ng-trigger-openState')]//sc-menu-item[@title='Merchandising']//a[@id='link-MerchandisingDashboard' and text()='Merchandising']"))).click();
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352