Educating For Excellence! Making You Job Ready!
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
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 selector
CLASS attribute in CSS Selector is symbolised by the DOT (.) sign
Syntax : tagName.elementID
Example : input.signup
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 me up ‘]
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 text
‘$’ Sign – Signify’s the suffix of the text
‘*’ Sign – Signify’s the sub-string of the text
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.
