Javascript Tips & Tricks

Overview

Javascript is the critical to supporting functionality across websites and mobile apps. Among its many capabilities, it can be used to simulate a user interacting with the page.

This guide is a resource for those wanting to use Javascript and jQuery (a popular javascript library) in their Audits and Journeys.

Query Selector

Because selecting HTML elements to manipulate the page is key to success with Audits and Journeys, you'll want to master these 2 tools:

Query Selector
Query Selector All

ObservePoint API Calls

For help making calls to the ObservePoint API with Javascript, check out this guide with helpful functions.

Basic JS Examples

document.querySelector('#example').click();

document.querySelector('#example').value = 'this value';

document.querySelector('#selectorForDropdown).value = 'value of option';

Note: For select HTML elements you probably need to trigger a change event (see below)

Trigger Event

document.querySelector('#example').dispatchEvent(new Event('change', { bubbles: true }));

jQuery('#example').trigger("change");

Optional Event

try {     document.querySelector('#example').click(); //example action} catch(e) {   console.log('Could not click on element'); //notify that action didn't happen}

Find an an element with a certain HTML property

document.querySelector('[{insert HTML Property here}="{insert value here}"]');

Prevent Navigating to new tab

document.querySelector('#example').setAttribute('target', '_self');

“Get Selector” Function

In the DOM, click on the element you want first

var elem = $0;

function getDynSelector(e) {
    var t = e.tagName.toLowerCase(),
        l = e.attributes,
        n = [];
    for (i = 0; i < l.length; i++) - 1 == l[i].value.search(/{.*}/g) && n.push({
        len: l[i].nodeName.length + l[i].value.length,
        selector: t + "[" + l[i].nodeName + "='" + l[i].value + "']"
    });
    var r = 0,
        o = -1;
    for (i = 0; i < n.length; i++) 1 == document.querySelectorAll(n[i].selector).length && (0 == r || r > n[i].len) && (r = n[i].len, o = i);
    if (-1 != o) return n[o].selector;
    var a = e.parentElement.children,
        c = 0;
    for (i = 0; i < a.length; i++) a[i] == e && (c = i);
    return getDynSelector(e.parentElement) + " > " + e.tagName.toLowerCase() + ":nth-child(" + (c + 1) + ")"
}
console.log(getDynSelector(elem));

Trigger a lot of events w/ minimal setup

var el = document.querySelector('#example');

el.dispatchEvent(new Event('dblclick', {
    bubbles: true
}));
el.dispatchEvent(new Event('mouseenter', {
    bubbles: true
}));
el.dispatchEvent(new Event('mouseleave', {
    bubbles: true
}));
el.dispatchEvent(new Event('mousemove', {
    bubbles: true
}));
el.dispatchEvent(new Event('mouseover', {
    bubbles: true
}));
el.dispatchEvent(new Event('mouseout', {
    bubbles: true
}));
el.dispatchEvent(new Event('mouseup', {
    bubbles: true
}));
el.dispatchEvent(new Event('keydown', {
    bubbles: true
}));
el.dispatchEvent(new Event('keypress', {
    bubbles: true
}));
el.dispatchEvent(new Event('keyup', {
    bubbles: true
}));
el.dispatchEvent(new Event('load', {
    bubbles: true
}));
el.dispatchEvent(new Event('blur', {
    bubbles: true
}));
el.dispatchEvent(new Event('change', {
    bubbles: true
}));
el.dispatchEvent(new Event('focus', {
    bubbles: true
}));
el.dispatchEvent(new Event('focusin', {
    bubbles: true
}));
el.dispatchEvent(new Event('focusout', {
    bubbles: true
}));
el.dispatchEvent(new Event('input', {
    bubbles: true
}));
el.dispatchEvent(new Event('submit', {
    bubbles: true
}));

Normal “Hit it with every event”

var el = document.getElementById('example');

var arr = ['click', 'compositionstart', 'compositionend', 'ctextmenu', 'dblclick', 'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseover', 'mouseout', 'mouseup', 'keydown', 'keypress', 'keyup', 'abort', 'beforeunload', 'error', 'hashchange', 'load', 'pageshow', 'pagehide', 'resize', 'visibilitychange', 'scroll', 'unload', 'blur', 'change', 'focus', 'focusin', 'focusout', 'input', 'invalid', 'reset', 'search', 'select', 'submit', 'drag', 'dragend', 'dragenter', 'dragleave', 'dragover', 'dragstart', 'drop', 'copy', 'cut', 'paste', 'afterprint', 'beforeprint', 'abort', 'canplay', 'canplaythrough', 'duratichange', 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart', 'pause', 'play', 'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting', 'animatiend', 'animatiiterati', 'animatistart', 'transitiend', 'error', 'message', 'open', 'message', 'mousewheel', 'line', 'offline', 'popstate', 'show', 'storage', 'toggle', 'wheel', 'touchcancel', 'touchend', 'touchmove', 'touchstart', 'orientationchange'];

function triggerEvent(el, type) {
    if ('createEvent' in document) {
        var e = document.createEvent('HTMLEvents');
        e.initEvent(type, true, false);
        el.dispatchEvent(e);
    }
};
var w = 0;
var myvar = setInterval(function() {
    if (w == arr.length + 1) {
        clearInterval(myvar)
    }
    triggerEvent(el, arr[w]);
    console.log(arr[w]);
    w++;
}, 800);

Getting stuff from iFrame w/ Vanilla JS

document.querySelector('iframeSelector').contentDocument.querySelector('.elementiniframe).value = "ObservePoint";

Click All Elements of a Certain Type

var elements = 'a, input'; /*add whatever elements you want to click on here, separated by commas.*/
	document.querySelectorAll(elements).forEach((el) => {
	el.click();
});

ObservePoint Action Events

var el = document.querySelector('#example');

el.dispatchEvent(new Event('mouseover', {
    bubbles: true
}));
el.dispatchEvent(new Event('mousemove', {
    bubbles: true
}));
el.dispatchEvent(new Event('mousedown', {
    bubbles: true
}));
el.dispatchEvent(new Event('mouseup', {
    bubbles: true
}));
el.dispatchEvent(new Event('click', {
    bubbles: true
}));

var el = document.querySelector('#example');

el.value = 'example value';

el.dispatchEvent(new Event('focus', {
    bubbles: true
}));
el.dispatchEvent(new Event('select', {
    bubbles: true
}));
el.dispatchEvent(new Event('input', {
    bubbles: true
}));
el.dispatchEvent(new Event('keydown', {
    bubbles: true
}));
el.dispatchEvent(new Event('keypress', {
    bubbles: true
}));
el.dispatchEvent(new Event('keyup', {
    bubbles: true
}));
el.dispatchEvent(new Event('change', {
    bubbles: true
}));
el.dispatchEvent(new Event('blur', {
    bubbles: true
}));

Get Elements that Contain HTMLText

try {
    var elType = 'el type (div, a, p)';

    var SearchText = 'Example Search Text';

    function contains(selector, text) {
        var elements = document.querySelectorAll(selector);
        return [].filter.call(elements, function(element) {
            return RegExp(text).test(element.textContent);
        });
    }
    var el = contains(elType, SearchText);

    el[0];

Monitor Events on an element

Note: First click on the element you want in the DOM

monitorEvents($0)

unmonitorEvents($0)

Get Today’s Date String (yyyy-mm-dd)

Note: Places 0 in front of single digit numbers (9 => 09)

var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1 <= 9 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1;
var day = d.getDate() <= 9 ? '0' + d.getDate() : d.getDate();
var fullDate = year + '-' + month + '-' + day;

Add months & days to Date (same format as above)

var days = 2; //days to add
var months = 2; //months to add

var d = new Date();

d.setDate(d.getDate() + days);
d.setMonth(d.getMonth() + months);

var month = d.getMonth() <= 8 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1);
var day = d.getDate() <= 9 ? '0' + d.getDate() : d.getDate();

var fullDate = '' + d.getFullYear() + '-' + month + '-' + day;

Make n number of random characters

function randomString(strLength) {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    for (var i = 0; i < strLength; i++) text += possible.charAt(Math.floor(Math.random() * possible.length));
    return text;
}

Example: 

randomString(10);

Output: 

eXxVsw0u44

Make Dynamic Email

var d = new Date();
var email = 'test' + (new Date).getTime().toString() + '@observepoint.com'; < br > < br > //OR THIS FOR WEBSITES WITH SECURITY SYSTEMS <br><br>var d = new Date();
    var email = 'test' + (new Date).getTime().toString() + '@observepoint.com';

var input = document.querySelector('#email');
var lastValue = input.value;
input.value = email;
var event = new Event('input', {
    bubbles: true
});
event.simulated = true;
var tracker = input._valueTracker;
if (tracker) {
    tracker.setValue(lastValue);
}
input.dispatchEvent(event);

Slow Scroll

function pageScroll() {
    window.scrollBy(0, 500); // horizontal and vertical scroll increments 
    scrolldelay = setTimeout('pageScroll()', 100); // scrolls every 100 milliseconds  

    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {

        clearTimeout(scrolldelay);
    }
}
pageScroll();

React

Websites and Web Apps built with React have exceptional behavior. This is a guide for Javascript tools for manipulating UIs that are built with React JS.

Inputting into React JS Field

For hitting the two different input methods between v. 15 and v. 16 of React:

var input = document.querySelector('#example');
var lastValue = input.value;
input.value = 'new value';
var event = new Event('input', {
    bubbles: true
});
event.simulated = true;
var tracker = input._valueTracker;
if (tracker) {
    tracker.setValue(lastValue);
}
input.dispatchEvent(event);

var input = document.querySelector('#example');
input.selectedIndex = 3;
event = new Event('change', {
    bubbles: true
});

input.dispatchEvent(event);

React “Hit it with every event”

var el = document.getElementById('example');

var arr = ['click', 'compositionstart', 'compositionend', 'ctextmenu', 'dblclick', 'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseover', 'mouseout', 'mouseup', 'keydown', 'keypress', 'keyup', 'abort', 'beforeunload', 'error', 'hashchange', 'load', 'pageshow', 'pagehide', 'resize', 'visibilitychange', 'scroll', 'unload', 'blur', 'change', 'focus', 'focusin', 'focusout', 'input', 'invalid', 'reset', 'search', 'select', 'submit', 'drag', 'dragend', 'dragenter', 'dragleave', 'dragover', 'dragstart', 'drop', 'copy', 'cut', 'paste', 'afterprint', 'beforeprint', 'abort', 'canplay', 'canplaythrough', 'duratichange', 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart', 'pause', 'play', 'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting', 'animatiend', 'animatiiterati', 'animatistart', 'transitiend', 'error', 'message', 'open', 'message', 'mousewheel', 'line', 'offline', 'popstate', 'show', 'storage', 'toggle', 'wheel', 'touchcancel', 'touchend', 'touchmove', 'touchstart', 'orientationchange'];

function triggerEvent(el, type) {
    if ('createEvent' in document) {
        var lastValue = el.value;
        var event = new Event(type, {
            bubbles: true
        });
        event.simulated = true;
        var tracker = el._valueTracker;
        if (tracker) {
            tracker.setValue(lastValue);
        }
        el.dispatchEvent(event);
    }
};
var w = 0;
var myvar = setInterval(function() {
    if (w == arr.length + 1) {
        clearInterval(myvar)
    }
    triggerEvent(el, arr[w]);
    console.log(arr[w]);
    w++;
}, 800);