Home | RU | EN

Locators Cheat Sheet XPath & CSS - Selenide / Selenium

Patterns, examples, and code variants. The Selenide column shows several convenient options.

XPath

Rule Schema Example Comment Selenide (options) Selenium
tag & attribute //tag[@attribute="value"] //input[@placeholder="Username"] Find element by tag and attribute $(byXpath("//input[@placeholder='Username']")) driver.findElement(By.xpath("//input[@placeholder='Username']"))
text() //tag[text()="value"] //button[text()="Login"] Exact text match $(byText("Login"))
$$("button").findBy(text("Login"))
$(byXpath("//button[text()='Login']"))
driver.findElement(By.xpath("//button[text()='Login']"))
contains() (text) //tag[contains(text(),"value")] //div[contains(text(),"Error")] Partial text match $(withText("Error"))
Generates approximately this XPath: .//*[contains(text(),'Error')]
$(byXpath("//div[contains(text(),'Error')]"))
driver.findElement(By.xpath("//div[contains(text(),'Error')]"))
contains() (attr) //tag[contains(@attr,"value")] //input[contains(@placeholder,"Usern")] Partial attribute match $("input[placeholder*='user']")
$(byAttribute("placeholder","user")) (contains)
$(byXpath("//input[contains(@placeholder,'Usern')]"))
driver.findElement(By.xpath("//input[contains(@placeholder,'Usern')]"))
multiple attributes //tag[rule1][rule2] //input[@type="text"][@name="login"] Several conditions $("input[type='text'][name='login']")
$(byCssSelector("input[type='text'][name='login']"))
$(byXpath("//input[@type='text'][@name='login']"))
driver.findElement(By.xpath("//input[@type='text'][@name='login']"))
moving through the tree //parent/child //div/span Parent → child $("div span")
$(byXpath("//div/span"))
driver.findElement(By.xpath("//div/span"))
not() //tag[not(contains(@attr,"v"))] //input[not(contains(@type,"hidden"))] Exclude by condition $(byXpath("//input[not(contains(@type,'hidden'))]")) driver.findElement(By.xpath("//input[not(contains(@type,'hidden'))]"))
indexing (//tag[@attr="v"])[N] (//input[@type="text"])[2] N-th element in the set $$("input[type='text']").get(1)
$(byXpath("(//input[@type='text'])[2]"))
driver.findElement(By.xpath("(//input[@type='text'])[2]"))
parent //tag/.. //input/.. Go to parent $(byXpath("//input/..")) driver.findElement(By.xpath("//input/.."))
following-sibling //tag/following-sibling::tag2 //label/following-sibling::input Right sibling at same level $(byXpath("//label/following-sibling::input")) driver.findElement(By.xpath("//label/following-sibling::input"))
preceding-sibling //tag/preceding-sibling::tag2 //input/preceding-sibling::label Left sibling $(byXpath("//input/preceding-sibling::label")) driver.findElement(By.xpath("//input/preceding-sibling::label"))
ancestor //tag/ancestor::X //span/ancestor::form Any ancestor up the tree $(byXpath("//span/ancestor::form")) driver.findElement(By.xpath("//span/ancestor::form"))

CSS Selectors (CSS has no text() and contains() functions)

Rule Schema Example Comment Selenide (options) Selenium
tag & attribute tag[attribute="value"] input[aria-label="Search"] By attribute $("input[aria-label='Search']")
$(byAttribute("aria-label","Search"))
$(byCssSelector("input[aria-label='Search']"))
driver.findElement(By.cssSelector("input[aria-label='Search']"))
id #id #loginBtn By id $("#loginBtn")
$(byId("loginBtn"))
driver.findElement(By.id("loginBtn"))
class name .className .btn-primary By class $(".btn-primary")
$(byClassName("btn-primary"))
driver.findElement(By.className("btn-primary"))
multiple class names .class1.class2 .btn.large Two classes simultaneously $(".btn.large")
$(byCssSelector(".btn.large"))
driver.findElement(By.cssSelector(".btn.large"))
attribute *= [attribute*="value"] input[placeholder*="user"] Attribute contains $("input[placeholder*='user']")
$(byAttribute("placeholder","user"))
driver.findElement(By.cssSelector("input[placeholder*='user']"))
attribute ^= [attribute^="value"] input[placeholder^="user"] Attribute starts with $("input[placeholder^='user']")
$(byCssSelector("input[placeholder^='user']"))
driver.findElement(By.cssSelector("input[placeholder^='user']"))
attribute $= [attr$="value"] img[src$=".png"] Attribute ends with $("img[src$='.png']")
$(byCssSelector("img[src$='.png']"))
driver.findElement(By.cssSelector("img[src$='.png']"))
name / link text (good to know) a:contains(text) - (not in pure CSS) Links by text No text search in CSS - use API $(byLinkText("Home"))
$(byPartialLinkText("Hom"))
driver.findElement(By.linkText("Home"))
driver.findElement(By.partialLinkText("Hom"))

Imports (Selenide): import static com.codeborne.selenide.Selenide.*;, import static com.codeborne.selenide.Selectors.*;, import static com.codeborne.selenide.Condition.*;