Property / CSS Selector

When configuring notifications, you can create rules around data in the response body. You may specify JsonPath expression for JSON response:

json-path-example

or specify CSS selector for HTML response:

css-selector-example

For more JsonPath and CSS Selector examples and syntax details, check the reference doc below.

JsonPath Examples

Given the JSON response

{
    "store": {
        "book": [
            {
                "category": "reference",
                "author": "Nigel Rees",
                "title": "Sayings of the Century",
                "price": 8.95
            },
            {
                "category": "fiction",
                "author": "Evelyn Waugh",
                "title": "Sword of Honour",
                "price": 12.99
            },
            {
                "category": "fiction",
                "author": "Herman Melville",
                "title": "Moby Dick",
                "isbn": "0-553-21311-3",
                "price": 8.99
            },
            {
                "category": "fiction",
                "author": "J. R. R. Tolkien",
                "title": "The Lord of the Rings",
                "isbn": "0-395-19395-8",
                "price": 22.99
            }
        ],
        "bicycle": {
            "color": "red",
            "price": 19.95
        }
    },
    "expensive": 10
}

JsonPath (click link to try)	Result
store.bicycle.color	`red`
store.book.length()	`4` (the length of book list)
store.book[2]	The third book
store.book[-2]	The second to last book
store.book[0,1]	The first two books
store.book[:2]	All books from index 0 (inclusive) until index 2 (exclusive)
store.book[1:2]	All books from index 1 (inclusive) until index 2 (exclusive)
store.book[-2:]	Last two books
store.book[2:]	Book number two from tail
store.book[*].author	The authors of all books
.author	All authors
store.*	All things, both books and bicycles
store..price	`[8.95, 12.99, 8.99, 22.99, 19.95]` (the price of everything)
store.book[?(@.isbn)]	All books with an ISBN number
store.book[?(@.price < 10)]	All books in store cheaper than 10
store.book[?(@.price <= $['expensive'])]	All books in store that are not "expensive"
store.book[?(@.author =~ /.*REES/i)]	All books matching regex (ignore case)
.*	Give me every thing

Operators

Operator	Description
`@`	The current node being processed by a filter predicate.
`*`	Wildcard. Available anywhere a name or numeric are required.
`..`	Deep scan. Available anywhere a name is required.
`.<name>`	Dot-notated child
`['<name>' (, '<name>')]`	Bracket-notated child or children
`[<number> (, <number>)]`	Array index or indexes
`[start:end]`	Array slice operator
`[?(<expression>)]`	Filter expression. Expression must evaluate to a boolean value.

Functions

Functions can be invoked at the tail end of a path - the input to a function is the output of the path expression. The function output is dictated by the function itself.

Function	Description	Output
min()	Provides the min value of an array of numbers	Double
max()	Provides the max value of an array of numbers	Double
avg()	Provides the average value of an array of numbers	Double
stddev()	Provides the standard deviation value of an array of numbers	Double
length()	Provides the length of an array	Integer
sum()	Provides the sum value of an array of numbers	Double

Filter Operators

Filters are logical expressions used to filter arrays. A typical filter would be [?(@.age > 18)] where @ represents the current item being processed. More complex filters can be created with logical operators && and ||. String literals must be enclosed by single or double quotes ([?(@.color == 'blue')] or [?(@.color == "blue")]).

Operator	Description
==	left is equal to right (note that 1 is not equal to '1')
!=	left is not equal to right
<	left is less than right
<=	left is less or equal to right
>	left is greater than right
>=	left is greater than or equal to right
=~	left matches regular expression [?(@.name =~ /foo.*?/i)]
in	left exists in right [?(@.size in ['S', 'M'])]
nin	left does not exists in right
subsetof	left is a subset of right [?(@.sizes subsetof ['S', 'M', 'L'])]
anyof	left has an intersection with right [?(@.sizes anyof ['M', 'L'])]
noneof	left has no intersection with right [?(@.sizes noneof ['M', 'L'])]
size	size of left (array or string) should match right
empty	left (array or string) should be empty

CSS Selector Examples

Given an HTML response body, you may use a CSS selector to extract text from the HTML element. Below are some commonly used CSS selectors:

Example	Description
.intro	Selects all elements with class="intro"
.name1.name2	Selects all elements with both name1 and name2 set within its class attribute
.name1 .name2	Selects all elements with name2 that is a descendant of an element with name1
#firstname	Selects the element with id="firstname"
p	Selects all `<p>` elements
p.intro	Selects all `<p>` elements with class="intro"
div p	Selects all `<p>` elements inside `<div>` elements
p:first-child	Selects every `<p>` element that is the first child of its parent
p:last-child	Selects every `<p>` element that is the last child of its parent
p:nth-child(2)	Selects every `<p>` element that is the second child of its parent

After the CSS selector returns the HTML elements, we'll pick the first element from the result, and extract the text field for comparison. So we recommend that you provide a CSS selector as specific as possible.

For example, if the response body is:

<html>
  <body>
    <p class="question">What is the answer to everything?</p>
    <p class="answer">42</p>
    <p class="answer ok-answer">21</p>
  </body>
</html>

By providing the CSS selector .answer, text string 42 will be extracted and compared with the target value.

Occasionally the website layout changes, which will make your CSS selector invalid. One way to detect this is to create a notification with the value has changed comparator, that way you would be able to receive a notification when the CSS selector is no longer able to find the HTML element, and respond with a fix timely.

notification-property-css-selector-value-has-changed

We currently only support extracting text string from HTML elements. If you want to extract data from the HTML element's other attributes, please contact [email protected] to file a feature request.