Selenium, build XPath in java, to click on the button

Question

I need please your help to build XPath, click on the button :

HTML is :

<div class="offer col-md gtm-data gtm-impression slick-slide" data-gtm-id="5608" data-gtm-title="230 גיגה Rolling Package" data-gtm-price="33.00" data-gtm-category="חבילות" data-gtm-list="homepage" data-gtm-position="4" data-slick-index="3" aria-hidden="true" tabindex="-1" style="width: 370px;" xpath="1">
    <div class="upper">
        <div class="title"><spam class="threshold">230</spam><spam class="units">GB</spam></div>
        <div class="subtitle"><p>Rolling Package</p>
</div>
        <!--<div class="comment"><span>test</span></div>-->
    </div>
    <div class="bottom">
      <div class="price-area">
        <div class="title"><spam class="price-number"><span class="number">33</span></spam> </div>
        <div class="subtitle">
            <span></span>
        </div>
      </div>
      <div class="link">
            <a href="en/userGuide/step1?packageidReg=5608&amp;packageidChange=5609&amp;process=CustomerGuide" class="button red full gtm-click" title="Join Now" tabindex="-1" style="">Join Now</a>
        </div>
    </div>
</div>

When I try to click on the button, by XPath :

//div[contains(@data-gtm-id, '5608')] //a[@class='button red full gtm-click']

I got this error :

org.openqa.selenium.ElementClickInterceptedException: element click intercepted: Element <a href="userGuide/step1?packageidReg=5608&amp;packageidChange=5609&amp;process=CustomerGuide" class="button red full gtm-click" title="..." tabindex="0">להצטרפות</a> is not clickable at point (951, 858). Other element would receive the click: <p>...</p>
  (Session info: chrome=96.0.4664.45)

When I try :

(//a[contains(@class,'button red')])[2]

I can click on the button, But I want the code to be more dynamic.

Answer 1

The data-gtm-id attribute is a Google Tag Manager attribute and the value of data-gtm-id attribute i.e. 5608 is dynamically generated. Everytime you access the application it would get changed. So you won't be able to locate the element using the attribute data-gtm-id

---

To click() on the element with text as Join Now you can use either of the following Locator Strategies:

• linkText:

  driver.findElement(By.linkText("Join Now")).click();
  

• cssSelector:

  driver.findElement(By.cssSelector("a.button.red.full.gtm-click[title='Join Now']")).click();
  

• xpath:

  driver.findElement(By.xpath("//a[@class='button red full gtm-click' and text()='Join Now']")).click();
  

---

However, as the element is a dynamic element so to click() on the element you need to induce WebDriverWait for the elementToBeClickable() and you can use either of the following Locator Strategies:

• linkText:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.linkText("Google"))).click();
  

• cssSelector:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("a.button.red.full.gtm-click[title='Join Now']"))).click();
  

• xpath:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//a[@class='button red full gtm-click' and text()='Join Now']"))).click();
  

Answer 2

I hope your element is right but it is clicking before it is loaded, so please add wait condition.

By joinNowBtn = By.xpath("//a[contains(text(),'Join Now')]");
WebDriverWait wait = new WebDriverWait(driver, 20);
wait.until(ExpectedConditions.elementToBeClickable(joinNowBtn));
wait.until(ExpectedConditions.visibilityOfElementLocated(joinNowBtn));
driver.findElement(joinNowBtn).click();