我想如果你在这里，你可能已经访问了我们关于变量提取的JMeter系列：
- XPath Extractor：使用XPath Expressions从XML响应中提取内容，
- Regexp Extractor：使用正则表达式提取内容，
- 和Json Path Extractor：使用JsonPath的提取器内容。
还有另一种从服务器响应中提取内容的方法：使用CSS选择器或JQuery选择器。
让我们看看我们如何利用选择器来使用JMeter 提取变量！
了解选择器
由于JMeter的CSS JQuery Extractor支持两种语法，让我们简要解释每一种并指出关键差异。
CSS选择器
CSS选择器是使用以下语法选择元素的模式：
| 选择 | 例 | 选择 |
|---|---|---|
.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选择器
JQuery选择器可以像CSS选择器一样，但使用不同的语法：
| 选择 | 例 | 选择 |
|---|---|---|
* |
$("*") |
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 |
看看CSS Selectors的不同之处？这只是一个品味问题。使用您最熟悉的语法。
但是，有没有办法轻松获取网页中任何给定元素的CSS选择器？是!
Chrome - 复制CSS选择器
Google Chrome在devtools栏中有一项功能，可让您轻松复制网页中任何元素的css选择器。
让我们看看如何在我们的Petstore演示中做到这一点。
Petstore主页
现在，让我们尝试让CSS选择器中的FISH HTML链接：
- 右键单击FISH链接并选择
Inspect，
检查petstore主页内的FISH链接
它应该打开底部的Chrome开发者工具栏。
- 在源代码的HTML代码中，右键单击元素并选择
Copy > Copy Selector菜单。
复制元素CSS选择器
它应该将选择器复制到剪贴板：#SidebarContent > a:nth-child(1)。此选择器选择侧栏中的第一个链接。
大！现在我们知道选择器是什么以及如何轻松地从网页中提取它们。现在是时候看看JMeter了！
CSS JQuery Extractor
组态
JMeter的CSS JQuery Extractor UI
JMeter的CSS JQuery Extractor具有以下特定配置：
- 参考名称：结果变量的名称，可在后续采样器中使用，具有语法
${foo}（输入时foo）， - CSS / JQuery Expression：基本上是我们之前见过的选择器，
- 属性：要提取的元素的属性。示例：
href选择链接时<a href="...">Link</a>， - 匹配Nr：像其他Post处理器一样，
0随机一个，否则索引（从1开始）当多个值可用时， - 默认值：在无法提取内容的情况下放入变量的值。
配置非常类似于XPath，Regexp或Json Extractors。
在哪里放置它
CSS JQuery Extractor是一种JMeter Post处理器。这意味着它必须作为采样器的子项放置。然后针对采样器的采样结果执行提取器。
没有得到它？让我们看一个具体的例子。
这里的提取器位于主页采样器下，这是一个HTTP请求。
现在让我们看看Petstore Demo的具体用法。
具体例子
出于此示例的目的，我们将使用Petstore Demo来模拟以下脚本：
- 访问主页：我们稍后会使用回复，
- 从侧边栏中提取随机链接，
- 访问从侧栏中提取的产品类别页面。
访问主页
第一步是使用HTTP请求查询主页。
HTTP请求到petstore主页
我们将使用收到的服务器响应使用CSS / JQuery Extractor从侧边栏中提取随机链接。
提取随机链接
让我们在主页采样器下放置一个CSS JQuery Extractor。
${path}使用CSS JQuery Extractor 提取变量
在提取后，将被执行的网页取样。我们使用以下配置：
- 创建的变量名称：
path， - CSS / jQuery表达式：
#SidebarContent > a， - 属性：我们
href从链接中选择属性（这是一个相对路径）， - 匹配Nr :
0,但可以留空以获得相同的结果。
访问产品类别
产品类别页面位于类似的东西 /actions/Catalog.action?viewCategory=&categoryId=CATS
然后，我们需要使用${path}先前提取的变量添加HTTP请求以访问产品类别页面。
在JMeter中配置HTTP请求采样器
最后，让我们添加一个Debug Sampler来在运行期间显示JMeter变量。
使用JMeter Variables = true调试采样器
和一个View Results Tree监听器来查看结果。
查看结果树UI侦听器
好的，我们准备好运行我们的脚本了！
第一次运行
在第一次运行中我们得到：
path=/actions/Catalog.action;...?viewCategory=&categoryId=CATS
第二轮
而且，在第二轮，我们得到了一些不同的东西：
path=/actions/Catalog.action;...?viewCategory=&categoryId=FISH
我们设法使用CSS / JQuery Extractor模拟随机产品类别选择！
在每次运行时，提取器采用随机链接并提取其href属性。然后，我们将结果${path}变量重新注入HTTP请求。
当然，还有许多其他可能的方法来使用这个提取器。这只是一个简单的例子，可以为您铺平道路，让您快速入门。随意从您自己的JMeter玩它！
性能
与XPath Extractor非常相似，CSS / JQuery提取器也存在同样的缺陷：
- 它通常比Regexp Extractor慢得多，因为它需要将页面转换为DOM文档，
- CPU和内存消耗很高，这使得它不适合重负载测试（但功能测试很好！）
- 使用正则表达式可以轻松执行大多数变量提取。
无论如何，JMeter提供了这种替代方案。在急于使用CSS JQuery Extractor之前，请确保仔细考虑其他选项。