Check that image is loaded

JS-step fails after running more than 15s.

view raw js-step_checkimage.js hosted with ❤ by GitHub

Force links open to the same window

view raw js-step_forcelinksopentosamewindow.js hosted with ❤ by GitHub

Select random date range with a Datepicker and a Timepicker

view raw js-step_setdatepicker.js hosted with ❤ by GitHub

Set text for an HTML element

view raw js-step_settext.js hosted with ❤ by GitHub

Wait for HTML #element to disappear

JS-step fails after running more than 15s.

view raw js-step_waitforelementtodisappear.js hosted with ❤ by GitHub

Parameterizable poll to make sure an element is not visible

JS-step can be configured from another JS-step. Use case example: create a trace which has only this JS-step. Then, in other traces you can reuse this JS-step multiple times by setting the parameters before calling the trace.

view raw js-step_param_poll_not_showing.js hosted with ❤ by GitHub

Parameterizable file download

JS-step can be configured from another JS-step.
view raw js-step_param_file_download.js hosted with ❤ by GitHub

Load jQuery

External scripts need to be loaded in the same step they are used.
view raw js-step_load_jquery.js hosted with ❤ by GitHub

Check that the URL contains something

view raw js-step_checkurl.js hosted with ❤ by GitHub

Click first matching link

When having multiple links with the same content click the first match.

view raw js-step_click_first_match.js hosted with ❤ by GitHub

Scroll to the bottom of the page

view raw js-scroll_to_bottom.js hosted with ❤ by GitHub

Scroll to an element of the page

Scroll to an element by ID

document.getElementById("div").scrollIntoView();
callback (true);

In the scrollIntoview we can add properties like scrollIntoView({behavior: 'smooth'});
Useful resources:
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy

Communicate to an external server

Talking to a REST API. This example shows how data can be sent from a trace to an HTTP server in any domain.GLOBALS.saveData is posted to an external server.

view raw js-step_send_json.js hosted with ❤ by GitHub

Here’s a Node.JS example of the server that receives the data (GLOBALS.saveData), and saves it into a file. This is not a JS-step, but an example Node.JS server you can host to receive data from your traces.

view raw node-saveData-http.js hosted with ❤ by GitHub

Open a new tab

Open a new Tab with JS Step by adding the following code

window.open('http://google.com','_blank');
callback(true);

and watch the video instruction on how to proceed with recording to the tab afterward:

NewTabWithJSstepSwitchWindow

Adding rich content to message body

If the normal flow with input step fields cannot support multiline text with rich elements like italic, bold, and links, then adding a JS Step with code like this is necessary:

// Here define the message body class of the element ('.Am')
let messageBody = document.querySelector('.Am'); 

let html = gmailMessageBody.innerHTML; 

// Set HTML content 
// This replaces what was in there already 
messageBody.innerHTML = '<p><b>This is paragraph with bold text</b></p>';
// Add HTML to the end of an element's existing content
messageBody.innerHTML += '<p><i>Add this after what is already there.</i></p>'; 
callback(true);

Adding multiline text in the textarea element

When the Input Step is not reflecting multiline text in the textarea element, adding a JS Step like this will make this work:

// Add element by ID and with \n add next row
document.getElementById("exampleFormControlTextarea1").value = 'This is first row \nThis is second row \nThis is third row'; 
callback(true);