我想如果你在這里，你可能已經訪問了我們關於變量提取的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之前，請確保仔細考慮其他選項。