Skip to content

Instantly share code, notes, and snippets.

@OrganicPanda
Created July 28, 2016 16:06
Show Gist options
  • Save OrganicPanda/ba22c6dec89ffa7673a27ec28e08aa89 to your computer and use it in GitHub Desktop.
Save OrganicPanda/ba22c6dec89ffa7673a27ec28e08aa89 to your computer and use it in GitHub Desktop.
Track the mouse position in Protractor
// Hook in to `addEventListener` to track the mouse and display it as a circle
exports.onPageLoad = function() {
return browser.executeScript(function() {
(function() {
var EventSniffer = function() {
this.history = [];
this.callbacks = {};
this.minCacheSize = 100;
this.maxCacheSize = 500;
};
EventSniffer.prototype.handle = function(name, e) {
if (this.history.indexOf(e) > -1) return;
this.addToHistory(e);
this.trigger(name, e);
};
EventSniffer.prototype.trigger = function(name, e) {
if (!this.callbacks[name]) return;
this.callbacks[name].forEach(function(cb) {
cb(e);
});
};
EventSniffer.prototype.addToHistory = function(e) {
if (this.history.length >= this.maxCacheSize) {
this.history = this.history
.slice(this.history.length - this.minCacheSize);
}
this.history.push(e);
};
EventSniffer.prototype.on = function(name, cb) {
if (!this.callbacks[name]) {
this.callbacks[name] = [];
// Add a dummy event listener incase the page hasn't
document.addEventListener(name, function() {});
}
this.callbacks[name].push(cb);
};
EventSniffer.prototype.install = function() {
var proto = EventTarget.prototype;
var oldAEL = proto.addEventListener;
var self = this;
proto.addEventListener = function(name) {
// Add our own event listener first
oldAEL.call(this, name, function(e) {
self.handle(name, e);
});
// The add the users listener as normal
return oldAEL.apply(this, arguments);
};
}
var MouseTracker = function() {
this.indicator = document.createElement('div');
this.indicator.setAttribute('class', 'mouse-tracker');
this.style = document.createElement('style');
this.style.innerHTML = [
'.mouse-tracker {',
'width: 0.5em;',
'height: 0.5em;',
'background: orange;',
'box-shadow: 0 0 0 1px white;',
'border-radius: 50%;',
'position: absolute;',
'top: 0;',
'left: 0;',
'z-index: 100000;',
'pointer-events: none;',
'transform: translate(-50%, -50%);',
'transition: background-color 0.2s linear;',
'}',
'.mouse-tracker.mousedown {',
'background: rgba(0, 128, 0, 0.5);',
'}',
'@keyframes mouse-tracker-click {',
'to {',
'width: 5em;',
'height: 5em;',
'opacity: 0;',
'}',
'}',
'.mouse-tracker .click {',
'width: 0.5em;',
'height: 0.5em;',
'border: 1px solid rgba(128, 128, 128, 1);',
'box-shadow: 0 0 0 1px rgba(256, 256, 256, 1);',
'border-radius: 50%;',
'position: absolute;',
'top: 50%;',
'left: 50%;',
'pointer-events: none;',
'transform: translate(-50%, -50%);',
'animation: 1s mouse-tracker-click;',
'}'
].join('\n');
};
MouseTracker.prototype.move = function(x, y) {
this.indicator.style.left = x + 'px';
this.indicator.style.top = y + 'px';
};
MouseTracker.prototype.click = function() {
var click = document.createElement('div');
click.setAttribute('class', 'click');
click.addEventListener('animationend', function() {
click.parentElement.removeChild(click);
}, false);
this.indicator.appendChild(click);
};
MouseTracker.prototype.mousedown = function() {
this.indicator.classList.add('mousedown');
};
MouseTracker.prototype.mouseup = function() {
this.indicator.classList.remove('mousedown');
};
MouseTracker.prototype.install = function() {
document.body.appendChild(this.indicator);
document.head.appendChild(this.style);
}
var tracker = new MouseTracker();
var sniffer = new EventSniffer();
sniffer.install();
tracker.install();
sniffer.on('click', function(e) {
tracker.click();
});
sniffer.on('mousemove', function(e) {
tracker.move(e.x, e.y);
});
sniffer.on('mousedown', function(e) {
tracker.mousedown();
});
sniffer.on('mouseup', function(e) {
tracker.mouseup();
});
})();
});
};
// Slow things down a bit
exports.waitForCondition = function() {
return browser.driver.sleep(500).then(function() { return true; });
};
var config = {
plugins: [{
path: './mouse-plugin.js',
}]
}
@scottwalter-nice
Copy link

Where have you been all my life. This is better than sliced bread.

@Sakshi-1911
Copy link

I am new to protractor, can anyone help me out. How to use this plugin?
I have created mouse-plugin.js file and added its path in protractor.conf.js file but it is not working.

@OrganicPanda
Copy link
Author

Sorry @kiko010 @Sakshi-1911 I wrote this in a hurry years ago and haven't used Angular or Protractor much since. If you need help maybe @scottwalter-nice would know how to get it working?

@skyler1ackerman
Copy link

I see the circle appear the very first time my code clicks anything, then it vanishes, anyone have any ideas?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment