I guess if you are here, chances are you have already visited our JMeter series on variable extraction:
There is another way to extract content from a server response: Using CSS Selectors or JQuery Selectors.
Let’s see how we can leverage selectors to extract variables with JMeter!
Understanding Selectors
As JMeter’s CSS JQuery Extractor supports both syntax, let’s briefly explain each and point the key differences.
CSS Selectors
CSS Selectors are patterns to select elements with the following syntax:
Selector |
Example |
Selects |
.class |
.intro |
All elements with class="intro" |
#id |
#firstname |
The element with id="firstname" |
* |
* |
All elements |
element |
p |
All <p> elements |
element,element |
div, p |
All <div> elements and all <p> elements |
element element |
div p |
All <p> elements inside <div> elements |
JQuery Selectors
JQuery Selectors can just do the same as CSS Selectors, but with a different syntax:
Selector |
Example |
Selects |
* |
$("*") |
All elements |
#id |
$("#lastname") |
The element with id="lastname" |
.class |
$(".intro") |
All elements with class="intro" |
.class,.class |
$(".intro,.demo") |
All elements with the class "intro" or "demo" |
element |
$("p") |
All <p> elements |
el1,el2,el3 |
$("h1,div,p") |
All <h1>, <div> and <p> elements |
See the difference with CSS Selectors? It’s only a matter of taste. Use the syntax you feel most comfortable with.
But, is there a way to easily get the CSS Selector of any given element in a web page? Yes!
Chrome - Copy CSS Selector
Google Chrome has a feature within the devtools bar which allows you to easily copy the css selector of any element within a web page.
Let’s see how to do this on our Petstore Demo.
Petstore Homepage
Now, let’s try to get the CSS Selector of the FISH HTML link:
- Right-click on the FISH link and select
Inspect
,
Inspecting the FISH link within the petstore homepage
It should open the Chrome Developer Tools bar at the bottom.
- Within the HTML code from source tag, Right-click on the element and choose
Copy > Copy Selector
menu.
Copy Element CSS Selector
It should copy the selector to clipboard: #SidebarContent > a:nth-child(1)
. This selector selects the first link within the sidebar.
Great! Now we know what selectors are and how to extract them from web pages easily. It’s time to take a look at JMeter!
Configuration
JMeter’s CSS JQuery Extractor UI
JMeter’s CSS JQuery Extractor has the following specific configuration:
- Reference Name: name of the resulting variable, available in subsequent samplers with the syntax
${foo}
(when entering foo
),
- CSS / JQuery Expression: basically the selectors we’ve seen just before,
- Attribute: the attribute of the element to extract. Example:
href
when selecting a link like <a href="...">Link</a>
,
- Match Nr: like other Post Processors,
0
for random one, otherwise the index (starting from 1) when multiple values available,
- Default Value: the value to put into the variable in case the content could not be extracted.
The configuration is really pretty similar to XPath, Regexp or Json Extractors.
Where to place it
CSS JQuery Extractor is a kind of JMeter Post Processors. It means it must be placed as a child of a Sampler. The extractor is then executed against the sample result of the sampler.
Didn’t got it? Let’s see a concrete example.
Here the extractor is under the homepage sampler, which is an HTTP Request.
Let’s see now a concrete usage on our Petstore Demo.
Concrete Example
For the purpose of this example, we take our Petstore Demo to simulate the following script:
- Visit homepage: we’ll use the response later,
- Extract a random link from the sidebar,
- Visit the product category page extracted from the sidebar.
Visit Homepage
The first step is to query the homepage using an HTTP Request.
HTTP Request to the petstore homepage
We’ll use the received server response to extract a random link from the sidebar using the CSS / JQuery Extractor.
Extract Random Link
Let’s place a CSS JQuery Extractor under the homepage sampler.
Extracting ${path}
variable using CSS JQuery Extractor
The extractor will be executed after the homepage sampler. We use the following configuration:
- Name of created Variable:
path
,
- CSS/JQuery Expression:
#SidebarContent > a
,
- Attribute: we select the
href
attribute from the link (which is a relative path),
- Match Nr:
0
, but can be left empty for the same result.
Visit Product Category
Product Category Page located at something like /actions/Catalog.action?viewCategory=&categoryId=CATS
Then, we need to add an HTTP Request to visit the product category page using the ${path}
variable previously extracted.
Configured HTTP Request sampler in JMeter
Finally, let’s add a Debug Sampler to display JMeter variables during the run.
Debug Sampler with JMeter Variables=true
View Results Tree UI Listener
Okay, we’re ready to run our script!
First Run
On the first run we got:
1
|
path=/actions/Catalog.action;...?viewCategory=&categoryId=CATS
|
Second Run
And, on the second run we got something different:
1
|
path=/actions/Catalog.action;...?viewCategory=&categoryId=FISH
|
We managed to simulate a random product category selection using the CSS / JQuery Extractor!
On each run, the extractor takes a random link and extracts its href
attribute. We then reinject the resulting ${path}
variable into an HTTP Request.
Of course, there are many other possible ways to use this extractor. That’s just a simple example to pave the way and get you started quickly. Feel free to play with it from your own JMeter!
Pretty much like the XPath Extractor, The CSS / JQuery extractor suffers the same flaws:
- It’s usually much slower than a Regexp Extractor because it needs to convert the page into a DOM document,
- CPU and memory consumption are high, which makes it unsuitable for heavy load tests (but for functional testing it’s fine!)
- Most variable extractions can be easily performed using Regular Expressions.
Anyway, JMeter offers this alternative. Just make sure to carefully consider other options before rushing to use the CSS JQuery Extractor.
Learning JMeter
Want to improve your JMeter skills? There are some great JMeter Books out there! (not kidding)