Ready to level up your Selenium skills? Dive into our selenium locators cheat sheet your go-to resource for mastering XPath and CSS locators. Whether you’re a seasoned developer or just getting started, this handy guide has everything you need to streamline your web element identification process. Let’s dive in and unlock the power of Selenium automation!
Element/WebElement Attribute selectors
| Attribute | CSS Locator | XPath Locator |
|---|---|---|
| id | #id_value | //*[@id=’id_value’] |
| class | .class_value | //*[contains(@class, ‘class_value’)] or //*[@class=’class_value’] |
| name | [name=’name_value’] | //*[@name=’name_value’] |
| href | [href=’url_value’] | //*[@href=’url_value’] |
| src | [src=’source_value’] | //*[@src=’source_value’] |
| alt | [alt=’text_value’] | //*[@alt=’text_value’] |
| title | [title=’title_value’] | //*[@title=’title_value’] |
| type | [type=’type_value’] | //*[@type=’type_value’] |
| value | [value=’value’] | //*[@value=’value’] |
| placeholder | [placeholder=’text’] | //*[@placeholder=’text’] |
| data-* | [data-custom=’value’] | //*[@data-custom=’value’] |
Example:
Let’s assume we have the following HTML element:
<a id="link1" class="btn btn-primary" href="https://example.com">Example Link</a>| Attribute | CSS Locator | XPath Locator |
|---|---|---|
| id | #link1 | //*[@id=’link1′] |
| class | .btn.btn-primary | //*[contains(@class, ‘btn’) and contains(@class, ‘btn-primary’)] |
| href | [href=’https://qatestauto.com‘] | //*[@href=’https://qatestauto.com‘] |
Descendant selectors
| Descendant Selector | CSS Selector Example | XPath Selector Example |
|---|---|---|
| Selecting a child element | .parent .child | //div[@class=’parent’]//span |
| Selecting a descendant element | .ancestor .descendant | //div[@class=’ancestor’]//* |
| Selecting a specific child | .parent > .child | //ul[@class=’parent’]/li[@class=’child’] |
| Selecting a direct descendant | .ancestor > .descendant | //div[@class=’ancestor’]/div[@class=’descendant’] |
| Selecting an nth-child | .parent :nth-child(n) | //ul[@class=’parent’]/li[position()=n] |
| Selecting a specific nth-child | .parent :nth-child(2) | //ul[@class=’parent’]/li[position()=2] |
Example:
Consider the following HTML structure from a hypothetical website:
<div class="container">
<ul class="menu">
<li class="menu-item">Home</li>
<li class="menu-item">About
<ul class="submenu">
<li class="submenu-item">Mission</li>
<li class="submenu-item">Vision</li>
</ul>
</li>
<li class="menu-item">Services</li>
<li class="menu-item">Contact</li>
</ul>
</div>| Descendant Selector | CSS Selector Example | XPath Selector Example |
|---|---|---|
| Selecting a child element | .menu .submenu-item | //ul[@class=’menu’]//li[@class=’submenu-item’] |
| Selecting a descendant element | .container .menu-item | //div[@class=’container’]//*[@class=’menu-item’] |
| Selecting a specific child | .menu > .menu-item | //ul[@class=’menu’]/li[@class=’menu-item’] |
| Selecting a direct descendant | .container > .menu | //div[@class=’container’]/ul[@class=’menu’] |
| Selecting an nth-child | .menu :nth-child(n) | //ul[@class=’menu’]/li[position()=n] |
| Selecting a specific nth-child | .menu :nth-child(3) | //ul[@class=’menu’]/li[position()=3] |
Full Xpath Guide: How to Find XPath in Selenium? Contains, Text, Axis
Siblings
| Sibling Selector | CSS Selector Example | XPath Selector Example |
|---|---|---|
| Selecting the next sibling | .element + .sibling | //div[@class=’element’]/following-sibling::div[1] |
| Selecting all next siblings | .element ~ .sibling | //div[@class=’element’]/following-sibling::div |
| Selecting the previous sibling | .element ~ .sibling | //div[@class=’element’]/preceding-sibling::div[1] |
| Selecting all previous siblings | .element ~ .sibling | //div[@class=’element’]/preceding-sibling::div |
NOTE: The above example is shown by assuming class attributes. You can use any of the attributes if the class is not present.
Example:
Consider the following HTML structure from a hypothetical website:
<div class="container">
<h2 class="heading">Heading</h2>
<p class="content">Content</p>
<div class="divider"></div>
<p class="extra-content">Extra Content</p>
</div>| Sibling Selector | CSS Selector Example | XPath Selector Example |
|---|---|---|
| Selecting the next sibling | .heading + .content | //h2[@class=’heading’]/following-sibling::p[1] |
| Selecting all next siblings | .heading ~ .content | //h2[@class=’heading’]/following-sibling::p |
| Selecting the previous sibling | .extra-content ~ .divider | //p[@class=’extra-content’]/preceding-sibling::div[1] |
| Selecting all previous siblings | .extra-content ~ .divider | //p[@class=’extra-content’]/preceding-sibling::div |
Axis
| xis Selector | CSS Selector Example | XPath Selector Example |
|---|---|---|
| Ancestor Axis | .descendant .ancestor | //div[@class=’descendant’]/ancestor::* |
| Parent Axis | .child > .parent | //li[@class=’child’]/parent::ul |
| Child Axis | .parent .child | //ul[@class=’parent’]/child::li |
| Following-sibling Axis | .element + .sibling | //div[@class=’element’]/following-sibling::div[1] |
| Following Axis | .element ~ .sibling | //div[@class=’element’]/following::* |
| Preceding-sibling Axis | .element ~ .sibling | //div[@class=’element’]/preceding-sibling::div[1] |
| Preceding Axis | .sibling ~ .element | //div[@class=’element’]/preceding::* |
| Self Axis | .self | //div[@class=’self’]/self::div |
| Descendant Axis | .ancestor .descendant | //div[@class=’ancestor’]/descendant::* |
Example:
<div class="container">
<ul class="parent">
<li class="child">Child 1</li>
<li class="child">Child 2</li>
<li class="child">Child 3
<ul class="grandparent">
<li class="grandchild">Grandchild 1</li>
<li class="grandchild">Grandchild 2</li>
</ul>
</li>
</ul>
</div>| Axis Selector | CSS Selector Example | XPath Selector Example |
|---|---|---|
| Ancestor Axis | .grandchild .parent | //li[@class=’grandchild’]/ancestor::* |
| Parent Axis | .child > .parent | //li[@class=’child’]/parent::ul |
| Child Axis | .parent .child | //ul[@class=’parent’]/child::li |
| Following-sibling Axis | .grandchild + .grandchild | //li[@class=’grandchild’]/following-sibling::li[1] |
| Following Axis | .grandparent ~ .grandchild | //ul[@class=’grandparent’]/following::* |
| Preceding-sibling Axis | .grandchild ~ .grandchild | //li[@class=’grandchild’]/preceding-sibling::li[1] |
| Preceding Axis | .grandchild ~ .grandparent | //li[@class=’grandchild’]/preceding::* |
| Self Axis | .grandchild | //li[@class=’grandchild’]/self::li |
| Descendant Axis | .parent .grandchild | //ul[@class=’parent’]/descendant::* |
Indexing
| Description | XPath Example | CSS Example |
|---|---|---|
| Selecting by Index | (//a)[1] | a:nth-of-type(1) |
| Selecting by Index Range | (//div)[position()>=2 and position()<=4] | div:nth-of-type(n+2):nth-of-type(-n+4) |
Functions
| Function | Description | XPath Example | CSS Example |
|---|---|---|---|
| text() | Selects elements based on their text content. | //a[text()=’Click here’] | Not applicable (CSS doesn’t have this) |
| contains() | Selects elements based on partial text content. | //div[contains(@class, ‘container’)] | Not applicable (CSS doesn’t have this) |
| starts-with() | Selects elements whose attribute value starts with a specified string. | //input[starts-with(@id, ‘username’)] | Not applicable (CSS doesn’t have this |
In conclusion, mastering Selenium locators is key to becoming a proficient automation tester or web developer. With our comprehensive cheat sheet at your fingertips, you’re equipped with the knowledge and techniques needed to efficiently identify and interact with web elements using XPath and CSS locators.
So, bookmark this resource, practice regularly, and watch your Selenium skills soar. Happy testing!