Why is my Webdriverio element seemingly unclickable at this point?

I am currently trying to select a checkbox button.

Here is the DOM code of the element:

<label><input type="checkbox" value="option-1">Option 1</label>

I have written a test using WebdriverIO and Mocha specifically for this scenario:

  it("Click on checkbox button", () => {
    browser.pause(5000);
    const clickByXpathSelector = $("//div[@id='checkboxes']//input[@value='option-1']");
    clickByXpathSelector.waitForDisplayed();
    clickByXpathSelector.scrollIntoView();
    clickByXpathSelector.click();
    expect(clickByXpathSelector.isExisting()).to.be.true;
    expect(clickByXpathSelector.isSelected()).to.be.false;
    expect(clickByXpathSelector.isDisplayed()).to.be.true;
    browser.pause(5000);
  });

The error message received is:

unknown error: Element <input type="checkbox" value="option-1"> is not clickable at point (432, 220). Other element would receive the click: <p>...</p>

The element is clearly visible and not inside an iframe. Any suggestions on how to proceed?

javascriptseleniumselenium-webdriverwebdriver-io

Answer №1

Initially, attempt using the Action class to interact with elements in webdriverio. Additionally, incorporate explicit waits into your code.

If that approach does not yield results, consider implementing the following snippet:

// This code segment enables clicking on an element through JavaScript
browser.addCommand("jsClick", function(this: ElementResult) {
  this.then((element) => {
    browser.execute("arguments[0].click();", element.value);
  });
});

The above code leverages addCommand for performing clicks, akin to how selenium utilizes JavaScriptExecutor.

To learn more about addCommand functionality, refer to the following source:

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

Implementing useEffect behavior on a button click: a step-by-step guide

I have a form that collects a phone number and then, upon clicking the button, it fetches data from an API using the phone number as a filter parameter. Additionally, I want the button to redirect the user to a dynamic link with their unique code retriev ...

javascriptreactjs

Step-by-step guide on concealing elements and subsequently displaying them upon clicking the containing DIV

It's a bit tricky to explain without visuals, so I suggest checking out the JSFiddle link provided. Essentially, when a specific div is clicked, it should expand to reveal some inputs and buttons. However, the issue I'm facing is that upon loadin ...

javascriptjqueryhtmlanimationjquery-animate

What is the best way to find the longest element with the same class name using jQuery?

How can I dynamically find elements with the same length of class names? var className = $('.floor-4').attr('class').split(' ')[1]; var classLength = $('.' + className).length; Here is the HTML code: <div id="d ...

javascriptjqueryhtmlcss

Adjust the height of a div based on the designated start and end coordinates

My goal is to create a single vertical line that starts at a defined point (using CSS) and ends at a point that I have not yet specified. The concept is for the line to remain sticky or increase in height as the user scrolls, until it reaches the end poin ...

javascriptjqueryhtmlcssscroll

Transform the Angular function into a factory and take advantage of caching

My query differs from others with a similar title. I am attempting to transform a function into a factory in order to share data across controllers, but unlike my other factories, this one is not functioning as expected. I have successfully implemented ot ...

javascriptangularjs

Tinted map polygons on Google Maps with an external map shade

Initially, to highlight my polygon in this case, I implemented the following code snippet: Highlight polygon and tint rest of map using Google Maps Below is the Angular code I utilized: var boundaries = []; // defining a large area var overlay ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3

A step-by-step guide on utilizing Selenium and Python to download multiple files from direct links stored in a pandas dataframe

Below is the pandas dataframe that I am working with. filename Direct url file1.pdf www.abc.com/file1.pdf, www.abc.com/file3.pdf file2.pdf www.abc.com/file2.pdf To directly download these files using Python and Selenium on Firefox browser, I have writ ...

pythonpandasselenium

Display or conceal a button in Angular 6 based on certain conditions

