Selector Types

Complete reference for XPath and CSS selector syntax in TrueAssert.

Overview

TrueAssert supports two selector types:

• XPath: More expressive, recommended for complex pages

• CSS: Simpler syntax, familiar to web developers

XPath Selectors

Basic Syntax

Select All Elements of Type:

//button
//div
//input

Select by ID:

//*[@id='submit']
//button[@id='submit']

Select by Attribute:

//input[@name='email']
//a[@href='/login']

Select by Class:

//div[contains(@class, 'container')]
//button[contains(@class, 'primary')]

Attribute Matching

Exact Match:

[@id='submit']
[@name='email']
[@type='button']

Contains:

[contains(@class, 'active')]
[contains(@href, '/login')]

Starts With:

[starts-with(@id, 'item-')]

Multiple Conditions (AND):

[@role='button' and @aria-label='Submit']
[@type='text' and @name='email']

Multiple Conditions (OR):

[@type='text' or @type='email']

Text Matching

Exact Text:

[normalize-space()='Login']
[text()='Submit']

Contains Text:

[contains(text(), 'Welcome')]

Normalize Space:

[normalize-space()='Click Me']

Removes leading/trailing whitespace and normalizes internal spaces.

Positional Selection

First Element:

//button[1]
(//div[@class='item'])[1]

Last Element:

//button[last()]

Nth Element:

//div[3]
(//button[@class='submit'])[2]

Position Range:

//div[position() > 2]
//div[position() <= 5]

Path Navigation

Descendant (anywhere below):

//div[@id='container']//button

Child (direct child):

//div[@id='container']/button

Parent:

//button[@id='submit']/..

Following Sibling:

//input[@name='email']/following-sibling::button

Preceding Sibling:

//button[@id='submit']/preceding-sibling::input

Advanced XPath

Multiple Attributes:

//button[@type='submit' and @aria-label='Submit' and contains(@class, 'primary')]

Nested Conditions:

//div[@id='form']//input[@name='email' and @type='text']

Combining Paths:

//form[@id='login']//input[@name='username'] | //form[@id='login']//input[@name='password']

Functions:

[string-length(@class) > 5]
[substring(@id, 1, 3) = 'btn']

SVG Elements

Local Name:

//*[local-name()='path']
//*[local-name()='svg']//*[local-name()='circle']

Namespace Handling:

//*[local-name()='svg' and namespace-uri()='http://www.w3.org/2000/svg']

CSS Selectors

Basic Syntax

Element Type:

button
div
input

ID Selector:

#submit
#user-menu

Class Selector:

.container
.button-primary
.active

Attribute Selector:

[name='email']
[type='submit']
[href='/login']

Attribute Matching

Exact Match:

[name='email']
[type='button']
[id='submit']

Contains:

[class*='active']
[href*='/login']

Starts With:

[id^='item-']
[class^='btn-']

Ends With:

[class$='-primary']
[href$='.html']

Word Match:

[class~='active']

Matches if value is a space-separated list and one word matches.

Combinators

Descendant (space):

div.container button
form input

Child (>):

div > button
form > input

Adjacent Sibling (+):

input + button
label + input

General Sibling (~):

h1 ~ p
div ~ div

Pseudo-classes

First Child:

div:first-child
button:first-of-type

Last Child:

div:last-child
button:last-of-type

Nth Child:

div:nth-child(3)
button:nth-of-type(2)

Not:

:not(.disabled)
:not([type='hidden'])

Empty:

div:empty

Multiple Selectors

Grouping:

button, a, input[type='button']

Combining:

button.primary#submit
div.container.active

When to Use Which

Use XPath When

• ✅ Complex DOM structures

• ✅ Need text matching

• ✅ Need positional selection

• ✅ SVG elements

• ✅ More expressive queries needed

• ✅ Cross-browser consistency important

Use CSS When

• ✅ Simple, straightforward selectors

• ✅ Familiar CSS syntax preferred

• ✅ Performance is critical (slightly faster)

• ✅ Simple attribute matching

Examples Comparison

Same Selector in Both

XPath:

//button[@id='submit']

CSS:

#submit
button#submit

XPath:

//input[@name='email' and @type='text']

CSS:

input[name='email'][type='text']

XPath:

//div[contains(@class, 'container')]//button[normalize-space()='Submit']

CSS:

div.container button

(Note: CSS can't match by text content easily)

Best Practices

XPath Best Practices

1. Use IDs: //button[@id='submit']

2. Use data-testid: //div[@data-testid='menu']

3. Normalize Text: [normalize-space()='Text']

4. Combine Attributes: [@role='button' and @aria-label='Submit']

5. Use Parent Anchors: //div[@id='form']//button

CSS Best Practices

1. Use IDs: #submit

2. Use Classes: .button-primary

3. Combine Selectors: button.primary#submit

4. Use Attributes: [name='email']

5. Keep Simple: Avoid overly complex selectors

Related Topics

• Understanding XPath Selectors - How XPath works

• Selector Best Practices - Create good selectors

• Command Reference - Commands that use selectors

---

← Back to Documentation