Selector Examples

Bromate provides a powerful selector engine based on CSS selectors with additional capabilities. This page demonstrates common selector patterns with examples to help you effectively extract data from web pages.

Text Matching

Basic Text Matching

article:has-text("Bromate") Matches any <article> tag that contains the text “Bromate”, even nested inside child elements.

&lt;!-- Will match --&gt;
&lt;article&gt;
  &lt;div&gt;Welcome to Bromate&lt;/div&gt;
&lt;/article&gt;

&lt;!-- Will match --&gt;
&lt;article&gt;Bromate Documentation&lt;/article&gt;

&lt;!-- Will not match --&gt;
&lt;div&gt;Bromate&lt;/div&gt;

Exact Text Matching

button:text-is("Log") Matches elements with exact text content. Case-sensitive and trims whitespace.

&lt;!-- Will match --&gt;
&lt;button&gt; Log &lt;span&gt;in&lt;/span&gt;&lt;/button&gt;

&lt;!-- Will not match --&gt;
&lt;button&gt;Log in&lt;/button&gt;
&lt;button&gt;log&lt;/button&gt;
&lt;button&gt;Login&lt;/button&gt;

Text Pattern Matching

button:text-matches("Log\\s*in", "i") Matches text using regex patterns. The example matches “Login”, “Log in”, “log IN”, etc.

&lt;!-- All of these will match --&gt;
&lt;button&gt;Login&lt;/button&gt;
&lt;button&gt;Log in&lt;/button&gt;
&lt;button&gt;LOG IN&lt;/button&gt;
&lt;button&gt;log in&lt;/button&gt;

Layout-Based Selectors

Position-Based

input:right-of(:text("Username")) Matches input fields that are to the right of text “Username”

&lt;!-- Will match --&gt;
&lt;div&gt;
  &lt;label&gt;Username&lt;/label&gt;
  &lt;input type=&quot;text&quot; /&gt;
&lt;/div&gt;

&lt;!-- Will not match --&gt;
&lt;div&gt;
  &lt;input type=&quot;text&quot; /&gt;
  &lt;label&gt;Username&lt;/label&gt;
&lt;/div&gt;

button:near(.promo-card) Matches buttons within 50 pixels of elements with class “promo-card”

&lt;!-- Will match if button is within 50px of the div --&gt;
&lt;div class=&quot;promo-card&quot;&gt;Special Offer!&lt;/div&gt;
&lt;button&gt;Buy Now&lt;/button&gt;

Distance Specification

button:near(:text("Username"), 120) Matches buttons within 120 pixels of text “Username”

&lt;!-- Will match if button is within 120px --&gt;
&lt;div&gt;Username&lt;/div&gt;
&lt;button&gt;Click me&lt;/button&gt;

Element State and Visibility

button:visible Matches only visible button elements

&lt;!-- Will match --&gt;
&lt;button&gt;Visible Button&lt;/button&gt;

&lt;!-- Will not match --&gt;
&lt;button style=&quot;display: none&quot;&gt;Hidden Button&lt;/button&gt;
&lt;button hidden&gt;Hidden Button&lt;/button&gt;
&lt;button style=&quot;visibility: hidden&quot;&gt;Hidden Button&lt;/button&gt;

Nested Elements

Has-Text with Specific Elements

article:has-text("Bromate") Matches article elements containing “Bromate” text anywhere inside

&lt;!-- Will match --&gt;
&lt;article&gt;
  &lt;h2&gt;Getting Started with Bromate&lt;/h2&gt;
  &lt;p&gt;Some content...&lt;/p&gt;
&lt;/article&gt;

&lt;!-- Will match --&gt;
&lt;article&gt;Bromate Guide&lt;/article&gt;

&lt;!-- Will not match --&gt;
&lt;section&gt;Bromate Guide&lt;/section&gt;

Parent-Child Relationships

#nav-bar :text("Home") Matches elements with text “Home” inside #nav-bar element

&lt;!-- Will match --&gt;
&lt;nav id=&quot;nav-bar&quot;&gt;
  &lt;a&gt;Home&lt;/a&gt;
  &lt;a&gt;About&lt;/a&gt;
&lt;/nav&gt;

&lt;!-- Will not match --&gt;
&lt;div id=&quot;content&quot;&gt;
  &lt;a&gt;Home&lt;/a&gt;
&lt;/div&gt;

Multiple Conditions

button:has-text("Log in"), button:has-text("Sign in") Matches buttons containing either “Log in” or “Sign in” text

&lt;!-- Both will match --&gt;
&lt;button&gt;Log in&lt;/button&gt;
&lt;button&gt;Sign in&lt;/button&gt;

&lt;!-- Will not match --&gt;
&lt;button&gt;Register&lt;/button&gt;

XPath Selectors

xpath=//button Matches any button element anywhere in the document

