Website Automation Testing Locators strategy

When performing website automation testing, using the right locator strategy is critical for creating robust, maintainable, and reliable tests. Below is an overview of the most effective locator strategies in Selenium, Playwright, or other web automation tools:

Locators:

Id,

Xpath,

Css selector,

Name,

Class name,

Tag name,

Link text,

Partial link text

CSS Selectors constructing: By.cssSelector()

1. tagname.classname 
2. tagname#id
3. tagname[attribute=‘value’]
4. [attribute=‘value’]
5. Tagname[@attribute=’value’]:nth-child(index)
6. parentTagName childTagName
7. [class=‘parentClass’] [class=‘childClass’]    Eg: (By.cssSelector("[class='datepicker-days'] [class='datepicker-switch']"))
8. Regular expression for contains value keyword: tagName[attribute*=‘value’]
9. Tagname

Note: If the class in tag contains multiple classes, just construct cssSelectors as by removing spaces and replace with dot. 

Eg: By.cssSelector(“.classname1.classname2.classname3”)

By.cssSelector("tagname");

By.cssSelector("#id");

By.cssSelector(".classname");

By.cssSelector("tagname[attribute='value']");

Starts with: driver.findElement(By.cssSelector("a[href^='https']"));

Ends with: driver.findElement(By.cssSelector("img[src$='.png']"));

Contains: driver.findElement(By.cssSelector("input[name*='username']"));

Combining selectors:

Descendant selector: By.cssSelector("parent child"); driver.findElement(By.cssSelector("div form"));

Direct child: By.cssSelector("parent > child"); driver.findElement(By.cssSelector("ul > li"));

Multiple classes: By.cssSelector("tagname.class1.class2");

Grouping selector: By.cssSelector("selector1, selector2"); driver.findElement(By.cssSelector("button, input[type='submit']"));

Pseudo classes:

First child: By.cssSelector("parent :first-child"); driver.findElement(By.cssSelector("ul > li:first-child"));

Last child: By.cssSelector("parent :last-child"); driver.findElement(By.cssSelector("ul > li:last-child"));

Nth child: By.cssSelector("parent :nth-child(n)"); driver.findElement(By.cssSelector("table tr:nth-child(2)"));

Contains Text CSS Selectors do not have a direct equivalent to XPath’s contains(text(), 'value'). Use XPath in such cases.

Note: Use browser dev tools to verify your CSS selectors (document.querySelectorAll("cssSelector");).

Xpath constructing:

1. tagname[@attribute=‘value’]
2. tagname[@attribute=‘value’][index]
3. //parentTagName/childTagName[index] Eg: By.xpath(“//table/tbody/tr/td[1]/ui”)
4. Regular expression for contains value keyword: //tagName[contains(@attribute,’value’)]
5. //htmlTag[@attribute=‘value’]/tagName[index]
6. //tagname
7. //*[text()=‘Log Out’] —> tagname is regex * can be anything. EXAMPLE: //div[@class='ola-techPack-plan-buttons']//div[text()='Buy later']
8. Sibling to sibling traverse: 
9. A. //header/div/button[1]/following-sibling::button[1]
10. B. //header/div/button[2]/preceding-sibling::button[1]
11. Child to parent traverse:  //header/div/button[1]/parent::div/parent::header
12. Parent-child relationship: //parentXpath //childXpath

Xpath:

Absolute Xpath:

/html/body/header

Relative Xpath:

//header/div/button[1]

Relative Locators(selenium 4 and above):

Df

Synchronisation in Selenium:

Implicit Wait

Explicit Wait: WebDriverWait, Fluent Wait

Thread.sleep

Actions:

How to mouseover on object with selenium

Performing mouse and keyboard interactions with selenium

Contextclick(right click) on element

Double click on element

Drag and dropping the element

Frames: