Skip to main content

Browser: Run JavaScript

 

For some background, the Browser package is most commonly used for opening a web-browser session to be used in conjunction with the Recorder package....but did you know it can also be used to inject JavaScript into a page for execution? In this tutorial, we'll look at how to use a Self-Executing Anonymous Function to inject a CDN-hosted JavaScript source to the head of the DOM and then execute it. Sound confusing? Don't worry, let's break it down together.

Oh, and while this is a serious topic - the bot we'll be building shows a confetti explosion on the page...a fun way to add some pizazz to your next automation demo.

 

 

Having a Window to Practice With

 

We first need to have a browser session for our Browser: Run JavaScript to interact with. If you have a window open already, that's fine, but the first action we'll add here for the tutorial is a Browser: Open action to launch Google Chrome and open Google.com

 

 

Adding a Delay

 

For our JavaScript Injection to work correctly and be able to interact appropriately with the page, we do want to add a slight delay here to wait for the page to load. For the purposes of this exercise (and as a result of some of my testing) - I've set this at 2 seconds. Alternatively, you could consider using a Wait action to delay until certain elements on the page-to-be-loaded have appeared (probably the safest to execute this kind of approach).

Note: If you're getting an error in your bot/it's not running the confetti, you may try extending this delay or switching to the "Wait for Element" approach. 2 seconds of a delay seemed to work pretty reliably for me, but we're all on different internet connections, so your results may vary slightly.

 

 

Self-Executing Anonymous Function

 

A Self-Executing Anonymous Function is a JavaScript function that is executed as soon as it is defined. Anonymous, because the function never needs to be given a name. We'll use it here to create a small function that will:

  • Create a "Script" element in the DOM
  • Set the source of the newly created Script element to the JavaScript code we want to inject
    • In this case, a library made available through a CDN - but could be some other path to a JS file you've created that is accessible to all of your bot runners.
  • Append the script element to the head of the document

For the purposes of simplicity, we've just put this into the Manual Input field of the Browser: Run JavaScript action. Alternatively, it could be written into a JS file and referenced.

The JS we're loading is minified which should make for faster loading/smaller file. We'll be using Canvas Confetti for this example, but the same principles could apply with any JS library.

(function(){
    var script = document.createElement("script");  // create a script DOM node
    script.src = "https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js";  // set its src to the provided URL

    document.head.appendChild(script);  // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}());

 

Delay...Again

 

Just like with the page load event, we need to add a slight delay here to ensure that the JS library we're injecting has time to be injected into the page. In this case, we're using a freely available CDN, so we do want to allow for a small amount of time for that JS file to load. The bot doesn't otherwise know to wait on execution, so this delay gives the automation some time for that library to load.

Note: Same point as above on timing. If you're getting an error, you may slightly extend this delay time as your local session would need to fully download the JS from that CDN...which may/may not take longer than 2 seconds.

 

Confetti Anyone?

 

At this point, we're ready to trigger the Confetti! In this case, we'll call the Confetti function available in the library we loaded in our Self Executing Anonymous Function. You can check out the full documentation for Canvas Confetti (it does some cool stuff beyond just confetti) to understand the available functions, but we'll be using the confetti function with the following parameters:

confetti({
  particleCount: 200,
  spread: 200,
  origin: { y: 0.5 }
});

 

Conclusion and Takeaways

 

So - would anyone really use this in production? Probably not. But the principles here apply to how Browser: Run JavaScript can be used to inject any custom functions/scripts into your pages and executed by a bot. So as funny of an example as this was, the principle is sound - being able to execute JavaScript from within a page to enable your automation to execute quickly, invoke 3rd party or custom functions, and manipulate a web application's interface/data is an extremely powerful capability.

The functionality doesn't stop here though, you can even use JavaScript for interacting with objects on a page to perform button clicks, select items from drop-downs, sort-tables, etc.

So what will you automate with the injection of JavaScript into a page?  

Thank you for this.  It helped me get around the issue I was facing with a fixed element at the top of the page with a z-index: 999 hiding a button that the bot was attempting to click… the following code was used for my injection script:

(function() {
    let script = document.createElement("script");
    script.innerHTML = `function removeOverlays() {
        let elements = document.body.querySelectorAll("lstyle*='z-index']");

        if (elements) {
            elements.forEach(element => { element.style.display = "none"; });
        }
    }`;
    document.body.appendChild(script);
}());

Then a simple call to removeOverlays() removed that element and made the button available to the bot runner to be able to click!

I create a function in browser run java script action and now i want to pass some parameter and call this function 

please tell how to do

I create a function in browser run java script action and now i want to pass some parameter and call this function 

You’d need to write the javascript function out to file, then use Import Existing File instead of manual input - that will enable you to use variables (you’d just need to write the variables out when writing the javascript function to file

Reply


Terms & ConditionsCookie settings