JMeter CSS JQuery Extractor
Jmeter

JMeter CSS JQuery Extractor

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 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,

Inspect Web Page Element 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 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!

CSS JQuery Extractor

Configuration

JMeter CSS JQuery Extractor 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.

JMeter CSS JQuery Post Processor

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 Homepage 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.

Let’s place a CSS JQuery Extractor under the homepage sampler.

HTTP Request Homepage 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

Petstore 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.

Http Request Product Category Configured HTTP Request sampler in JMeter

Finally, let’s add a Debug Sampler to display JMeter variables during the run.

Results First Run Debug Sampler with JMeter Variables=true

and a View Results Tree listener to see the results.

View Results Tree View Results Tree UI Listener

Okay, we’re ready to run our script!

Results First Run First Run

On the first run we got:

path=/actions/Catalog.action;...?viewCategory=&categoryId=CATS

Results Second Run Second Run

And, on the second run we got something different:

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!

Performance

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)

By - CTO.
Tags: Jmeter Xml Html Variable Extractor Jquery Expression Css Selector Post Processor