Unable to click on element - Selenium WebDriver

NarendraR :

I'm trying to click on a Checkout Button. This is how it looks like :

And HTML snippet for the same :

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

All content loads in an iFrame, So I'm switching in iFrame as well.

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

but the button have weird html.

Code trial I did:

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

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

I'm getting Timeout exception while waiting for presence of this element.

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

DebanjanB :

As per the HTML you have shared and your code trials, first you have to induce WebDriverwait for the frameToBeAvailableAndSwitchToIt and then moving forward possibly you are going to invoke click() on the Checkout Button, so you need to induce WebDriverWait for the desired element to be clickable and you can use either of the following solution:

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