Run JavaScript before change detection

You can run JavaScript before performing change detection and filters/triggers.

If you need to fill in fields, click boxes, accept cookies etc, please use the Browser Steps interface tab

Under Watch Settings > Request > Execute JavaScript before change detection

Available in 0.39.17

Requires Playwright driver enabled, or is included in the paid subscriptions

Examples:

Fill in the search box and click submit

At http://www.quotationspage.com/random.php ( shared watch import link https://changedetection.io/share/qvQ8NFFxQsMa )

document.querySelector("input[name=homesearch]").value="cause and effect";
document.querySelector("input[name=startsearch]").click();

Login to some portal with username and password

document.querySelector("input[name=username]").value="big-john";
document.querySelector("input[name=password]").value="secret";
document.querySelector("input[type=submit]").click();

Perform a Google Search

document.querySelector("input[type=text]").value="stripes on a tiger never fade";
document.querySelector("input[value='Google Search']").click();

Accept or Reject cookie/data

Basically just search for the <span> containing Reject all and click it

document.evaluate("//span[contains(., 'Reject all')]", document, null, XPathResult.ANY_TYPE, null ).iterateNext().click();

Accept cookie alert info

https://edition.cnn.com ( shared watch import link https://changedetection.io/share/-ANRwLTBCNMa )

document.getElementById('onetrust-accept-btn-handler').click();

Web page change alerts for BestBuy products

BestBuy will often ask for a 'local' or 'country' store, just append &intl=nosplash to the end of the url to go directly to the site and bypass the country selection. https://changedetection.io/share/pkhEFXeb8Cka

In that above shared link, we will be watching BestBuy for changes in GTX 4090 graphic card prices

Or set these

"Execute JavaScript before change detection" (If you get the country flag/location request)

setInterval(function(){
    document.evaluate("//div[@lang='en']//a[@class='us-link']", document, null, XPathResult.ANY_TYPE, null ).iterateNext().click();
},1000);

and "Wait seconds before extracting text" to around 5

If the page contains more then 3 products, you will also need to execute JS to scroll the page if you wish for it to properly check stock.

var scrollInterval = setInterval(function() {
    var element = document.querySelector("div.footer");
    if (element) { 
        // element found
        clearInterval(scrollInterval);
        element.scrollIntoView();
    } else if((document.documentElement.scrollTop + window.innerHeight) != document.documentElement.scrollHeight) { 
        // no element -> scrolling
        notChangedStepsCount = 0;
        document.documentElement.scrollTop = document.documentElement.scrollHeight;
    } else if (notChangedStepsCount > 20) { 
        // no more space to scroll
        clearInterval(scrollInterval);
    } else {
        // waiting for possible extension (autoload) of the page
        notChangedStepsCount++;
    }
}, 50);

"CSS/JSON/XPATH Filter" to .shop-sku-list-item (to just extract the product prices and price+description)

"Remove Elements" (optional, to cut down noise) to

.image-link
.embedded-badge
.variation-info
.sku-list-item-compare-checkbox