You can run JavaScript code snippets inside the tested page when the page starts loading.
Some use cases:
Read more about using script injection to script user journeys.
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.
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.
Select or create a script
Click New to create a new script, or click Edit to update one.
You'll then see a modal where you can enter your code snippet.
Save your page changes
After saving the script, click Update to save the page.
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.
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
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
.
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.
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; }`