logo标签列表

无法点击元素 - Selenium WebDriver

javacssseleniumselenium-webdriverxpath
3
我正在尝试点击一个结账按钮。它长这样：enter image description here。
以下是相同按钮的HTML片段：
<div id="buy-button-next">
   <span data-reactroot="">
      <div data-cid="buy-button--enabled" style="align-items: center; border-style: solid; border-width: 0px; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; margin: 0px; padding: 0px; position: relative; min-height: 0px; min-width: 0px;">
         <div style="align-items: stretch; border-style: solid; border-width: 0px; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; margin: 0px; padding: 0px; position: relative; min-height: 0px; min-width: 340px;">
            <button data-cid="button.buy_button" style="padding: 0px; margin: 0px; background-color: rgba(255, 255, 255, 0); border: none; cursor: pointer; outline: 0px; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);">
               <div style="align-items: stretch; border-style: solid; border-width: 1px; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; margin: 0px; padding: 4px; position: relative; min-height: 0px; min-width: 0px; background-color: rgb(52, 52, 52); border-color: rgba(255, 255, 255, 0); border-radius: 3px; height: 50px; transition: background-color 0.2s ease, border-color 0.2s ease;">
                  <div style="align-items: stretch; border-style: solid; border-width: 0px; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; margin: 0px; padding: 0px; position: absolute; min-height: 0px; min-width: 0px; background-color: rgba(255, 255, 255, 0); border-radius: 3px; bottom: -1px; left: -1px; opacity: 1; right: -1px; top: -1px; transition: background-color 0.2s ease, opacity 0.2s ease; z-index: 1;"></div>
                  <div style="align-items: center; border-style: solid; border-width: 0px; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; margin: 0px; padding: 0px 21px; position: relative; min-height: 0px; min-width: 0px; background-color: rgba(255, 255, 255, 0); border-radius: 3px; height: 100%; justify-content: center; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; z-index: 2;">
                     <div style="align-items: stretch; border-style: solid; border-width: 0px; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; margin: 0px; padding: 0px; position: absolute; min-height: 0px; min-width: 0px; align-self: center; top: 50%; transform: translateY(-2px);"></div>
                     <span style="max-width: 100%; color: rgb(255, 255, 255); font-family: &quot;Klarna Sans&quot;, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 16px; opacity: 1; transition: color 0.2s ease; visibility: visible; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; text-size-adjust: none;">Place Order</span>
                  </div>
               </div>
            </button>
         </div>
         <div style="align-items: stretch; border-style: solid; border-width: 0px; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; min-height: 0px; min-width: 0px; background-color: rgba(255, 255, 255, 0); width: 100%; height: 30px;"></div>
      </div>
   </span>
</div>

所有内容都在iFrame中加载，因此我也在iFrame中进行切换。

driver.switchTo().frame("klarna-checkout-iframe");

但是按钮的HTML代码有些奇怪。
我进行了代码尝试：
css=button[data-cid='button.buy_button'] span

xpath=//div/span[contains(text(),'Place Order')]

在等待此元素出现时，我遇到了超时异常。

等待35秒后仍未找到以下定位方式所指向的元素： By.cssSelector: button[data-cid='button.buy_button'] span

分享一下你得到的帧切换代码和异常。 - Ashok kumar Ganesan
@AshokkumarGanesan，请更新问题，请检查。 - NarendraR
2
确保按钮位于iframe内，并且没有其他嵌套的iframe。 - Guy
3个回答
2
根据您分享的HTML和代码试验，首先您需要引入WebDriverwait来等待frameToBeAvailableAndSwitchToIt，然后可能会在结账按钮上调用click()，因此您需要引入WebDriverWait等待所需的可点击元素，您可以使用以下任一解决方案：
new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.id("klarna-checkout-iframe")));
//new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.name("klarna-checkout-iframe")));
new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[@id='buy-button-next']//button[@data-cid='button.buy_button']//span[contains(.,'Place Order')]"))).click();
0

你可以尝试一下

css = button[data-cid='button.buy_button']>div>div>span

在点击之前，您还可以验证文本“下单”然后再进行点击。

希望这可以帮助到您！

你能试试 #buy-button-next span div div button 吗？ - Karthikeyan R
0

切换到 iframe 后，您可以使用以下 xpath 来识别元素

Xpath：

//div[@id='buy-button-next']//button//span[contains(text(),'Place Order')]
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接