> OctoPerf load testing - CSS Variable Extractor documentation page. CSS Variable Extractors lets you extract variables from server responses using CSS/JQuery expressions.

Source: https://api.octoperf.com/doc/design/edit-virtual-user/action-types/post-processors/css-variable-extractor/

# CSS Variable Extractor

*CSS/JQuery* Variable Extractors lets you **extract variables from HTML responses** using [CSS/JQuery](https://www.w3schools.com/jquery/jquery_syntax.asp).

Extracting variables from HTTP response helps you make your Virtual User have a dynamic behavior. Extracted variables can be injected in Logic Actions or HTTP Request Actions.

!!! warning
    The CSS extractor consumes more CPU than most [regex extractors](https://api.octoperf.com/doc/design/edit-virtual-user/action-types/post-processors/regexp-variable-extractor/), try to use it only when relevant. Especially if you need to extract a lot of values this way.

![CSS Extractor](https://api.octoperf.com/doc/design/edit-virtual-user/action-types/post-processors/img/css.png "CSS Extractor")

| Field          | Description                                                  |
| -------------- | ------------------------------------------------------------ |
| Name           | Name of the variable created by this processor. Can be used with the `${...}` syntax like any other variable. |
| From           | This is for information purpose since this processor can only extract from **Response body**. |
| Implementation | Select the implementation between, [JSoup](https://jsoup.org/) or [Jodd](https://lagarto.jodd.org/jerry/jerry). |
| Selector       | The CSS/JQuery Selector to be used.                          |
| Attribute      | Which attribute should be extracted.                         |
| Default value  | If no value is found, the variable will be equal to this. With match number **All**, you get the default value if you do not provide an index number. |
| Match number   | Lets you choose how to deal with the processor having several results (or occurrences). Selecting **All** will change the behavior of your processor, see [the dedicated section of the regex page](https://api.octoperf.com/doc/design/edit-virtual-user/action-types/post-processors/regexp-variable-extractor/#multiple-occurrences) for more details. |

## Debug

In order to validate the results of your extraction, you can use the debug panel. 

![debug-processor](https://api.octoperf.com/doc/design/edit-virtual-user/action-types/img/debug-processor.png)

The procedure is explained on the [regex extractor page](https://api.octoperf.com/doc/design/edit-virtual-user/action-types/post-processors/regexp-variable-extractor/#debug) for both simple and multiple occurrences.

## Example

In this example we will be using the [login page from our Petstore](https://petstore.octoperf.com/actions/Account.action?signonForm=) application. Make sure to import an HAR recording of this page.

The first step will be to navigate to this page and use the **Right-click + Inspect** menu of our browser to locate the element we want to extract:

![css-copy-selector](https://api.octoperf.com/doc/design/edit-virtual-user/action-types/post-processors/img/css-copy-selector.png)

Using the **Copy selector** function we can get:

```CSS
#SearchContent > form > div > input[type=hidden]:nth-child(1)
```

We can copy this directly in our **CSS extractor** in OctoPerf, just adding on top of it that we want to extract the content of the **value** attribute:

![css-use-selector](https://api.octoperf.com/doc/design/edit-virtual-user/action-types/post-processors/img/css-use-selector.png)

Now based on this we could also rework our CSS Query to something simpler like:

```css
input[name='_sourcePage']
```

We would then pick only inputs named `_sourcePage` and this would be less dependent on the page structure. So provided the name is unique to this parameter we can get a more resilient expression if the application ever changes.