Having trouble interacting with element - Selenium WebDriver is not allowing the click

I'm attempting to select the Checkout Button. This is what it looks like :

https://i.stack.imgur.com/TiMEO.png

And here's the HTML snippet for it :

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

The content loads within an iFrame, so I am also switching into the iFrame.

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

However, there seems to be some unusual HTML code within the button.

The methods I tried:

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

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

I encountered a Timeout exception while waiting for the element to appear.

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

javacssseleniumselenium-webdriverxpath

Answer №1

After analyzing the HTML you provided and reviewing your code attempts, it appears that you need to implement WebDriverwait for the frameToBeAvailableAndSwitchToIt method before proceeding. You will then likely utilize the click() function on the Checkout Button, requiring another WebDriverWait for the desired element to be clickable. Below are solutions you can consider:

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

If you want to give it a shot, consider using the following CSS selector:

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

Before proceeding with the click, make sure the text 'Place Order' is present as well.

I trust this information proves useful!

Answer №3

When transitioning to an iframe, you have the option to utilize the following xpath in order to pinpoint the specific element

Xpath:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Compel the browser to launch a fresh tab

I'm currently working on an app that involves uploading files. One issue I'm facing is that the file system pop up doesn't close after the upload, causing a quarter of the screen to be covered while the test keeps running in the background. ...

javascriptangularjsseleniumautomationprotractor

Learn how to display two rows of div elements within a single div container

In my program, I am using a for loop to display multiple div elements in one row. The first div is showing up correctly, but I am having trouble inserting a new div that looks the same as the first one. How can I achieve this? Thank you in advance. "first ...

phphtmlcss

Designate the preferred location for requesting the desktop site

Is there a way to specify the location of the 'Request desktop site' option? Here is the code I am currently using: var detector = new MobileDetect(window.navigator.userAgent); if(detector.mobile() != null || detector.phone() != null || det ...

javascriptphphtmlcss

What is the best way to line up my columns when they are split between groups of three and two?

I am having trouble aligning my columns in the way I want. The image shows that some tables have 3 columns while others have 2, and I would like to align the blue with the blue and the red with the red as shown in the picture: https://i.stack.imgur.com/1bL ...

htmlcsshtml-table

What is the best way to switch between components when clicking on them? (The component displayed should update to the most recently clicked one

I am facing a challenge in rendering different components based on the navbar text that is clicked. Each onclick event should trigger the display of a specific component, replacing the current one. I have 5 elements with onclick events and would like to re ...

javascriptjquerycssreactjs

Locate and populate an input field with Selenium

I am having trouble creating a bot to automatically fill in the blank on a website. It doesn't seem to be working correctly, and I can't figure out what the issue is. from selenium import webdriver from selenium.webdriver.common.by import By impo ...

pythonselenium-webdriverfillautofillblank-line

Why is the Remote Webdriver important in connecting the Webdriver interface and the Chromedriver class?

Search Context serves as the primary interface in Selenium and is further extended by Web Driver interface. -The Remote WebDriver class implements all the abstract methods from both Search Context and Web Driver interfaces. -Browser-specific classes like ...

seleniumwebdriver

What is the best way to create square editor tabs in Eclipse without using swt-border-radius?

The design of Eclipse's rounded and/or swooshing tabs is starting to feel outdated in today's modern era. I thought that by adding the following line in my default.css file, I could get rid of the rounded corners: swt-corner-radius: 0px Howeve ...

javacsseclipseswteclipse-rcp

Using Selenium to modify the sorting of Google Maps reviews

I am encountering a fascinating issue with my **Web Scraping** project. My goal is to retrieve the latest **Google Maps reviews**. I specifically need to arrange the reviews based on their date of posting. Although most tutorials I've come across a ...

pythonseleniumweb-scrapingxpathwebdriverwait

Background and checked styles for radio buttons

Thank you in advance for any assistance you can provide. I am looking to create a unique radio button design. When the radio button is not checked, I want it to display as a simple white circle. However, once it is checked, I would like it to appear eithe ...

cssreactjsmaterial-ui

What is the best way to invert the positioning of the li elements to move upwards?

https://i.stack.imgur.com/mZaoS.png Seeking assistance on adjusting the height of bars to start from the bottom and go upwards instead of starting from the top position and going downwards. The JavaScript code below is used to generate the li elements and ...

javascripthtmlcss

Create a resizable textarea within a flexbox container that allows for scrolling

Hey there! I'm struggling with a Flexbox Container that has three children. The first child contains a textarea, but it's overflowing beyond its parent element. Additionally, I want to make the content within child 2 and 3 scrollable. I've ...

css

Error encountered: WebDriverBackedSelenium NullPointerException

I've recently started using selenium and I'm still in the process of exploring its capabilities. Currently, I am trying to test an ajax element on a website. When I click on this element, some text appears in a specific area on the page. I have s ...

selenium-webdriver

What is the method to display all items in a Vuetify Data Table rather than limiting it to 10 rows?

I have implemented a data table from Vuetify in my project: <v-data-table :ref="`sortableTable${index}`" class="items-table-container" :headers="headers" :items="category.items" hide-default-footer> ...

cssvue.jsvuetify.js

Are there alternative methods to retrieve the CSS properties of web elements more effectively than relying on selenium?

I have a situation in my code where I need to retrieve the CSS properties of a large number of web elements. Currently, I am using Selenium and the code looks like this: ... node = browser.find_element_by_xpath(xpath_to_node) return {k: node.v ...

pythonjquerycssseleniumautomated-tests

"Enhancing test automation in Selenium: A guide on sending multiple values to the same input

Is there a way to send multiple input values for the same input field in selenium using python? Currently, my code only sends a single value to the input field. I am looking to modify it to test and run for multiple values. from selenium import webdrive ...

pythonseleniumselenium-webdriver

Automated Menu Selection using Selenium

I'm currently facing a challenge in writing a Python script using Selenium to interact with a webpage. I am struggling to use the .click() method to select an expandable list on the page. Despite successfully logging in and navigating to the desired p ...

javascriptpythonselenium

Preserve the video's aspect ratio within a fixed height and width layout by utilizing CSS styling

I am currently in the process of developing a web application with a fixed height layout that does not utilize flexbox and is also limited by width constraints. My goal is to divide the screen in half both vertically and horizontally, around 50% for each ...

csshtmlvideoresponsive-design

Encountering the GDK_BACKEND error that does not correspond to the displays available on Debian

While attempting to execute a headless browser on a remote Debian server using Selenium, I encountered an issue. The server has Firefox 46.0.1 installed and I am using version 2.53.1 of Selenium. Every time I try to run a specific test, the following erro ...

javafirefoxselenium-webdriverdebianheadless-browser

Pop-up warning - endless search cycle

As a novice, my question might be a bit strange :) I want to test the Main Menu of the website "https://tvn24.pl/" I am searching for elements, adding them to a list, and then iterating through each one to open every discovered page - everything is worki ...

pythonseleniumfindclickpopupwindow