java - 无法点击元素 - 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')]

我在等待此元素出现时收到超时异常。

Timed out after 35 seconds waiting for presence of element located by: By.cssSelector: button[data-cid='button.buy_button'] span

Answer 1

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