Selenium CSS-Selector Tutorial

Selenium CSS Selector #1 – Introduction to CSS and CSS Selector

In this Selenium CSS selector tutorial we will explain about CSS and CSS Selector.CSS stands for Cascading Style Sheets. CSS is a style sheet language which describes the presentation of the HTML document.CSS Selectors are used to target the HTML elements on web page

Selenium CSS Selector #2 – Write CSS Selector using Class Attribute

In this Selenium CSS selector tutorial we will learn how to write CSS selector using Class attribute.If the webelement has the CLASS attribute you can use CLASS attribute details in CSS selectorCLASS attribute in CSS Selector is symbolised by the DOT (.) signSyntax : tagName.elementIDExample : input.signup

Selenium CSS Selector #3 – CSS Selector with Multiple Attributes

In this Selenium CSS selector tutorial we will learn how to write Selenium CSS selector using multiple attributes of the webelement.You can write advanced CSS selectors using the mix of Tag, ID or CLASSNAME and other attributes of the webelement.Syntax for CSS selector with multiple attributes:tagName.classValue[AttributeName='AttributeValue']tagName#idValue[AttributeName='AttributeValue']Examples:input.signup[type='submit'][value='Sign me up ']input#submit_btn[type='submit'][value='Sign...

Selenium CSS Selector #4 – CSS Selector Substring Matching

In this Selenium CSS Selector tutorial we will learn how to identify webelements using sub-string matches in Selenium.Sub-string matches are very helpful in identifying dynamic webelements with the help of partial string matches.The 3 important special characters in css sub-string selectors are:'^' Sign - Signify's the prefix of the...

Selenium CSS Selector #5 – Finding Direct Child or Sub-child Elements

In this CSS selector tutorial we will learn how to find direct child and sub-child elements.Child combinator  is used to select direct child and Descendant combinator is used to select Child or Sub-child.

Selenium CSS Selector #6 – Next Sibling | Adjacent Sibling Combinator

Adjacent sibling combinator (+) separates two CSS selectors and matches the second webelement only if it immediately follows the first webelement, and both are the child of same parent webelement.Next Sibling elements are located using the + operator.

Selenium CSS Selector #7 – First-Child, Last-Child, Nth-Child, Nth-Last-Child

In this Selenium CSS Selector tutorial we will learn about CSS Selector Pseudo classes first-child, last-child, nth-child and nth-last-child.A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected web-elementfirst-child - Returns first element from the group of sibling elementslast-child - Returns...

Selenium CSS Selector #8 – First-of-type, Last-of-type, Nth-of-type()

In this Selenium CSS Selector tutorial, we will learn about CSS selector Pseudo-classes first-of-type, last-of-type, and nth-of-type()first-of-type - Returns the first element of its type among a group of sibling elementslast-of-type - Returns the last element of its type among a group of sibling elementsnth-of-type() - matches elements of...

×