In my current project, I am facing a challenge where I need to disable a button while a task is running and then activate it once the task is complete. Specifically, I want a syncing icon to spin when the task status is 'In_progress' and then hid ...

javascriptangulartypescript

Issue with the react-native-autocomplete-input where the list does not close after selecting an option

After selecting an item from the list in my react-native-autocomplete-input, the list does not close. let Location = (props) => ( <View style={styles.formItem}> <Autocomplete data={props.autocompleteResults.predictions} de ...

javascriptcssreactjsreact-nativejsx

Accessing the Node API with a GET request should be the first step taken before proceeding with

In my front-end setup, I have implemented an interceptor that automatically adds an Authorization header if a JWT token exists. There are 2 APIs in play: one for authorization checks and the other for handling data requests (the focus of my work). My goa ...

javascriptnode.jsapiexpressjwt

Tips for concealing PhantomJS.exe during the execution of GhostDriver within Selenium

Recently, I've been developing an app to go through a list of URLs and extract the live source code using PhantomJS with Selenium.NET in order to keep it headless. While the process runs smoothly, I'm facing an issue where every time a thread in ...

c#seleniumphantomjs

Using Polymer 0.5 in real-world applications

While using some of the polymer 0.5 components in production, I noticed some deprecations related to deep and shadow dom being emitted in the console. This made me question if the 0.5 components are built on experimental APIs. Is there a possibility that t ...

javascriptpolymerpolymer-1.0

What is the best way to monitor and record the height of a div element in a React application?

Exploring the Height of a Div I am interested in monitoring the height of a div element so that I can dynamically adjust distances based on varying screen widths. The animation should respond to changes in screen width, such as when text stacks and the he ...

javascripthtmlcssreactjs

The WPF user interface becomes unresponsive when performing background tasks with selenium automation

In the WPF application, I have a button that functions as follows: private void Button_Click(object sender, RoutedEventArgs e) { loadingSpinner.Visibility = Visibility.Visible; DoSomeTask(); // Takes 3-4 seconds } The issue arises with the code ...

c#wpfseleniumselenium-webdriverselenium-chromedriver

Tips for adding values to an array using an arrow function

Can someone assist me with pushing even numbers into an array using an arrow function? I'm unsure of how to do this. Here's my code: var arrayEvenNumbers = []; var evenNumbers = (arrayEvenNumbers) => { for (i = 2; i <= 20; i++) { i ...

javascriptarraysfor-loopif-statementarrow-functions

Can Selenium close and reopen a browser to refresh the cache?

I've been experimenting with closing the browser and then reopening it without encountering any errors. I attempted to use driver.close() followed by webdriver.Chrome(executable_path=driver_path, options=option) to reopen it, but it resulted in a s ...

pythonseleniumselenium-webdriver

Is there a way to programmatically retrieve files from a pop-up window using Selenium in Python?

I'm currently working on automating the process of downloading files from a pop-up dialog using selenium-python. Specifically, I need to programmatically click 'ok'. I attempted to create a profile but am unsure how to integrate it with the ...

pythonseleniumfirefox

I've hit a roadblock while attempting to continue testing the search functionality using Python with Selenium

I am a new member on this forum, so please forgive any oversights in following the proper etiquette. Currently, I am still learning how to write automation scripts using Python in Selenium Webdriver. My current task involves writing a simple code that wil ...

python-3.xselenium-webdriver

Switching the focus of an input field using JavaScript

I am attempting to implement a button that will shift the focus of an input field. My approach involves using v-bind:autofocus and updating the values of box1 and box2. <input type="text" placeholder="box1" v-bind:autofocus="box1"> <input type= ...

javascriptvue.jsfocus

Retrieve the Array Object's Name in a JSON File

I am looking for city names like Salem and Madurai from the given JSON data { "status": "success", "DisplayList": [ { "AVINASHI": [ "gmail@com", "<a href="/cdn-cgi/l/email-protection" class= ...

javascriptjson