About GitLabAcceptable Ads

hide-if-matches-computed-xpath

The hide-if-matches-computed-xpath hides specific element whose class name or ID changes in runtime through a dynamically-built XPath query.

This snippet takes as a first parameter an XPath selector that's incomplete, due to a placeholder in the form {{}}. The next parameters, searchQuery and searchRegex, tell the snippet how to fill the placeholder.

You can use hide-if-matches-computed-xpath to:

  • Hide elements whose classes or IDs are randomized when a page refreshes

  • Hide elements that write flexible queries to take stylesheets, inline scripts, and regex into account

  • Hide elements that change at runtime

Always use double quotes instead of single quotes inside selectors. Though both are valid, eyeo uses single-quotes to enclose the selector as part of the filter syntax.

Parameters

Name
Description
Mandatory

query

The template XPath query that targets the element to hide. Use {{}} to dynamically insert into the query.

Yes

searchQuery

The XPath query that searches for an element to be used alongside searchRegex.

Yes

searchRegex

The regular expression used to extract text from the innerHTML of the element that matches searchQuery. The extracted text gets injected into the query.

Yes

waitUntil

An optional parameter that can be used to delay the running of the snippet until the given state is reached. Accepts loading, interactive, complete, load or any event name.

No

Filter examples

The following table lists examples that use the hide-if-contains-and-matches-style snippet:

Filter
Result

hide-if-matches-computed-xpath '//[@class="{{}}"]' '//div[@id="target"]' '/./'

Hides all elements with a class whose name matches any string in the div with an id="target".

hide-if-matches-computed-xpath '//[@class="{{}}"]/child::text()[contains(.,"Sponsored")]' '//div[@id="target"]' '/./'

Hides all elements that contain the text Sponsored with a class whose name matches any string in the div with an id="target".

hide-if-matches-computed-xpath '//[@class="{{}}"]/child::text()[contains(.,"Sponsored")]' '//div[@id="target"]' '/test(.)test/' interactive

Hides all elements that:

  • contain the text Sponsored

  • with a class whose name matches any string that starts with test, followed by any sequence of characters

  • end with test in the div with an id="target"

This filter runs when the document state is interactive.

Debugging

The following table contains messages you'll find useful during debugging:

Message
When the error occurs
Definition

No query or searchQuery provided

Right after the snippet fires

Mandatory parameters are missing; double check your filter.

Started searching for <<searchQuery>

When the snippet begins to look for the searchQuery

A node is searched for to find the string that matches the regular expression.

Found node: <<searchNode>>

When a node matches the searchQuery

A node element was found that will be used to find the string that matches the regular expression.

Searching in <<searchNode.innerHTML>>

After searchQuery finds a matching node

A node search was matched by the searchQuery for a string that matches the regular expression to fill the XPath query.

Matched search query: <<foundText>>

After comparing the text inside the <<searchNode>> against the regular expression

A string was found that matches the regular expression. This string will be used to fill the XPath query.

Starting hiding elements that match query: <<computedQuery>>

After the placeholder in the XPath query has been replaced with the <<foundText>>

The snippet has filled the placeholder and is looking for HTML elements that match the computed XPath query.

Matched: <<HTML element>> for selector: <<query>>

Right after an HTML element has been matched and hidden

The snippet has successfully matched and hidden a HTML element.

Other resources

Last updated