Selenium，在java中構建XPath，點擊按鈕

Question

我需要您的幫助來構建 XPath，點擊按鈕：

HTML 是：

<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>

當我嘗試點擊按鈕時，XPath：

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

我收到了這個錯誤：

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)

當我嘗試：

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

我可以點擊按鈕，但我希望代碼更加動態。

Answer 1

data-gtm-id屬性是Google Tag Manager屬性， data-gtm-id屬性的值即5608是動態生成的。 每次您訪問應用程序時，它都會被更改。 因此，您將無法使用屬性data-gtm-id定位元素

---

要click()在元素上使用文本作為Join Now ，您可以使用以下任一Locator Strategies ：

• 鏈接文本：

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

• 選擇器：

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

---

但是，由於元素是動態元素，因此要在元素上click() ，您需要為elementToBeClickable()誘導WebDriverWait ，並且您可以使用以下任一定位器策略：

• 鏈接文本：

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

• 選擇器：

   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

我希望你的元素是正確的，但它在加載之前點擊，所以請添加等待條件。

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

Answer 3

謝謝@Jayanth Bala，但我在代碼中有幾次單擊“立即加入”的選項：在此處輸入圖像描述

我怎樣才能讓它依賴於 TAG - “data-gtm-id”，

My code is :

<div class="slick-list draggable"><div class="slick-track" style="opacity: 1; width: 2340px; transform: translate3d(0px, 0px, 0px);"><div class="offer col-md gtm-data slick-slide slick-current slick-active" data-gtm-id="5663" data-gtm-title="1500 גיגה 476 2nd" data-gtm-price="54.00" data-gtm-category="חבילות" data-gtm-list="homepage" data-gtm-position="1" data-slick-index="0" aria-hidden="false" tabindex="0" style="width: 370px;">
    <div class="upper">
        <div class="title"><spam class="offer-content"><p>1500GB</p>
<spam></spam></spam></div>
        <div class="subtitle"><p>476 2nd</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">54</span></spam> </div>
        <div class="subtitle">
            <span><p>476&nbsp;</p>
</span>
        </div>
      </div>
      <div class="link">
            <a href="en/userGuide/step1?packageidReg=5663&amp;packageidChange=5662&amp;process=CustomerGuide" class="button red full gtm-click" title="Join Now" tabindex="0">Join Now</a>
        </div>
    </div>
</div><div class="offer col-md gtm-data slick-slide slick-active" data-gtm-id="5003" data-gtm-title="40 גיגה All included" data-gtm-price="29.25" data-gtm-category="חבילות" data-gtm-list="homepage" data-gtm-position="2" data-slick-index="1" aria-hidden="false" tabindex="0" style="width: 370px;">
    <div class="upper">
        <div class="title"><spam class="threshold">40</spam><spam class="units">GB</spam></div>
        <div class="subtitle"><p>All included</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">29</span><span class="decimal">.25</span></spam> </div>
        <div class="subtitle">
            <span></span>
        </div>
      </div>
      <div class="link">
            <a href="en/userGuide/step1?packageidReg=5003&amp;process=CustomerGuide" class="button red full gtm-click" title="Join Now" tabindex="0">Join Now</a>
        </div>
    </div>
</div><div class="offer col-md gtm-data slick-slide slick-active" data-gtm-id="5625" data-gtm-title="500 גיגה 5G Surfing" data-gtm-price="44.00" data-gtm-category="חבילות" data-gtm-list="homepage" data-gtm-position="3" data-slick-index="2" aria-hidden="false" tabindex="0" style="width: 370px;">
    <div class="upper">
        <div class="title"><spam class="threshold">500</spam><spam class="units">GB</spam></div>
        <div class="subtitle"><p>5G Surfing</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">44</span></spam> </div>
        <div class="subtitle">
            <span><p>For the 2nd line. 1st line 49 ₪ /month</p>
</span>
        </div>
      </div>
      <div class="link">
            <a href="en/userGuide/step1?packageidReg=5625&amp;packageidChange=5624&amp;process=CustomerGuide" class="button red full gtm-click" title="Join Now" tabindex="0">Join Now</a>
        </div>
    </div>