&lt;!-- All will match --&gt;
&lt;button&gt;Click me&lt;/button&gt;
&lt;div&gt;&lt;button&gt;Nested button&lt;/button&gt;&lt;/div&gt;
&lt;form&gt;&lt;button&gt;Submit&lt;/button&gt;&lt;/form&gt;

xpath=//div[@id='main']//button Matches button elements inside div with id=“main”

&lt;!-- Will match --&gt;
&lt;div id=&quot;main&quot;&gt;
  &lt;button&gt;Inside main&lt;/button&gt;
  &lt;div&gt;
    &lt;button&gt;Nested inside main&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Will not match --&gt;
&lt;div id=&quot;sidebar&quot;&gt;
  &lt;button&gt;Outside main&lt;/button&gt;
&lt;/div&gt;

Label and Form Controls

label:has-text("Password") Matches label element containing “Password” text and can be used to target its associated input

&lt;!-- Will match --&gt;
&lt;label for=&quot;pwd&quot;&gt;Password:&lt;/label&gt;
&lt;input id=&quot;pwd&quot; type=&quot;password&quot;&gt;

&lt;!-- Will match --&gt;
&lt;label&gt;
  Password:
  &lt;input type=&quot;password&quot;&gt;
&lt;/label&gt;

Framework-Specific Selectors

React Components

_react=BookItem Matches React components named BookItem

// Will match
&lt;BookItem title=&quot;React Guide&quot; /&gt;

// Will match
&lt;BookItem author=&quot;John Doe&quot; year={2023} /&gt;

_react=BookItem[author = "Steven King"] Matches BookItem components with specific author prop

// Will match
&lt;BookItem author=&quot;Steven King&quot; /&gt;

// Will not match
&lt;BookItem author=&quot;John Doe&quot; /&gt;

Vue Components

_vue=book-item Matches Vue components named book-item

&lt;!-- Will match --&gt;
&lt;book-item&gt;&lt;/book-item&gt;
&lt;book-item title=&quot;Vue Guide&quot;&gt;&lt;/book-item&gt;

_vue=book-item[author = "Steven King"] Matches book-item components with specific author prop

&lt;!-- Will match --&gt;
&lt;book-item author=&quot;Steven King&quot;&gt;&lt;/book-item&gt;

&lt;!-- Will not match --&gt;
&lt;book-item author=&quot;John Doe&quot;&gt;&lt;/book-item&gt;

Testing-Specific Attributes

data-testid=submit Matches elements with data-testid=“submit”

&lt;!-- Will match --&gt;
&lt;button data-testid=&quot;submit&quot;&gt;Submit&lt;/button&gt;
&lt;input data-testid=&quot;submit&quot; type=&quot;submit&quot;&gt;

&lt;!-- Will not match --&gt;
&lt;button data-testid=&quot;cancel&quot;&gt;Cancel&lt;/button&gt;

id=login-form Matches elements with id=“login-form”

&lt;!-- Will match --&gt;
&lt;form id=&quot;login-form&quot;&gt;
  &lt;input type=&quot;text&quot;&gt;
&lt;/form&gt;

&lt;!-- Will not match --&gt;
&lt;form id=&quot;signup-form&quot;&gt;
  &lt;input type=&quot;text&quot;&gt;
&lt;/form&gt;

CSS Selectors

Basic CSS

css=button Matches any button element using standard CSS selector

&lt;!-- All will match --&gt;
&lt;button&gt;Click me&lt;/button&gt;
&lt;button class=&quot;primary&quot;&gt;Submit&lt;/button&gt;
&lt;button id=&quot;cancel&quot;&gt;Cancel&lt;/button&gt;

CSS with Text Matching

css=#nav-bar :text("Home") Matches smallest element containing “Home” text inside #nav-bar

&lt;!-- Will match the &lt;a&gt; element --&gt;
&lt;div id=&quot;nav-bar&quot;&gt;
  &lt;a&gt;Home&lt;/a&gt;
  &lt;div&gt;Welcome Home&lt;/div&gt;
&lt;/div&gt;

&lt;!-- Will not match --&gt;
&lt;div id=&quot;content&quot;&gt;
  &lt;a&gt;Home&lt;/a&gt;
&lt;/div&gt;

CSS with Has Selector

article:has(div.promo) Matches article elements that contain div with class “promo”

&lt;!-- Will match --&gt;
&lt;article&gt;
  &lt;div class=&quot;promo&quot;&gt;Special offer!&lt;/div&gt;
&lt;/article&gt;

&lt;!-- Will not match --&gt;
&lt;article&gt;
  &lt;div class=&quot;content&quot;&gt;No promo here&lt;/div&gt;
&lt;/article&gt;

Nth Match Selectors

:nth-match(:text("Buy"), 3) Matches the third element containing text “Buy”

