Locating an individual element using Selenide (Selenium) and the cssSelector method

If you have a structure of elements similar to the one shown in the image, it is possible to extract each static property using:

$$('#static-information .value').get(0)

or

$$('.static-property .value').get(0)

However, as each static property has a unique .key within that div, it may be possible to utilize that key to target specific elements and create a more generic selector that is less prone to errors if the order changes (eliminating the need for get(0), get(1) etc.).

For example:

investorFullName = $$('#static-information .key="Name" .value')

Or something like td[class='key'][value='Name']

Answer №1

To locate the static property based on its key, it is necessary to utilize xpath as CSS selector does not support locating elements by their text content.

findPropertyByKey(key) {
   return element(by.xpath('//div[@class="key"][text()="' + key + '"]/..'));
}

readPropertyValueByKey(key) {
   return findPropertyByKey(key).element(by.css('.value')).getText();
}

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

Can you direct me to the location where I can access the implementation of Selenium Interfaces?

I have a question regarding the implementation of Selenium Interfaces. Specifically, I am wondering where I can locate the specific implementation details for interfaces such as WebElement and Alert. For instance, WebElement contains a click() method but I ...

Implementing dynamic CSS in AngularJS using conditional statements

One technique I've been using in angularjs involves toggling between two windows using the ng-click and ng-show directives: <div ng-init="showTab2 = false"> <a ng-click="showTab2 = true; showTab1 = false ">#Tab1 </a> ...

Why won't my browser properly center my CSS navigation menu?

After experimenting with different CSS properties like margin-right: auto and margin-left:auto, I found that using display: inline-block works well for centering actual links, but it causes issues with the menu when added as a parent element. I suspect th ...

The feature of Switch css does not appear to function properly when used in conjunction with input type

Why does the switch button not work with the input type radio but works with a checkbox button? How can I maintain the radio input and solve this issue? @charset "utf-8"; /* CSS Document */ /* ---------- GENERAL ---------- */ body { background: #4a4a4 ...

Is there a way to ensure a web driver can detect an element even when the page is continuously refreshing?

I am facing an issue while running a script on a webpage that contains a list of links to news articles. The problem arises when the script clicks on the link and waits for the "h1" element to load before checking its text for specific keywords. However, o ...

The vertical tab layout in HTML and CSS is experiencing an issue where the active tab is not being shown above the

Currently, I am developing a web page featuring vertical tabs where each tab corresponds to an image and some content. However, the problem lies in the fact that the active tab is not displaying above the image as expected. In my attempt to resolve this i ...

Hide the element once the CSS animation has finished

I have successfully implemented an animation using pure CSS that starts on load. However, I am facing an issue with both opacity and visibility as the div continues to take up space even when hidden. Question Is there a way to make the div disappear comp ...

Folder containing the test results of a TestNG test

Does anyone have a solution for automatically refreshing the project to get the test-output file when running TestNG tests? I want to avoid having to manually refresh each time. Any suggestions would be greatly appreciated. Thank you! - gptester ...

Guide to executing a dropdown function in BMC Project using WebDriver

Having trouble automating the dropdown function in my BMC project. I've tried multiple options but can't seem to get it to work. Any assistance would be greatly appreciated. <div id="WIN_0_913111809" class="df arfid913111809 ardbnCustomer C ...

Conceal navigation button within react-material-ui-carousel

After successfully incorporating the React Material UI carousel, I found it to be quite simple. However, one thing that eluded me was how to hide the buttons and only display them on hover. I tried setting the props navButtonsAlwaysVisible to false, but it ...

What could be causing this template literal to display each column on its own row instead of in a

Incorporating Bootstrap 4 on the front end and utilizing a straightforward template literal for string passing. My concern lies in the fact that the columns are being outputted into separate rows, a behavior I find perplexing. c ...

Stop all animations in JS and CSS

Looking for a way to halt all CSS and JavaScript animations, including canvas and webGL effects, on a specific webpage. Some animations can cause slow performance on certain browsers like Opera and Firefox, so I'm seeking a code snippet or guidance o ...

Expanding Anchors to Fit Content with FontAwesome Icons

I am attempting to include two clickable icons on the right side of a list item, but the anchors containing the icons seem to be expanding too wide without any padding or margins, causing their clickable zones to overlap. Could this be an issue with the f ...

``Inconvenience of Extensive URLs Being Displayed in Tables

I've been struggling to find a solution for the problem I'm facing with Chrome when it comes to wrapping long URLs in a table cell. Despite trying various solutions found online, including using the CSS code word-wrap: break-word;, I have not bee ...

I'm receiving a NoSuchElementException error. Can you assist me in pinpointing the error in the xpath syntax?

I'm having trouble identifying the issue with my xpath element locator Attempting to log in using an automated testing tool like Selenium webdriver driver.findElement(By.className("btn-primary")).click(); driver.manage().timeouts().implicitlyWai ...

Restoring text boxes to their original styling

I've been working on a jQuery script that scans through form input elements and turns their border color to red if they are empty. When the submit button is pressed, it reassesses the elements; this time I'm trying to revert the textbox back to i ...

HTML5 Slideshow with Smooth Image Transitions

So, I have created an HTML5 image slideshow and it's working perfectly on my localhost. However, I am puzzled as to why there is no transition effect within the slideshow. I was expecting something like fading out the first picture and then having the ...

Modifying element size using jQuery causes issues with maintaining a 100% height

I am facing an issue with a sidebar that is styled using the following css properties: background:#164272; position:absolute; left:0px; top:70px; width:250px; height:100%; When I use jQuery to display a table that is initially hidden and on ...

How to achieve vertical centering of an image in an li element with fixed dimensions while maintaining 100%

I need help with vertically centering an image within a fixed width and height list item. Here's the HTML I'm working with: <ul class="list"> <li class="list-item"> <div> <img src="http://lorempixel.c ...

The HTML code starts with a fluid middle column in a 3-column layout, while the other two columns have fixed widths

I am interested in creating a traditional 3-column layout similar to this: | | | | |L | M |R | | | | | I have been tasked with using the following html structure: as depicted, the Main div is the initial node of #container <body> ...