Step-by-step guide to creating an Xpath for a webelement with JavascriptExecutor in Selenium

Attempting to create an automated test using Selenium WebDriver. I have a WebElement on the page with a CSS locator:

@FindBy (css = "#FeedbackMessage")
protected WebElement fm;

I also have a method that successfully focuses out of this element:

public void focusout(){
JavascriptExecutor js = (JavascriptExecutor) driver;

js.executeScript("arguments[0].blur();", fm);

Now, I am trying to achieve the same result but with an XPath locator. The element's XPath is 

//textarea[@id='FeedbackMessage']
.

Simply changing the locator to 

@FindBy (xpath = "//textarea[@id='FeedbackMessage']")
protected WebElement fm;

does not work as expected.

javascriptseleniumxpath

Answer №1

After some careful debugging in IDEA, I managed to uncover a solution.

@FindBy (xpath = "//textarea[@id='FeedbackMessage'][1]")
protected WebElement fm;

I discovered that the xpath locator //textarea[@id='FeedbackMessage'] returns a list of elements, even if only one element is present. However, using CSS or ID selector always selects the first found element.

All I needed to do was specify the index of the desired element.

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

Images in CSS not copied to the output directory when using Webpack

Using Webpack to bundle various javascript and css files on a website includes bundling bootstrap.css and chosen.css as part of the bundles. To achieve this, there is a main.js file serving as an entry point for importing all necessary files. The process i ...

javascriptcsswebpack

Dynamic table generation in Next.js based on specific conditions

I have a table of values with varying locations. My goal is to filter the rows in the database based on the location value provided. Here's the code snippet: 'use client'; import { useState, useEffect } from 'react'; import { io } ...

javascriptreactjsnext.jsnextjs-dynamic-routing

"Exploring the powerful combination of React.js with DataGrid

I'm in search of a datagrid solution for my React.js project. I've tried out a few options, but haven't found exactly what I'm looking for. The datagrid needs to look good on smaller screens, like mobile phones. It's important tha ...

javascriptjquerytwitter-bootstrap-3reactjsreact-bootstrap

"Bringing the power of JavaScript to your WordPress

I have set up a wordpress page and integrated some JavaScript into it. When working in wordpress, there are two tabs on a page where you can input text - 'Visual' and 'Text'. The 'Text' tab is used for adding HTML and scripts ...

javascripthtmlwordpress

Using Selenium and Java to manipulate dynamic web elements

Looking to use Selenium for interacting with an element on a website that dynamically changes content based on user behavior. The element in question always contains exactly one HTML element. In its default state, the element appears as follows: https:// ...

javaseleniumweb-applicationsautomated-tests

How to reference a nested closure function in Javascript without relying on the 'this' keyword

I'm facing a situation where I have a tree of closures: 'A' contains private closures 'pancake' and 'B'. There are times when I need to call the private closure 'pancake' from inside 'B' and access its ...

javascript

Is it possible to invoke the unnamed function in jQuery using the .call() method?

Imagine I have a button with the ID #click, And let's say I attach the click event like this: $('#click').click(function(){ alert('own you'+'whatever'+$(this).attr('href')); }); However, I wish to change w ...

javascriptjqueryfunction

Strategies for increasing a value within an asynchronous function

I'm facing an issue with incrementing the variable loopVal inside a promise. I've tried to increment it without success. Any ideas on how to make this work? const hi = function(delay) { let loopVal = 1; return new Promise((resolve, reject) ...

javascriptasynchronousasync-awaitpromiseresolve

What is the best method for combining two observables into one?

My goal is to initialize a list with 12 users using the URL ${this.url}/users?offset=${offset}&limit=12. As users scroll, the offset should increase by 8. I plan to implement infinite scrolling for this purpose. However, I am facing an issue with appen ...

javascriptangulartypescriptionic-frameworkobservable

Vue.js methods bound as properties on a parent object

There are times when I come across scenarios where it would be convenient to bind methods as an object property rather than a direct Vue method. For instance, instead of: <MyInput :formatter="currencyFormat" :parser="currencyParser& ...

javascriptvue.js

How can we control the timing of elements displaying on a web page in Javascript?

I've been attempting to implement a scrolling feature on my webpage using JavaScript, but whenever I run it, the content appears all at once instead of scrolling. The $("#Menu").html('') function doesn't seem to clear the screen properl ...

javascriptjquerysettimeout

Maintain scrolling at the bottom with React.js

Is there a way to make a div element increase in height through an animation without extending beyond the viewable area, causing the window to automatically scroll down as the div expands? I am looking for a solution that will keep the scroll position lock ...

javascriptcssreactjs

Tips for showcasing an array in nested elements within an Angular mat-tree

I'm new to Angular and I need help displaying an array's values within the child elements of a material tree. Specifically, I want to show the names of fruits (such as Apple, Banana...) in the child elements. The colors and discounts from the ar ...

javascriptjsonangularangular-material

Discovering void or absence when extracting information from a website using Selenium in Python

I am trying to retrieve the website's activity and uptime data, but I'm only able to get the activity status and not the uptime information. I have targeted the exact class of the website, but it shows null. Can someone please assist me in modify ...

pythonseleniumbeautifulsouppython-requests

Several SVG Components failing to function properly or displaying differently than anticipated

I've encountered a puzzling issue that I just can't seem to solve. Here's the scenario: I'm working on a NextJS App and have 5 different SVGs. To utilize them, I created individual Icon components for each: import React from 'reac ...

javascriptreactjssvgnext.jsfrontend

What is the best way to include query parameters in a redirect using the res.redirect function in node.js/express.js?

Trying to navigate users to a Google Authorization page within my application poses a challenge. In this scenario, utilizing any Google API modules is not an option. To achieve the redirection, I am aware that I can structure my res.redirect() function in ...

javascriptnode.jsexpress

What is the best way to sort through an array of objects in React based on a particular dynamic property?

Using an API call, I am receiving data in the following format: 0: {team: {…}, league: {…}, games: {…}, substitutes: {…}, shots: {…}, …} 1: {team: {…}, league: {…}, games: {…}, substitutes: {…}, shots: {…}, …} 2: {team: {…}, leagu ...

javascriptarraysreactjsobjectfilter

Steps for adjusting the port number in a Vue.js CLI project

Is it possible to modify the Port number within a Vue-CLI project in order for it to operate on a different port other than 8080? ...

javascriptnode.jsvue.jsvuejs2vue-cli

Error: The term "OrbitControls" is not recognized in the three

When attempting to import OrbitControls.js, I encounter the following issue: The error message Cannot use import statement outside a module is displayed. To resolve this, I add: <script type="module" src="OrbitControls.js">< ...

javascriptthree.js

Recommendations for Configuring VPS for Angular2 and .Net Application

My team and I are currently in the process of developing an application that combines Angular2 for the front-end and Web API ASP.NET for the back-end. We are currently at the stage of configuring a VPS for this application but unfortunately, we lack the ...

javascriptasp.net-mvcangularconfigurationvps