The CSS/JQuery Extractor is the unsung hero of HTML page correlation. If you have ever written a CSS selector or used jQuery in your frontend work, you already know the syntax. It is like the JSON Extractor but for HTML -- it understands the DOM structure rather than treating HTML as raw text.
Consider a form page where you need to extract a CSRF token from a hidden input field. With regex, you write something like name="_csrf" value="(.+?)". That works until the developer changes the attribute order to value="abc" name="_csrf" or adds a class attribute between name and value. With the CSS Extractor, you write input[name=_csrf] and extract the value attribute. The HTML structure can change all it wants -- as long as there is an input with name="_csrf", your extraction works.
| Field | Purpose | Example |
|---|---|---|
| CSS/JQuery Expression | CSS selector to find the element | input[name=_csrf] |
| Attribute | Which HTML attribute to extract | value (leave empty for text content) |
| Match No. | Which match (same as regex) | 1 |
| Default | Fallback value | NOT_FOUND |
# Extract CSRF token from hidden input:
# HTML: <input type="hidden" name="_csrf" value="abc123" />
# Selector: input[name=_csrf]
# Attribute: value
# Result: abc123
# Extract token from meta tag:
# HTML: <meta name="csrf-token" content="xyz789" />
# Selector: meta[name=csrf-token]
# Attribute: content
# Result: xyz789
# Extract link href:
# HTML: <a class="btn-primary" href="/checkout/ORD-555">Continue</a>
# Selector: a.btn-primary
# Attribute: href
# Result: /checkout/ORD-555
# Extract text content from an element:
# HTML: <span id="welcome-msg">Hello, Priya!</span>
# Selector: span#welcome-msg
# Attribute: (leave empty)
# Result: Hello, Priya!
# Extract from a specific table cell:
# HTML: <table id="orders"><tr><td class="order-id">ORD-123</td>...</tr></table>
# Selector: table#orders td.order-id
# Attribute: (leave empty)
# Result: ORD-123
# Extract from nth element:
# Selector: div.product-card:nth-of-type(3) span.price
# Attribute: (leave empty)JMeter 5.0 introduced the Boundary Extractor, and it is stupidly simple. You just give it a left boundary and a right boundary -- no regex, no JSONPath, no CSS selectors. It finds the text between them. Think of it as the "I do not want to learn regex" option. And honestly, for simple extractions, it works great.
# Response: <input type="hidden" name="_csrf" value="aB3dEf7Gh" />
# Left Boundary: name="_csrf" value="
# Right Boundary: "
# Variable Name: csrf_token
# Result: ${csrf_token} = aB3dEf7Gh
# Another example:
# Response: {"token":"eyJhbGci.abc.xyz","expiresIn":3600}
# Left Boundary: "token":"
# Right Boundary: "
# Result: eyJhbGci.abc.xyz
# It is literally just: find text between LEFT and RIGHTIn terms of performance, the Boundary Extractor is fastest because it does simple string matching. The JSON Extractor is next because it parses once then navigates. The CSS Extractor parses the HTML DOM. The Regex Extractor is slowest because of the regex engine. For tests with thousands of users, this difference can add up. Use the simplest extractor that solves your problem.
Key Point: Use CSS/JQuery Extractor for HTML pages (DOM-aware, attribute-based), Boundary Extractor for simple left-right text extraction (no regex needed), and choose based on response format and complexity.