Type
Tag and ID
Tag and Class
Tag and Attribute
Tag, Class and Attribute
Starts With
Ends With
Contains
Direct Child
Sub Child
nth Child
Syntax
css=tag#id
css=tag[class='<Value>'] /tag.class
css=tag[attribute='value']
css=tag.class[attribute=value]
css=<HTML tag><[attribute^='prefix of the string']>
css=<HTML tag><[attribute$=suffix of the string]>
css=<HTML tag><[attribute*=sub string]>
Tag#parentLocator>childTag
Tag#parentLocator>childTag
css="parentTag#id childTag:nth-of-type(2)"
css="ul#automation li:last-child"
css="ul#automation li:first-child"
Eample
driver.findElement(By.cssSelector("input#Email"))
driver.findElement(By.cssSelector("input[class='inputtext login_form_input_box']"))
driver.findElement(By.cssSelector("input[name='Email']"))
driver.findElement(By.cssSelector("input.inputtext[name=email]"))
driver.findElement(By.cssSelector("input[id^='Em']"))
driver.findElement(By.cssSelector("input[id$='001']"))
driver.findElement(By.cssSelector("input[id*='id']"))
label#loginbutton>input
label#loginbutton>input
css="ul#automation li:nth-of-type(2)" nth Type is used whenall c
nth Type is used whenall children have same attribute values
Type Syntax
Single Attribute //tag[@attribute='attribute_value']
Multiple Attribute //tag[@attribute='attribute_value'][@attribute2='value']
Or Attribute //tag[@attribute='attribute_value' or @attribute2='value']
Contains //tag[contains(@attribute,'value')]
Starts-With //tag[starts-with(@attribute,'prefix')]
index (//tag[contains(@attribute,'value')])[1]
last (//tag[contains(@attribute,'value')])[last()]
last-1 (//tag[contains(@attribute,'value')])[last()-1]
Eample
//input[@id='email']
//input[@id='email'][@data-testid='royal_email']
//input[@id='email' or @data-testid='royal_email']
//input[contains(@data-testid,'royal')]
//input[starts-with(@class,'inputtext')]
(//input[starts-with(@class,'inputtext')])[1] first WebElement
(//input[starts-with(@class,'inputtext')])[last()]
(//input[starts-with(@class,'inputtext')])[last()-1]