无法单击元素-Selenium WebDriver

Question

我正在尝试点击“结帐”按钮。看起来像这样：

和相同的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']跨度

Answer 1

根据您共享的 HTML 和代码试用版，首先必须为 frameToBeAvailableAndSwitchToIt 引入 WebDriverwait ，然后可能继续前进您将在结帐按钮上调用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();

Answer 2

您可以尝试

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

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

希望这会有所帮助！

Answer 3

切换到iframe后，您可以使用下面的xpath标识元素

Xpath：

//div[@id='buy-button-next']//button//span[contains(text(),'Place Order')]