Skip to main content

Run JavaScript on the tested page

You can inject JavaScript code into the pages you test, for example to:

  • Set a cookie that hides a GDPR notice
  • Wait for a button to appear and click it
  • Setting a localStorage key that controls A/B tests
  • Scroll down the page to load lazy loaded images

Read more about using script injection to script user journeys.

Writing and testing your script​

The easiest way to make sure your script works is to open your page and run the script in the Chrome DevTools console.

If you use the waitFor and waitForElement functions you'll also need to inject this file into the console.

How to set up script injection​

In the page settings, expand Advanced Settings and then select the Run JavaScript option.

Run JavaScript setting

Click Add JavaScript Snippet and either select a previously created snippet or Create a new one.

JavaScript snippet dialog

Pick a name for your snippet and write the code you want to run. Then click Create and save your page settings.

caution

The script runs as soon as the page starts loading, so for example the body tag won't be present yet at that point. Use logic like await waitForElement("body") if you want to interact with page content.

Run JavaScript form

Example scripts​

DebugBear provides a couple of common example scripts that you can use as a basis for your own code. Click on Show Code Examples to view them.

Show code examples button

Select the script you want to use from the dropdown, then click Use this code snippet to prefill the form.

Example script

The following examples are currently available:

  • Set cookie/localStorage
  • Accept cookie banner
  • Scroll down the page
  • Custom timing metrics
  • On-page user flow
  • Hide loading spinner

Helper functions​

The injected scripts run as soon as the document starts to load. If you want to interact with the DOM you'll need to first wait for the element to be rendered.

The waitForElement and waitFor helper functions make this easier, and are automatically available when running your scripts on DebugBear.

Use this file when testing your scripts in your browser's console.

waitForElement​

This function returns a Promise that resolves when a given DOM element has been found. You can use async/await in your script, like this:

const btn = await waitForElement("#open-modal-button")
btn.click()

The containingText parameter lets you find an element whose textContent includes the given value. This is useful when the element doesn't have a unique selector.

const link = await waitForElement("a", { containingText: "My Account" })
link.click()

You can also pass the additional timeout and checkInterval options, which are described below.

waitFor​

waitFor is a more generic version of waitForElement. It waits until a function returns a truthy value.

await waitFor(() => location.href.includes("/home"))
performance.mark("Navigated to home page")

waitFor works by checking the condition every 25ms. If the condition still isn't true after 15s then the promise is rejected.

You can customize this behavior using timeout and checkInterval.

await waitFor(() => document.title.inclues("Homepage"), {
  timeout: 30000,
  checkInterval: 500
})

Waiting for a condition can affect page performance if the condition is compute-intensive. If that's the case consider increasing the checkInterval.

Hiding spinners and animations​

Chrome takes a screenshot every time the UI is updated, and if there are frequent UI updates it can hit the maximum of 450 screenshots.

This is often caused by spinners or other animated elements.

Too many paints

To avoid this and ensure the whole rendering process is captured you can disable the spinner. For example, you might want to run this script to hide it:

await waitForElement("body")
const style = document.createElement("style")
style.innerHTML = `.spinner { display: none }`
document.documentElement.appendChild(style)

Or, maybe you can disable animations:

style.innerHTML = `*, *:before, *:after { animation: none !important; }`