Skip to main content

Injecting Page Scripts

You can run JavaScript code snippets inside the tested page when the page starts loading.

Some use cases:

  • 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

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​

You can either set up scripts to inject when creating a page, or later on by clicking "edit" when viewing the page results.

Edit the page

Click Show advanced and then expand the On-page Scripts and User Interaction section.

Configuring advanced page settings

Select or create a script

Click New to create a new script, or click Edit to update one.

Configuring injected JavaScript code on DebugBear

You'll then see a modal where you can enter your code snippet.

Injected script content

Save your page changes

After saving the script, click Update to save the page.

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.

Injected script content

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; }`