Interaction Snippets

Interaction snippets allow for the interacting with elements on the page that your automation is currently present on.

Note: these snippets are similar to the functionality of the Interact steps.

# Click on a button element with JavaScript

Find a button by text, click and pause 5 seconds. Repeat until button is no longer present on the page.

const delay = ms => new Promise(res => setTimeout(res, ms))

let element = document.evaluate("//button[contains(., 'Load more')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue

while (element) {
  element.click()
  
	await delay(5000)

  element = document.evaluate("//button[contains(., 'Load more')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue
}

# Interact with a dropdown (select) list with JavaScript

Use keyboard commands (arrow down) for difficult select list element.

// First, either 1) Click to open the difficult select-list, 
// OR 2) Use the tab-key to select the element
let marital = 'Single' 

async function arrowDownTimes(times) {
  for(var i = 0; i < times; i++){
      await page.keyboard.press('ArrowDown');
      await page.waitForTimeout(250);
  }
}

switch(marital) {
  case 'Married':
    break;
  case 'Single':
    arrowDownTimes(1);
    break;
  case 'Divorced':
    arrowDownTimes(2);
    break;
}

# Enter text from data using JavaScript

Enter text into an input using a CSS selector and a token.

document.querySelector('input[placeholder="Search the BBC"]').value = '[custom-data]';

# Shadow DOM

Shadow DOM can be used within a page to attach a DOM tree to an element, and have the internals hidden from JavaScript or CSS running in the page. These elements are not selectable natively within your automations, but can be accessed using the following code within a "Write Javascript" step:

const shadowHost = document.querySelector('<SELECTOR>')

if (shadowHost) {
  const shadowRoot = shadowHost.shadowRoot

  // Locate the element inside the shadow root that you wish to interact with.
  const innerElm = shadowRoot.querySelector('<SELECTOR>')

  if (innerElm) {
    // Example: innerElm.click();
  }
}

# Event listeners

Listening for events from the page can help you trigger custom events, or custom code, to run when this event occurs. For example, if you would like to add an event listener to an element that listens for 'click' events:

document.getElementById("custom-element").addEventListener("click", (e) => {
    console.log("Custom element clicked");
})

Adding event listeners will allow you to run code anytime an element is clicked on the page.

Custom events can be created to be used with your automations, such as:

document.addEventListener("my-custom-listener", (e) => {
  console.log("Custom event triggered:", e.detail);
})

// Calling this listener
document.dispatchEvent(new CustomEvent("my-custom-listener", { detail: { data: "Test data" } }));

// Combined with other listeners
document.getElementById("custom-element").addEventListener("click", (e) => {
    document.dispatchEvent(new CustomEvent("my-custom-listener", { detail: { data: "Test data" } }));
})

Event listeners will not persist between page loads - navigating away from the page will require the event listeners being set up again.

Prev: JavaScript Snippets