Find locators in 15 different ways

Why this Topic ?

• Technology Independent

• Selenium WebDriver - 2007

• Cypress - 2014

• Playwright - 2020

Common Locators :

• ID

• ClassName

• Name

• LinkText

• CSS Selector

• Xpath

---

Fundamental way to write CSS Selector

Id :

• HTMLTag#ID
• #Id

Class :

• HtmlTag.className
• .ClassName
• .ClassName1.ClassName2.ClassName3.
• HtmlTag.ClassName1.ClassName2.ClassName3

---

Way to write Xpath & CSS Selector

• Xpath - //htmltag[@attr =’string’]

• CSS - htmltag[attr=’string’]

---

Custom way to write XPATH & CSS Selector

• Travel (Parent to Child)

• Xpath = ParentTag/ChildTag

• CSS = ParentTag>ChildTag (Immediate Child)

• CSS = ParentTag ChildTag (Not Immediate Child)

---

What if their is multiple class in a html tag separated with spaces ?

• We can Simply achieve this while replacing the space with dot.

---

What if we are having className or Id consist of Alphanumeric values ?

Realtime example:

Suppose this is the Dom <input class=’Test123’> and the numeric value are changing every time.

• There are approch listed below :-

CSS Selector which start with Test

Syntax :- htmltag[attr^=’String’]

So we can write like this, input[class^=’Test’]

---

CSS Selector which end with Text

<input class=’423423Test’>

Syntax :- //htmltag[attr$=’Text’]

So we can write like this, //input[class$=’Test’]

---

XPath & CSS with two 2 different Attributes.

Xpath -  //htmltag[@attr= ‘val1’ and @attr2 =’val2’]
CSS   -  htmltag[attr1=’val1’][attr2=’val2’]

---

Contains Method :

CSS Selector is not having contains methods but there is an alternate way <input class=’423423Test123123’>

    htmltag[attr*=’Text’]

So we can write like this, input [class=’Test’]*

---

Travel to a specific Tag

    XPath - Parent Child Travel approach
    
    CSS Selector  - ParentTag#StaticID>htmlTag:nth-of-type(Integer)