CheatSheet for xpath/css used in Selenium (UI Automation Testing)

Locators

Dynamic XPath

String a = "//html/body/div[2]/header/nav/div[2]/div/ul[2]/li[7]/div/div[2]/span/div/div/div[";

                     int i = 1;

                     String b = "]";

                     String xp = a + i + b;

===========================================

Xpath

By.xpath("//span[@class = 'close-icon close']"

//div[@id="pancakes"]/button[0]

//div[@id='' and @value='']

//input[@id='identifierId']

Contains:

//img[contains(@src,'Profile')]

Starts-with

//img[starts-with(@alt,'Visit on...')]

text:

//*[text()='abc']

//a[contains(text(),'abc')]

Mulitple Attributes:

//HTMLTAG[@att1=''][@att2='']

//HTMLTAG[@att1='' and @att2='']

//HTMLTAG[@att1='' or @att2='']

last:

(//input[@class=''])[last()]

(//input[@class="whsOnd zHQkBf"])[last()]

(//input[@class="whsOnd zHQkBf"])[last()-1]

Position:

(//input[@class="whsOnd zHQkBf"])[position()=1]

(//input[@class="whsOnd zHQkBf"])[position()=2]

here index start from 1

following:

//*[@id='FirstName']/following::input[@type='text']

//*[@id='FirstName']/following::input

preceding:

//*[@id='LastName']/preceding::input[@type='text']

//*[@id='LastName']/preceding::input

ancestor:

.//*[@class=’container-fluid’]//ancestor::div[1] – Returns 13 nodes

.//*[@class=’container-fluid’]//ancestor::div[2] – Returns 7 nodes

.//*[@class=’container-fluid’]//ancestor::div[3] – Returns 5 nodes

.//*[@class=’container-fluid’]//ancestor::div[4] – Returns 3 nodes

.//*[@class=’container-fluid’]//ancestor::div[5] – Returns 1 node

child:

//nav[@class=’fusion-main-menu’]//ul[@id=’menu-main’]/child::li

decendant:

//nav[@class=’fusion-main-menu’]//*[@id=’menu-main’]//descendant::li

Naurki.com > More

ul.midSec.menu>li:nth-child(5) a div

css

input[name=email][type=text]

1. If we have id

HTMLTag#idname

input#Email

2. If we have class

HTMLTag.classname

input.abc

3. Prefix

css=input#Passwd[name^=’Pass’]

4. Sufix

css=input#Passwd[name$=’wd’]

5. Substring

css=input#Passwd[name*=’wd’]

6. contain text

css=input:contains('abc')

css=input[name*='sw']

7. child selector

> 

label>input

8. child element

with space

9. <ul id="fruit">

    <li>Apple</li>

    <li>Orange</li>

    <li>Banana</li>

</ul>

css="ul#fruit li:nth-of-type(2)

10.

Not contain

css = "div[class*=calendar-day-]:not([class*='unavailable'])"

===========================================

id

driver.findElement(By.id("txtPassword")).sendKeys("abc@123");

driver.findElement(By.id("Email")).sendKeys("atyagi.mails");

===========================================

name

driver.findElement(By.name("signIn")).click();

 ================================

dom

following ways: document.forms[0].elements[0]

document.forms[‘loginForm’].elements[‘username’]

document.forms[‘loginForm’].username

document.getElementById(‘username’)

 =================================

1. //HTML-TAG[@att = 'val']

//div[@class = 'mTxt'] = Job

//div[@class = 'mTxt'] = Rec

-----------------------

2.

//descendant::HTML-TAG[@att = 'val'][num]

//descendant::div[@class = 'mTxt'][1]

------------------------------

3.

//HTML-TAG[text() = 'txtVal']

//div[text() = 'Jobs']

//input[@class = 'sdTxt w85']