&lt;!-- Third button will match --&gt;
&lt;section&gt; &lt;button&gt;Buy&lt;/button&gt; &lt;/section&gt;
&lt;article&gt;&lt;div&gt; &lt;button&gt;Buy&lt;/button&gt; &lt;/div&gt;&lt;/article&gt;
&lt;div&gt;&lt;div&gt; &lt;button&gt;Buy&lt;/button&gt; &lt;/div&gt;&lt;/div&gt;

Chaining Selectors

Basic Chaining

article >> .bar > .baz >> span[attr=value] Chains multiple selectors, each queried relative to the previous match

&lt;!-- Will match the span --&gt;
&lt;article&gt;
  &lt;div class=&quot;bar&quot;&gt;
    &lt;div class=&quot;baz&quot;&gt;
      &lt;span attr=&quot;value&quot;&gt;Target&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/article&gt;

&lt;!-- Will not match --&gt;
&lt;article&gt;
  &lt;span attr=&quot;value&quot;&gt;Wrong place&lt;/span&gt;
&lt;/article&gt;

Intermediate Matches

*css=article >> text=Hello The * prefix captures the article element instead of the text element

&lt;!-- Will match the article element --&gt;
&lt;article&gt;
  &lt;div&gt;Hello&lt;/div&gt;
  &lt;p&gt;World&lt;/p&gt;
&lt;/article&gt;

&lt;!-- Will not match --&gt;
&lt;section&gt;
  &lt;div&gt;Hello&lt;/div&gt;
&lt;/section&gt;

Layout Combinations

[type=radio]:left-of(:text("Label 3")):near(.form-group) Complex selector combining position and proximity

&lt;!-- Will match if within proximity --&gt;
&lt;div class=&quot;form-group&quot;&gt;
  &lt;input type=&quot;radio&quot;&gt;
  &lt;label&gt;Label 3&lt;/label&gt;
&lt;/div&gt;

&lt;!-- Will not match if too far --&gt;
&lt;div class=&quot;form-group&quot;&gt;
  &lt;input type=&quot;radio&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label&gt;Label 3&lt;/label&gt;
&lt;/div&gt;

Role-Based Selectors

[role="button"][aria-label="Submit"] Matches elements with specific ARIA roles and labels

&lt;!-- Will match --&gt;
&lt;div role=&quot;button&quot; aria-label=&quot;Submit&quot;&gt;Click me&lt;/div&gt;

&lt;!-- Will not match --&gt;
&lt;div role=&quot;button&quot;&gt;Submit&lt;/div&gt;
&lt;button aria-label=&quot;Submit&quot;&gt;Click me&lt;/button&gt;

Union Selectors

xpath=//span[contains(@class, 'spinner__loading')]|//div[@id='confirmation'] Matches elements that satisfy either condition

&lt;!-- Both will match --&gt;
&lt;span class=&quot;spinner__loading&quot;&gt;&lt;/span&gt;
&lt;div id=&quot;confirmation&quot;&gt;Confirmed!&lt;/div&gt;

&lt;!-- Will not match --&gt;
&lt;span class=&quot;spinner&quot;&gt;Loading...&lt;/span&gt;
&lt;div id=&quot;other&quot;&gt;Not confirmation&lt;/div&gt;

CSS Pseudo-Classes

Visibility Matching

button:visible Only matches visible buttons, useful to distinguish between similar elements

&lt;!-- Will match --&gt;
&lt;button&gt;Visible button&lt;/button&gt;

&lt;!-- Will not match any of these --&gt;
&lt;button style=&quot;display: none&quot;&gt;Invisible&lt;/button&gt;
&lt;button style=&quot;visibility: hidden&quot;&gt;Hidden&lt;/button&gt;
&lt;button hidden&gt;Hidden&lt;/button&gt;

Text Content Matching

article:has-text("Bromate") Matches elements containing specified text somewhere inside

&lt;!-- Will match --&gt;
&lt;article&gt;
  &lt;div&gt;Testing with Bromate&lt;/div&gt;
  &lt;p&gt;Some other content&lt;/p&gt;
&lt;/article&gt;

&lt;!-- Will not match --&gt;
&lt;div&gt;Bromate&lt;/div&gt;

Multiple Text Conditions

button:has-text("Log in"), button:has-text("Sign in") Matches elements that satisfy any of the text conditions

&lt;!-- Both will match --&gt;
&lt;button&gt;Log in&lt;/button&gt;
&lt;button&gt;Sign in&lt;/button&gt;

&lt;!-- Will not match --&gt;
&lt;button&gt;Register&lt;/button&gt;
&lt;a&gt;Log in&lt;/a&gt;

Element Containment

article:has(div.promo) Returns elements that have matching children

