What is the proper way to select this checkbox using Capybara in Ruby?

Is there a way to successfully check this checkbox?view image description

I attempted the following:

  within('div[id="modalPersistEtapa"]') do

                 element = @driver.find_element(:xpath, '//*[@id="2018_4"]/i')
                 @driver.execute_script("arguments[0].click();"

Unfortunately, it did not work! =(

This is the error I encountered:

  element click intercepted: Element <i class="i i-logout"></i> is not clickable at point (1878, 56). Other element would receive the click: <div class="modal fade bs-example-modal-lg in" id="modalPersistEtapa" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false" style="display: block;">...</div>
    (Session info: chrome=87.0.4280.88) (Selenium::WebDriver::Error::ElementClickInterceptedError)
  Backtrace:
    Ordinal0 [0x012DC0C3+3326147]

...

javascriptrubyseleniumcapybara

Answer №1

Avoid relying on direct driver calls or execute_script to simulate clicking actions - if you find yourself resorting to these methods, there may be a fundamental issue in your approach.

when('div[id="modalPersistEtapa"]') do
  find(:xpath, './/*[@id="2018_4"]/i').click();
  ...
end

In general, using CSS selectors is preferable over XPath for such tasks, but in cases where an id starts with a number, XPath could be more suitable. It's important to include the ".//" at the beginning of the XPath expression to ensure that the within block operates within the specified scope.

If this approach doesn't yield results, attempting alternative methods will only compromise the integrity of your tests.

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

Access denied for generating login hint on target domain in javascript web application for Google sign-in

Utilizing the Google signin Javascript API with the gapi-signin-button on a webapp. The app is being served by a gulp server, binding to 0.0.0.0. Everything works fine during local development, but encountering issues when accessing the page through a publ ...

javascriptauthenticationgoogle-signin

Using AngularJS client and Flask server for a RESTful call, one can include the

I am currently facing an issue where I need to send a REST request from my AngularJs client to a Flask server. The problem arises when one of the ids (key) in the request contains a forward slash. Interestingly, if the key does not contain a slash, the re ...

javascriptpythonangularjsrestflask

Upon loading, the IntersectionObserver immediately declares the isIntersecting property true for all elements

Yesterday, when I executed this code, everything functioned as expected. The observer successfully loaded the images once they intersected the viewport: <template> <div id="gallery" class="gallery"> <div class=" ...

javascriptvue.jsvuejs3

Guide to switching from test mode to live mode and enabling live mode in stripe with nodejs

I have encountered an issue with the stripe form I am currently using for payments. When the form is loading, it displays "test mode" in the top right corner. I am unsure how to switch it to live mode and cannot find any option on the stripe dashboard to d ...

javascriptnode.jstestingstripe-payments

Issues encountered with invoking function in CodeIgniter controller through Ajax

Running a codeigniter website with an add to cart functionality. When the user clicks the add to cart button, the product is successfully added to the cart after the page reloads. The controller code for this feature is as follows: public function buy($ ...

javascriptphpjqueryajaxcodeigniter

Suggestions for managing AngularJS within ASP.NET Web Forms?

Recently, I integrated AngularJs into a website that is built with asp.net webforms. I discovered that when using ng-Submit on a button, the form also triggers a Post call. How can I prevent the form from automatically submitting so that Angular can perf ...

c#javascriptjqueryasp.netangularjs

Creating a complex array structure using checkbox inputs within an Angular application

In my Angular application, I have a list of checkboxes that are dynamically generated using nested ng-repeat: <div ng-repeat="type in boundaryPartners"> <div class="row" ng-show="showBPtype[$index]"> <div class="col-xs-12"> ...

javascriptarraysangularjs

Error in Typescript: Function expects two different types as parameters, but one of the types does not have the specified property

There's a function in my code that accepts two types as parameters. handleDragging(e: CustomEvent<SelectionHandleDragEventType | GridHandleDragEventType>) { e.stopPropagation(); const newValue = this.computeValuesFromPosition(e.detail.x ...

javascripttypescript

Include an additional icon without replacing the existing one on the mouse cursor

I am looking for a way to enhance the user experience by adding an icon that appears when hovering over an HTML element, serving as a subtle hint that the user can right-click. Instead of replacing the default cursor, which varies across platforms and doe ...

javascripthtmlcss

The HTML element failed to be inserted

Currently, I am involved in a project based on .NET Core for my organization. This project entails loading work orders from our SQL database using Entity Framework and then filtering them to display as markers on a map via the Google Maps API for our insta ...

javascripthtmljquery.net-core

Obtain the unique identifier of the chosen option using material-ui's autocomplete feature

I am currently implementing the autocomplete feature using material-ui. The data in the "customerList" displayed in the search field works fine. However, I am facing an issue with retrieving the "ID" number of the selected data. My goal is to obtain the ID ...

javascriptreactjsautocompletematerial-ui

Properly maintaining child processes created with child_process.spawn() in node.js

Check out this example code: #!/usr/bin/env node "use strict"; var child_process = require('child_process'); var x = child_process.spawn('sleep', [100],); throw new Error("failure"); This code spawns a child process and immediately ...

javascriptnode.js

Dynamic route fails to return value for ID search

Currently, I am testing by creating an array of users containing their respective IDs and names. There is also a button that triggers an onclick function to add the element's ID to the page's URL in order to establish a dynamic route. However, wh ...

javascriptnext.js

What is the best way to access form data in React using a React.FormEvent<HTMLFormElement>?

I am looking for a way to retrieve the values entered in a <form> element when a user submits the form. I want to avoid using an onChange listener and storing the values in the state. Is there a different approach I can take? login.tsx ... interfa ...

javascriptreactjsformstypescript

Achieving consistent text alignment in HTML and CSS without relying on tables

As I delve into the world of HTML and CSS, I've taken a traditional approach by crafting a login page complete with three input controls (two text inputs and one button). To ensure proper alignment of these elements, I initially turned to the trusty & ...

javascripthtmlcssuser-interface

Storing property data outside of the render method in ReactJS is key for efficient

I have encountered an issue while attempting to map data outside of the render method in my function and return it within the render. The mapping error is causing confusion as I am uncertain about its underlying cause. Below is the function responsible fo ...

javascriptjsonreactjsecmascript-6redux

Exploring the World with AngularJS and Google Maps API through ngGeolocation

Having some difficulty displaying my geolocation on Google Maps API using a marker. I am utilizing the ng controller ngGeolocation and the http://angular-ui.github.io/angular-google-maps/ Previously, I hardcoded the marker and map location without any is ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3geolocation

Improving Image Performance in React.js

Seeking advice on the optimal performance of various image formats (such as SVG, PNG, JPEG) when displayed in a user interface. Which type is most efficient to render and what are the best practices for implementation to minimize loading times? ...

javascriptreactjsperformance

Database connection error: Authentication protocol requested by server not supported

I have been struggling with the issue outlined in this link: MySQL 8.0 - Client does not support authentication protocol requested by server; consider upgrading MySQL client Even though I have tried following the recommendations, I am still encountering e ...

javascriptmysqlsqlnode.jsexpress

The AJAX response is not functioning as expected

I've encountered an issue with my AJAX code for an online food store. Every time I run it, a pop-up message saying something went wrong appears instead of the expected output. I suspect there might be an error in either the connection handlers or the ...

javascriptphpajax