Best practices for selecting a checkbox with Selenium in JavaScript and Xpath

I'm currently facing a challenge in targeting a checkbox to agree to the terms and conditions. Unfortunately, there is no name or id that I can use for targeting. I have been attempting to use innerHTML and innerText in Selenium with JavaScript on Chrome, but all my efforts are leading to errors.

Here's the snippet of code I tried:

await driver.findElement(By.xpath("//*innerText[text()=’I am at least 18 years of age and agree to the Official Rules.’]")).click();

And here is the error message I encountered:

let err = new ctor(data.message)
              ^

InvalidSelectorError: invalid selector: Unable to locate an element with the xpath expression //innerText[text()='I am at least 18 years of age and agree to the Official 
Rules.'] because of the following error:
SyntaxError: Failed to execute 'evaluate' on 'Document': The string '//innerText[text()='I am at least 18 years of age and agree to the Official Rules.']' is not a valid 
XPath expression.

Could someone please help me figure out how to target this elusive checkbox?

Image of the checkbox:

Detailed properties of the checkbox:

javascriptselenium-webdriverxpathselenium-chromedriverwebdriver

Answer №1

Make sure to use the <label> tag for the desired effect.

Solution

If you want to interact with a that corresponds to the text "I am at least 18 years of age and agree to the Official Rules", try this locator strategy:

await driver.findElement(By.xpath("//label[@for='opt_rules']")).click();

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

Webpack is ejected from watch mode

Currently, I am in the process of learning React and have decided to use webpack alongside it. However, I seem to be facing an issue with webpack when it comes to the watch mode. It builds the files once but then halts. The console output reflects the foll ...

javascriptreactjswebpack

Discover a method to conceal an element within a <div> by monitoring mouseover events in a separate <div> container

<div id="one-id"> <div id="some">Information</div> <div id="control"> <div id="value-1"> <img id="image-one-id" /> <img id="image-two-id" /> ...

javascriptprototype

There appears to be no data available from the Apollo Query

I'm facing an issue with the returned data from Apollo Query, which is showing as undefined. In my code snippet in Next.js, I have a component called Image with the src value set to launch.ships[0].image. However, when running the code, I encounter a ...

javascriptreactjsgraphqlnext.jsapollo

The three.js plugin is not loading in tern.js

Issue I am currently in the process of developing a 3D web application using three.js. For my development environment, I have opted to use neovim and YouCompleteMe for code completion. To enable JavaScript completion, I have installed tern and created a ...

javascriptthree.jsneovimyoucompletemetern

Ending an Unsuccessful Selenium WebDriver Session in Python

Within my Python script, the following code snippet is executed: driver = webdriver.Chrome(CHROMEDRIVER_PATH, chrome_options = chrome_options) This particular line of code has the potential to either succeed or fail based on seemingly random conditions ( ...

pythonseleniumselenium-chromedriverspawn

Tips for updating the DOM within a map function by utilizing the onChange event with a checkbox and react hooks

Initially, I imported a basic "database" object from another file that contains an array of students. I then used map to iterate through the student array and display all the students on the window object. Everything was working fine until I attempted to ...

javascriptreactjsreact-hooks

Dynamic sliding box jumps instead of simply fading in/out

My app features both a navigation bar and a sub-navigation bar. Within the sub-navigation bar, users can click on a button that triggers the appearance of another sub-bar while hiding the original one. The new sub-bar should smoothly slide out from behind ...

javascripthtmlcssangularjsangularjs-animation

Error occurs when attempting to filter data through input text pasting in Angular

Currently, I am working on a web application that utilizes the Angular framework and angularfire2. The issue I am encountering is related to the data filter functionality not functioning correctly when pasting copied text. Interestingly, it works perfectly ...

javascriptangularangularfire2

Vue-Select Runs into Issue Generating Choices from an Array

As a novice in the world of Vue and Nuxt JS, I am currently immersed in learning and developing a simple web application with Nuxt JS. One specific challenge I am facing is creating a Vue Select option where I pass an array and have the options represent t ...

javascriptvue.jsvuejs2nuxt.jsvue-select

What is the best way to change the background color for my photo gallery?

I'm currently working on a project to create a unique photo gallery where each image has a different colored background. I have six images in total, but right now all of them have a pink background. I've attempted adding another .popup class in t ...

javascripthtmlcss

Validating emails using React.js and HTML5

In my React component, I have an email input field: <input type="email" autoComplete="email" placeholder="Email" required value={this.state.formDa ...

javascripthtmlvalidationreactjs

Encountering an issue while attempting to retrieve data from an API with JSON and AJAX

I've been attempting to retrieve data from an API using AJAX and JSON, but I keep encountering this error message: ReferenceError: Can't find variable: $ Global code Here is the HTML code that was utilized: <!DOCTYPE html PUBLIC "-//W3C/ ...

javascriptjqueryajaxjson

Tips for sending a JSON object from a PHP file to a JavaScript variable

Forgive me if this has already been discussed in a previous post, I have not been able to find the answer. My PHP page generates an array in JSON format: [{ "chemical":"Corrosion_Inhibitor", "TargetDose":81, "AppliedDose":26, "ppbbl":"$0.97" ...

javascriptphpjson

Seamlessly transition between various states within a React component for a fluid user experience

I'm currently working on a simple component structured like this: var component = React.createClass({ render: function(){ if (this.props.isCollapsed){ return this.renderCollapsed(); } return this.renderActive() }, ren ...

javascriptcssreactjscss-transitions

Having trouble executing a Python test script on Sauce Labs

While attempting to run a python test script for a login page with saucelabs, I encountered an error. selenium.common.exceptions.WebDriverException: Message: failed serving request POST /wd/hub/session: Unauthorized After scouring the internet for a sol ...

pythonselenium-webdriver

Remove rows that have values within a specific range

I'm facing an issue in Google Sheets where I'm attempting to delete entire rows on the "Data" sheet if any value in column B matches values from the range D3:E20 in the "Backend" sheet. The code provided works when a word is hardcoded as the cond ...

javascriptgoogle-apps-scriptgoogle-sheets

The alteration of arrays within React.js

I've been working on this function: setNotActiveWalletsList = () => { const { GetAccounts } = this.props; let shallowCopyOfWalletsArray = [...GetAccounts]; const notActive = shallowCopyOfWalletsArray.filter(user => user.active != ...

javascriptreactjs

Struggling to find a solution to adjust an Angular directive

I am attempting to create a functionality where, upon clicking a button, the user can select one of two images displayed and make the selected image draggable. Currently, my code displays two images with only one being draggable. I am struggling to impleme ...

javascriptjqueryangularjsangularjs-directive

Tips for dynamically incorporating input forms within AngularJS

I am trying to dynamically change the form inputs using ng-bind-html. However, I am only able to display the label and not the text box on the DOM. The content inside ctrl.content will depend on the values received from the server. Important Note: The ...

javascripthtmlangularjshtml-sanitizing

A guide to generating nested Divs dynamically using jQuery

To accommodate the various languages in my application parameters, I am creating a translated input field for each one dynamically. The goal is to generate Divs, Labels, and Fields within a table cell. Here's an example of what I'm striving to ac ...

javascriptjquery