Skip to main content

Useful Scripts To Use

A collection of short, ready-to-use scripts for common tasks: scrolling, removing or moving elements, changing the background and injecting your own CSS. For the full command reference, see the Scripting Engine Reference.

Two things to remember:

  • Replace the placeholder selectors with your own. Copy the current selector from the live page using the Selectors steps.

  • Inside a string, the Scripting Engine does not support single quotes '. Write all JavaScript with double quotes, as shown in every example below.


Scroll to a specific area

Scroll the Web Viewer to an exact position on the page.

Syntax: window.scrollTo(xpos, ypos)

Parameter

Type

Description

xpos

Number

The x-axis (horizontal) coordinate to scroll to, in pixels

ypos

Number

The y-axis (vertical) coordinate to scroll to, in pixels

This example scrolls to 100px right and 300px down:

runScript("""window.scrollTo(100,300)""")


Scroll by a number of pixels

Scroll the Web Viewer by a set amount relative to its current position.

Syntax: window.scrollBy(xnum, ynum)

Parameter

Type

Description

xnum

Number

Pixels to scroll along the x-axis. Positive scrolls right, negative scrolls left

ynum

Number

Pixels to scroll along the y-axis. Positive scrolls down, negative scrolls up

This example scrolls 100px right and 300px down:

runScript("""window.scrollBy(100,300)""")

How to find how many pixels to scroll

Open the page in Chrome or Edge on your computer and press F12 to open DevTools. Scroll the page to the position you want, then in the Console tab type:

window.scrollY

That returns how many pixels you have scrolled down. Use that number in your script.


Delete a specific element

Remove a single element from the page.

runScript("""document.querySelector("css_selector").remove()""")


Move an element to the body

Pull one element out and attach it directly to the page body. Useful when the element you want is buried inside other content.

runScript("""var elem = j("css_selector"); j("body").append(elem);""")

j is our built-in jQuery alias. It is available in your scripts by default. See runScript in the Scripting Engine Reference for details.


Keep only one element

Remove everything on the page except one element, and move it to the body. This also triggers a resize event, so a responsive element can adapt to the space.

extract("""css_selector""")


Change the background color

Set the page background to a named color:

runScript("""document.body.style.backgroundColor = "white";""")

Or use a hex color:

runScript("""document.body.style.backgroundColor = "#6217e5";""")

#6217e5 It is purple. Replace it with any hex color you like.


Select an option from a dropdown

Pick a specific option from a dropdown list by its visible text.

runScript("""
var list = document.querySelector("dropdown_css_selector")
for (var i = 0; i < list.options.length; i++) {
    if (list.options[i].text === "DROPDOWN_VALUE") {
        list.selectedIndex = i;
        break;
    }
}
""")

Replace DROPDOWN_VALUE with the exact text of the option as it appears in the menu.


Inject any CSS code

Example web page before applying the above script code:

Yodeck CSS code

Example web page after applying the above script code:

Yodeck CSS code


Related articles

Did this answer your question?