&lt;!-- Will match --&gt;
&lt;article&gt;
  &lt;div class=&quot;promo&quot;&gt;Special offer!&lt;/div&gt;
  &lt;p&gt;Content&lt;/p&gt;
&lt;/article&gt;

&lt;!-- Will not match --&gt;
&lt;article&gt;
  &lt;div&gt;No promo here&lt;/div&gt;
&lt;/article&gt;

Nth Element Selection

:nth-match(:text("Buy"), 3) Matches the nth occurrence of an element (1-based index)

&lt;!-- Third &quot;Buy&quot; button will match --&gt;
&lt;div&gt;
  &lt;button&gt;Buy&lt;/button&gt;
  &lt;button&gt;Buy&lt;/button&gt;
  &lt;button&gt;Buy&lt;/button&gt;  &lt;!-- This one matches --&gt;
  &lt;button&gt;Buy&lt;/button&gt;
&lt;/div&gt;

Advanced Layout Selectors

Above/Below

button:above(.footer) Matches buttons that are above the footer element

&lt;!-- Will match if positioned above --&gt;
&lt;button&gt;Click me&lt;/button&gt;
&lt;div class=&quot;content&quot;&gt;Some content&lt;/div&gt;
&lt;footer class=&quot;footer&quot;&gt;Footer content&lt;/footer&gt;

input:below(.header) Matches inputs that are below the header element

&lt;!-- Will match if positioned below --&gt;
&lt;header class=&quot;header&quot;&gt;Header content&lt;/header&gt;
&lt;div class=&quot;content&quot;&gt;
  &lt;input type=&quot;text&quot; /&gt;  &lt;!-- This will match --&gt;
&lt;/div&gt;

Left/Right Positioning

button:right-of(.sidebar) Matches buttons positioned to the right of the sidebar

&lt;!-- Will match if positioned to the right --&gt;
&lt;div class=&quot;layout&quot;&gt;
  &lt;div class=&quot;sidebar&quot;&gt;Menu&lt;/div&gt;
  &lt;button&gt;Action&lt;/button&gt;  &lt;!-- This will match --&gt;
&lt;/div&gt;

Near Elements

button:near(.card, 100) Matches buttons within 100 pixels of a card element

&lt;!-- Will match if within 100px --&gt;
&lt;div class=&quot;card&quot;&gt;
  Product details
  &lt;button&gt;Add to cart&lt;/button&gt;
&lt;/div&gt;

&lt;!-- Will not match if beyond 100px --&gt;
&lt;div class=&quot;card&quot;&gt;Product details&lt;/div&gt;
&lt;div class=&quot;spacer&quot;&gt;&lt;/div&gt;
&lt;button&gt;Add to cart&lt;/button&gt;

React Component Properties

Multiple Property Matching

_react=BookItem[author *= "king" i][year = 1990] Matches React components with multiple property conditions

// Will match
&lt;BookItem author=&quot;Stephen King&quot; year={1990} /&gt;

// Will not match
&lt;BookItem author=&quot;Stephen King&quot; year={1991} /&gt;
&lt;BookItem author=&quot;John Doe&quot; year={1990} /&gt;

Nested Property Values

_react=[some.nested.value = 12] Matches components with specific nested property values

// Will match
&lt;Component some={{ nested: { value: 12 }}} /&gt;

// Will not match
&lt;Component some={{ nested: { value: 13 }}} /&gt;

Property Pattern Matching

_react=BookItem[author = /Steven(\\s+King)?/i] Matches components where properties match a regex pattern

// All of these will match
&lt;BookItem author=&quot;Steven&quot; /&gt;
&lt;BookItem author=&quot;Steven King&quot; /&gt;
&lt;BookItem author=&quot;steven king&quot; /&gt;

// Will not match
&lt;BookItem author=&quot;Stephen King&quot; /&gt;

​Text Matching

​Basic Text Matching

​Exact Text Matching

​Text Pattern Matching

​Layout-Based Selectors

​Position-Based

​Distance Specification

​Element State and Visibility

​Nested Elements

​Has-Text with Specific Elements

​Parent-Child Relationships

​Multiple Conditions

​XPath Selectors

​Label and Form Controls

​Framework-Specific Selectors

​React Components

​Vue Components

​Testing-Specific Attributes

​CSS Selectors

​Basic CSS

​CSS with Text Matching

​CSS with Has Selector

​Nth Match Selectors

​Chaining Selectors

​Basic Chaining

​Intermediate Matches

​Layout Combinations

​Role-Based Selectors

​Union Selectors

​CSS Pseudo-Classes

​Visibility Matching

​Text Content Matching

​Multiple Text Conditions

​Element Containment

​Nth Element Selection

​Advanced Layout Selectors

​Above/Below

​Left/Right Positioning

​Near Elements

​React Component Properties

​Multiple Property Matching

​Nested Property Values

​Property Pattern Matching