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:
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);