Skip to content

Commit 3482056

Browse files
benFromMablbenFromMabl
authored
Increasing amount of JS snippets (#80)
* Added collection of Javascript snippets covering a wide range of topics frequently asked about. * Prettier'd all the snippets. Returned GetDateComponents.js to its original name to not break links. Made adjustments based on code review feedback. * More adjustments based on code review
1 parent 65af466 commit 3482056

38 files changed

+990
-510
lines changed

‎mabl snippets/GetDateComponents.js

Lines changed: 209 additions & 196 deletions
Large diffs are not rendered by default.

‎mabl snippets/browser testing/browserBackButton.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
/**
2-
* This snippet simulates pressing the browser back button.
2+
* This snippet simulates pressing the browser back button.
3+
* We use the setTimeout to make sure the snippet does not fail if it takes too long to load the previous page.
34
*/
45
function mablJavaScriptStep(mablInputs, callback) {
5-
setTimeout(function(){ window.history.back() }, 1000);
6+
setTimeout(function () { window.history.back() }, 1000);
67
callback(true);
78
}

‎mabl snippets/browser testing/browserForwardButton.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
/**
2-
* This snippet simulates pressing the browser forward button.
2+
* This snippet simulates pressing the browser forward button.
3+
* We use the setTimeout to make sure the snippet does not fail if it takes too long to load the previous page.
34
*/
45
function mablJavaScriptStep(mablInputs, callback) {
5-
setTimeout(function(){ window.history.forward() }, 1000);
6+
setTimeout(function () { window.history.forward() }, 1000);
67
callback(true);
78
}

‎mabl snippets/browser testing/canvasClick.js

Lines changed: 49 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -13,57 +13,57 @@
1313
*/
1414

1515
function mablJavaScriptStep(mablInputs, callback) {
16-
// If the variable "canvas_css_selector" is not set in the test,
17-
// use a selector for the first canvas in the page
18-
let canvas_css_selector = mablInputs.variables.user.canvas_css_selector;
19-
canvas_css_selector = (canvas_css_selector === undefined ? "canvas" : canvas_css_selector);
20-
21-
// Respond with error message if unable to find a canvas
22-
if (document.querySelectorAll(canvas_css_selector).length === 0) {
23-
callback("Canvas not found: \"canvas_css_selector\" did not find any elements.");
24-
}
25-
// Find the desired canvas and save it to the variable "canvas"
26-
let canvas = document.querySelector(canvas_css_selector);
27-
28-
// IF "coordinates" is set, then parse and set x and y
29-
// ELSE set X and Y to the center of the canvas
30-
let coordinates = mablInputs.variables.user.coordinates;
31-
let x, y;
32-
if (coordinates) {
33-
// Remove any characters that are not numbers, commas, or periods
34-
coordinates = coordinates.replace(/[^0-9\,\.]/g, "").split(",");
35-
// Error out if "coordinates" does not split into 2 values
36-
if (coordinates.length !== 2) {
37-
callback("Canvas not clicked: \"coordinates\" incorrectly formatted.");
16+
// If the variable "canvas_css_selector" is not set in the test,
17+
// use a selector for the first canvas in the page
18+
let canvas_css_selector = mablInputs.variables.user.canvas_css_selector;
19+
canvas_css_selector = (canvas_css_selector === undefined ? "canvas" : canvas_css_selector);
20+
21+
// Respond with error message if unable to find a canvas
22+
if (document.querySelectorAll(canvas_css_selector).length === 0) {
23+
callback("Canvas not found: \"canvas_css_selector\" did not find any elements.");
24+
}
25+
// Find the desired canvas and save it to the variable "canvas"
26+
let canvas = document.querySelector(canvas_css_selector);
27+
28+
// IF "coordinates" is set, then parse and set x and y
29+
// ELSE set X and Y to the center of the canvas
30+
let coordinates = mablInputs.variables.user.coordinates;
31+
let x, y;
32+
if (coordinates) {
33+
// Remove any characters that are not numbers, commas, or periods
34+
coordinates = coordinates.replace(/[^0-9\,\.]/g, "").split(",");
35+
// Error out if "coordinates" does not split into 2 values
36+
if (coordinates.length !== 2) {
37+
callback("Canvas not clicked: \"coordinates\" incorrectly formatted.");
38+
}
39+
x = coordinates[0];
40+
y = coordinates[1];
41+
} else {
42+
// Find the size of the canvas and calculate the middle of the canvas
43+
let canvasRect = canvas.getBoundingClientRect();
44+
x = canvasRect.width / 2;
45+
y = canvasRect.height / 2;
46+
}
47+
48+
// Creates the function to send the clicks to the canvas.
49+
function clickCanvasAt(x, y) {
50+
let e = canvas.ownerDocument.createEvent("MouseEvents");
51+
let actionsToPerform = ["mousedown", "mouseup"];
52+
actionsToPerform.forEach(action => {
53+
e.initMouseEvent(
54+
action, true, true, canvas.ownerDocument.defaultView,
55+
1, 0, 0, x, y, false, false, false, false, 0, null
56+
);
57+
canvas.dispatchEvent(e);
58+
});
3859
}
39-
x = coordinates[0];
40-
y = coordinates[1];
41-
} else {
42-
// Find the size of the canvas and calculate the middle of the canvas
43-
let canvasRect = canvas.getBoundingClientRect();
44-
x = canvasRect.width / 2;
45-
y = canvasRect.height / 2;
46-
}
4760

48-
// Creates the function to send the clicks to the canvas.
49-
function clickCanvasAt(x, y) {
50-
let e = canvas.ownerDocument.createEvent("MouseEvents");
51-
let actionsToPerform = ["mousedown", "mouseup"];
52-
actionsToPerform.forEach(action => {
53-
e.initMouseEvent(
54-
action, true, true, canvas.ownerDocument.defaultView,
55-
1, 0, 0, x, y, false, false, false, false, 0, null
56-
);
57-
canvas.dispatchEvent(e);
58-
});
59-
}
60-
61-
// This sends the clicks to the canvas its self
62-
clickCanvasAt(x, y);
63-
// You can manually add one or more clicks here as well
64-
// Ex: clickCanvasAt(250, 750);
61+
// This sends the clicks to the canvas its self
62+
clickCanvasAt(x, y);
63+
// You can manually add one or more clicks here as well
64+
// Ex: clickCanvasAt(250, 750);
6565

66-
// Returns a string to the mabl test with the x & y values.
67-
callback("X: " + x + ", Y: " + y);
66+
// Returns a string to the mabl test with the x & y values.
67+
callback("X: " + x + ", Y: " + y);
6868
}
6969

‎mabl snippets/browser testing/checkMobileEmulation.js

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
/**
2-
* JS snippet to get number of child elements
3-
* @param {object} - mablInputs Object containing input
4-
* variables (mablInputs.variables.user)
5-
* @param {function} callback - The callback function
2+
* Checks userAgent for Mobile or Android keywords to determine if on mobile mode.
63
*/
74
function mablJavaScriptStep(mablInputs, callback) {
8-
/**
5+
/**
96
* Checking for the mobile user agent and touch events catches most mobile
107
* scenarios. This method does not cover:
118
* Nexus 10, Nexus 7, Blackberry PlayBook, Laptop with touch,
129
* Laptop with HiDPI screen, Laptop with MDPI screen, Kindle Fire HDX
1310
*/
14-
let mobileCheck1 = (window.navigator.userAgent.indexOf('Mobile') !== -1);
15-
mobileCheck1 = mobileCheck1 || ('TouchEvent' in window && 'ontouchstart' in window);
16-
/**
17-
* If you know the cutoff points for your application to enter different
18-
* mobile states, this solution is more robust. Checking the viewport width
19-
* can allow you to determine if your application is in a mobile state. In
20-
* addition, you can compare to multiple values if your application has
21-
* multiple mobile states (ex. different states for tablets vs phones).
22-
*/
23-
let mobileCutoffWidth = 1000;
24-
let mobileCheck2 = window.innerWidth < mobileCutoffWidth;
25-
callback(mobileCheck2);
26-
}
11+
let onMobileAgentCheck = (window.navigator.userAgent.indexOf('Mobile') !== -1 ||
12+
window.navigator.userAgent.indexOf('Android') !== -1);
13+
onMobileAgentCheck = onMobileAgentCheck || ('TouchEvent' in window && 'ontouchstart' in window);
14+
15+
/**
16+
* If you know the cutoff points for your application to enter different
17+
* mobile states, this solution is more robust. Checking the viewport width
18+
* can allow you to determine if your application is in a mobile state. In
19+
* addition, you can compare to multiple values if your application has
20+
* multiple mobile states (ex. different states for tablets vs phones).
21+
*/
22+
// let mobileCutoffWidth = 1000;
23+
// let mobileCheckWidth = window.innerWidth < mobileCutoffWidth;
24+
// callback(mobileCheckWidth);
25+
callback(onMobileAgentCheck);
26+
}

‎mabl snippets/browser testing/chooseSelectOption.js

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,28 @@
44
* variables (mablInputs.variables.user)
55
* @param {function} callback - The callback function
66
*/
7-
function mablJavaScriptStep(mablInputs, callback) {
8-
9-
// selectSelector is a selector to the <select> element
10-
// selectValue is the value for the <option> element that needs to be selected
11-
let selectElement = document.querySelector(mablInputs.variables.user.selectSelector);
12-
if (selectElement) {
13-
selectElement.value = mablInputs.variables.user.selectValue;
14-
selectElement.dispatchEvent(new Event('change'));
15-
}
16-
callback(true);
7+
function mablJavaScriptStep(mablInputs, callback, CssSelector = "ThisIsASelector", selectValue = "ValueYourself") {
8+
// Parameterize!
9+
// selectSelector is a selector to the <select> element
10+
// selectValue is the value for the <option> element that needs to be selected
11+
let selectElement = document.querySelector(CssSelector);
12+
if (selectElement) {
13+
selectElement.value = selectValue;
14+
selectElement.dispatchEvent(new Event('change'));
15+
}
16+
callback(true);
1717
}
18+
19+
20+
// CSS
21+
// https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
22+
// querySelector will return the first element in the document that matches the CSS selector given.
23+
24+
// XPath
25+
// https://developer.mozilla.org/en-US/docs/Web/API/Document/evaluate
26+
// document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
27+
28+
// Id
29+
// https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
30+
// getElementById searches the document for a unique ID, it can only work if the element you want has an id.
31+
// let select = document.getElementById(elementId);

‎mabl snippets/browser testing/getCurrentBrowser.js

Lines changed: 19 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,28 @@
11
/**
22
* Run a small snippet of JavaScript during a mabl flow/journey
33
*
4-
* @param {object} mablInputs - Object containing mabl inputs such as variables (mablInputs.variables).
5-
* Use mablInputs.variables.user for user defined variables
6-
* (For example myVar may be accessed as mablInputs.variables.user.myVar)
7-
*
8-
* @param {function} callback - A callback function that must be called to complete
9-
* the javascript step and provide a value to the following
10-
* steps of the flow/journey. A return statement from this
11-
* function call will not provide any results for use
12-
* in the following steps in this flow or journey.
134
*/
145
function mablJavaScriptStep(mablInputs, callback) {
15-
var sBrowser,
16-
sUsrAg = navigator.userAgent;
6+
var sBrowser,
7+
sUsrAg = navigator.userAgent;
178

18-
// THE ORDER MATTERS HERE!
9+
// THE ORDER MATTERS HERE!
1910

20-
if (sUsrAg.indexOf("Firefox") > -1) {
21-
sBrowser = "Firefox";
22-
// "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
23-
} else if (sUsrAg.indexOf("Trident") > -1) {
24-
sBrowser = "Internet Explorer";
25-
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
26-
} else if (sUsrAg.indexOf("Chrome") > -1) {
27-
sBrowser = "Chrome";
28-
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
29-
} else if (sUsrAg.indexOf("Safari") > -1) {
30-
sBrowser = "Safari";
31-
// "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
32-
} else {
33-
sBrowser = "unknown";
34-
}
11+
if (sUsrAg.indexOf("Firefox") > -1) {
12+
sBrowser = "Firefox";
13+
// "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
14+
} else if (sUsrAg.indexOf("Trident") > -1) {
15+
sBrowser = "Internet Explorer";
16+
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
17+
} else if (sUsrAg.indexOf("Chrome") > -1) {
18+
sBrowser = "Chrome";
19+
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
20+
} else if (sUsrAg.indexOf("Safari") > -1) {
21+
sBrowser = "Safari";
22+
// "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
23+
} else {
24+
sBrowser = "unknown";
25+
}
3526

36-
callback(sBrowser);
27+
callback(sBrowser);
3728
}

‎mabl snippets/browser testing/scrollLazyLoadedList.js

Lines changed: 51 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,54 @@
11
/**
2-
* @NOTE - This is a snippet will not work in Internet Explorer.
3-
*/
4-
5-
function mablJavaScriptStep(mablInputs, callback) {
6-
// ## Values that one could parameterize ##
7-
let scrollViewSelector = "SELECTOR";
8-
let elementSelector = "SELECTOR";
9-
let elementText = "TEXT_OF_OPTION";
10-
11-
// Find the scroll view
12-
let table = document.querySelector(scrollViewSelector);
13-
14-
// Get the height of the number of cells that are loaded at a time
15-
let loadedCellsHeight = table.offsetHeight;
16-
17-
// Create a variable to keep track of the number of times the "scrollDown" function is called
18-
let loopCount = 0;
19-
20-
// Call the "scrollDown" function once every half second
21-
let scrollInterval = setInterval(scrollDown, 500);
22-
23-
// Function to be called to scroll down
24-
function scrollDown() {
25-
// Increase the value of variable "loopCount" by 1
26-
++loopCount;
27-
28-
// Scroll down the table the height of the loaded cells * the number of times we have looped
29-
table.scroll(0, loopCount * loadedCellsHeight);
30-
31-
// Get all the loaded site names
32-
let allElements = Array.from(document.querySelectorAll(elementSelector));
33-
34-
// Find all the site names that contain the text in variable "elementText"
35-
let matchingElements = allElements.filter((cell) =>
36-
cell.innerText.includes(elementText)
37-
);
38-
39-
// If the site name we were looking for was there, then there should be 1 value in the array (0 values otherwise)
40-
let elementTextFound = matchingElements.length !== 0;
41-
42-
// Determine if we have scrolled to the bottom of the scroll view
43-
let scrolledToBottom =
44-
table.scrollTop + table.offsetHeight === table.scrollHeight;
45-
46-
// Stop scrolling if the row was found and return
47-
if (elementTextFound) {
48-
callback("Element Found");
49-
clearInterval(scrollInterval);
50-
}
51-
// Stop scrolling if we have reached the bottom of the results and return
52-
if (scrolledToBottom) {
53-
callback("Element Not Found. Bottom of scroll view reached.");
54-
clearInterval(scrollInterval);
2+
*
3+
*
4+
*
5+
**/
6+
function mablJavaScriptStep(mablInputs, callback, scrollViewSelector = 'SELECTOR', elementSelector = 'SELECTOR', elementText = 'TEXT_OF_OPTION') {
7+
8+
// Find the scroll view
9+
let table = document.querySelector(scrollViewSelector);
10+
11+
// Get the height of the number of cells that are loaded at a time
12+
let loadedCellsHeight = table.offsetHeight;
13+
14+
// Create a variable to keep track of the number of times the "scrollDown" function is called
15+
let loopCount = 0;
16+
17+
// Call the "scrollDown" function once every half second
18+
let scrollInterval = setInterval(scrollDown, 500);
19+
20+
// Function to be called to scroll down
21+
function scrollDown() {
22+
// Increase the value of variable "loopCount" by 1
23+
++loopCount;
24+
25+
// Scroll down the table the height of the loaded cells * the number of times we have looped
26+
table.scroll(0, loopCount * loadedCellsHeight);
27+
28+
// Get all the loaded site names
29+
let allElements = Array.from(document.querySelectorAll(elementSelector));
30+
31+
// Find all the site names that contain the text in variable "elementText"
32+
let matchingElements = allElements.filter((cell) =>
33+
cell.innerText.includes(elementText)
34+
);
35+
36+
// If the site name we were looking for was there, then there should be 1 value in the array (0 values otherwise)
37+
let elementTextFound = matchingElements.length !== 0;
38+
39+
// Determine if we have scrolled to the bottom of the scroll view
40+
let scrolledToBottom =
41+
table.scrollTop + table.offsetHeight === table.scrollHeight;
42+
43+
// Stop scrolling if the row was found and return
44+
if (elementTextFound) {
45+
callback("Element Found");
46+
clearInterval(scrollInterval);
47+
}
48+
// Stop scrolling if we have reached the bottom of the results and return
49+
if (scrolledToBottom) {
50+
callback("Element Not Found. Bottom of scroll view reached.");
51+
clearInterval(scrollInterval);
52+
}
5553
}
56-
}
5754
}

0 commit comments

Comments
 (0)