CSS selectors for first occurrence of class contained in another class - css-selectors

I want to access the first element with class=x contained in class y.
I have this as my selector '.x .y'
But this selects all elements with class y contained in class x. I just want the first. How can I do that with selectors?

Something like this should work:
.x .y:first-of-type{
/* Your CSS code here */
}

Related

how to use custom class names in WebDriverIO

how to find an element with custom class name in WebdriverIO
how to find element with this particular class name ng-repeat="document in documentsUploaded"
Short answer is: use CSS or xpath selectors https://webdriver.io/docs/selectors.html
ng-repeat is not a class, it's an element's attribute.
See also https://www.w3schools.com/cssref/css_selectors.asp and https://devhints.io/xpath
The answer for your question is following CSS selector:
tr[ng-repeat='document in documentsUploaded']

React JS element class names not rendering

Working on a pre existing React JS project and the className attribute does not render in the DOM what is defined.
For example - here is what code looks like in the project:
<div className={styles.intro_inner}></div>
Here is the output in the DOM:
I'm expecting the class name "intro_inner" to appear within the DOM.
Within JSX, the syntax attribute={variable} on a component means that the attribute will be set with the value of the given variable, not it's name. I would assume that your code has an object named styles which has an attribute named intro_inner whose value is some random mash of characters that you see output in the inspector.
If you want the class to be set as "intro_inner" then you need to set it as a string, not a variable. The syntax for that would be className="intro_inner".

Finding other elements like select, button within div having the same class name in selenium

I have multiple divs with the same class name. I was able to retrieve all the divs through the findelements code. But I have a select element within one of the div. I am trying to retrieve the select element within the div.
The HTML code is as below.
Selenium code I tried.
IList <IWebElement> elements = driver.FindElements(By.XPath("//div[#class='className']"));
foreach (IWebElement widget in elements)
if(widget.FindElement(By.TagName("select").Enabled)
----- Perform sone operations-----
The above code is not working. Can anyone suggest solution to identify the select element.
Doing
IWebElement element = driver.FindElement(By.XPath("//div[#class='className']//select"));
will directly get you to the select tag you want to interact with.
If it so happens that this returns more than 1 element, you can further narrow down your search by providing a class or any other attribute to the select tag on your xpath, like so:
IWebElement element = driver.FindElement(By.XPath("//div[#class='className']//select[contains(#X,'Y')]"));
Where:
X - can be any attribute of that element (id, name, class...)
Y - a substring value of X attribute
Take for example:
This page:
"//div//ul/li/a" will give you 57 matches;
"//div//ul[contains(#class,'sf-menu')]/li/a" will give you 3 matches;
"//div//ul[contains(#class,'sf-menu')]/li/a[contains(#title,'Dress')]" will give you 1 match;
Good luck!

How to find a group of elements in same Class not in the same Div in selenium webdriver

I am unaware of how to identify the elements in a same class however the div of each element differs
Get all the elements under tag with class as 'classname' but different 'div' s below:
List<WebElement> elements= driver.findElements(By.xpath("//<tag>[#class='classname']/div"));
Simply use syntax,
List classele = driver.finElements(By.className("Paste your class name here"));
Import java.utils for List.
Import selenium class for WebElement.
copy paste class name from html tags of web page in " ".
use for each loop or iterator to access List elements, you might need to use extra inbuilt method to fetch data like getText(),etc

How to search for elements with class starts with particular character and replace them with new class name in extjs

For example,
<div class="level1">
</div>
I need to search for elements with class name starting with level and programatically replace them as "level2".
How can this be done in extjs?
Here's how. Look at the docs for the various functions to learn how to adapt.
var targets = Ext.query('.level1');
Ext.each(targets, function(domEl) {
Ext.fly(domEl) // get a reference to Ext.Element from the raw ROM element
.removeCls('level1')
.addCls('level2');
});

Resources