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

NestJS: Specify the data type for @Body()

Consider the code snippet below: @Post() public async createPet(@Body() petDetails: PostPetDto): Promise<any> { } In this scenario, the type of @Bod() petDetails defaults to plain/any instead of the declared type of PostPetDto. What is the recommen ...

javascripttypescriptexpressnestjs

Attempting to navigate the world of AJAX and PHP

My experience with AJAX is limited, but I am currently working on a project that requires a form to submit data without refreshing the page. The goal is to display the result in a modal window instead. To achieve this functionality, I understand that imple ...

javascriptphphtmlajax

Clicking elements reveal but page height remains unchanged?

Clicking on a label within #row-product_id_page-0-0 triggers the display of #row- elements as shown in the code snippet below: $('#row-product_id_page-0-0 label').click(function() { var str = $(this).find('.am-product-title').text ...

javascriptjqueryhtmlcss

Hide HTML div on click

Why does the button disappear when I click on it, but the status refreshes? Javascript $( ".refreshstatus" ).click(function(){ $( ".navplayers" ).load('stats.php'); }); CSS .refreshstatus{ font-family:'Noto Sans'; font-w ...

javascriptjqueryhtmlcss

What is the best way to reset the column filter cell in Material-Table?

Within my Material-Table, I am utilizing this unique TextField to craft a specialized filter cell for each column. My goal is to employ the endAdornment as a button that will reset the filter, but I am struggling with removing the current value. filterCom ...

javascriptmaterial-uimaterial-table

Disregard the instructions upon loading the page

I've implemented a directive to automatically focus on the newest input field added to my page. It works well, but there is one issue - when the page loads, the last input is selected by default. I want to exclude this behavior during page load and in ...

javascripthtmlangularjs

What are some possible reasons or solutions for Axios sending a 404 error?

Hi there, I'm completely new to the MERN stack and I'm encountering an issue when trying to post data using Axios and Express. I may have misunderstood something, so here's my problem. I have a form on a page that I am attempting to use to s ...

javascriptnode.jsexpressaxiosmern

Learn how to properly convert a string into a valid URL using the Next JS router when pushing pages

I'm dealing with a string that looks like this: /dashboard/products/:id. My goal is to utilize Next Js's router to navigate to that URL and replace the placeholder :id with an actual id. Here's the code I've written: {products.map(prod ...

javascriptreactjsurlnext.js

What is the best way to adjust the size of an image within a div element using HTML?

I've created a Carousel with 5 images to display. However, I'm having an issue where only the image is showing up, and I want the text and button to appear below it. Here's how the nature image is currently displaying: What I want is for th ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

React's Dynamic Table fails to rerender when updated values are placed in the same row and under the same header

Here is the table generated by my functional component: <table class="table"> {/* Consonant Table */} <tr> <th colSpan="2">---</th> {headersPOA. ...

javascriptreactjsdynamichtml-tablerender

Step-by-step guide for setting up CodeMirror

I'm feeling a bit lost with what to do next: <link rel="stylesheet" href="lib/codemirror.css"> <script src="lib/codemirror.js"></script> <script> var editor = CodeMirror.fromTextArea(myTextarea, { mode: "text/html" }); ...

javascripthtmlcodemirror

Utilize Selenium Python to execute actions by right-clicking on elements

I attempted to execute a right-click action using Selenium, but unfortunately it didn't work as expected. While I can successfully trigger the right-click event, the desired action does not take place. Any assistance on this matter would be greatly ap ...

pythonpython-3.xseleniumselenium-webdriverweb-scraping

Encountering issues with Jest Setup in Next.js as it appears to unexpectedly include a React import in index.test.js

Hey there, I've been pondering over this issue for the past few days. It appears to be a common error with multiple solutions. I'm facing the dreaded: Jest encountered an unexpected token /__tests__/index.test.js:16 import React from "r ...

javascriptreactjsjestjsnext.js

appending a set of parameters to a website address

I am currently developing an app in a Node/Express/Jade environment. Imagine that I launch my app and navigate my browser to the following URL: /superadmin/?year=2012 Upon reaching this page, I encounter a list of objects sorted in a default order. Ther ...

javascriptnode.jsexpress

Creating collapsible tables with hook functionality in Material-UI

Having trouble resolving this issue, I am seeking assistance with my handleClick() function which is supposed to collapse and expand all table rows simultaneously. The code snippet demonstrating the issue can be found here. Can anyone explain why it is not ...

javascriptreactjsmaterial-ui

Why isn't my state being updated properly with React's useEffect, useState, setInterval, and setTimeout functions?

const handleClick = () => { if (!activated) { if (inputValue == '') { return } if (!isNodeInGraph(graph, inputValue)) { return } } setActiv ...

javascriptreactjs

Remove buttons from carousel elements in React Multi-Carousel

Is there a way to hide the arrows in the react-multi-carousel component? https://i.stack.imgur.com/V1nix.png ...

javascriptreactjsnext.jsreact-multi-carousel

The React component is being rendered repeatedly

I am new to React and decided to implement some functionalities to enhance my understanding of the framework. Currently, I am working on a search feature that displays results in a table format. Each row in the table has a delete option, which triggers a p ...

javascriptreactjsreact-hooks

How can I verify in Javascript that a string contains at least one set of letters and numbers using regex?

I am currently trying to decipher the appropriate regex for identifying a pattern similar to 2d1h30m10s, accepting any valid variation such as 1h, 1h30m, 30m, 10s, or any combination of these. Could regex be the right solution in this scenario? I have bee ...

javascriptregex

The ajax success() function is failing to function properly when attempting to make a call

The button's onClick() event is not navigating anywhere. There seems to be an issue with the success() function of the ajax call. Unfortunately, I am new to this and unable to pinpoint the problem. var currentAuthor=""; var currentQuote=""; $(documen ...

javascriptjqueryajax