Skip to content

Instantly share code, notes, and snippets.

@chrisirhc

chrisirhc/README.md

Last active December 19, 2015 02:29
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chrisirhc/5883173 to your computer and use it in GitHub Desktop.
Save chrisirhc/5883173 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

Case 3

Read about this and more on the ThousandEyes blog.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<pre id="result"></pre>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
/* global $ */
var BOXES = 3,
BOX_SIZE = 80,
boxReady = [],
boxCount = 0;
function loadBoxes() {
for (var i = 0; i < BOXES; i++) {
setTimeout(addBox, Math.random()*100, i);
}
}
function addBox(i) {
var $box = $('<div></div>')
.attr('id', 'box-' + boxCount)
.addClass('box')
.appendTo('body');
var $boxLabel = $('<span></span>')
.text( i + 1 )
.appendTo($box);
var $button = $('<button></button>')
.text('GO')
.appendTo($box);
$button
.on('click', function () {
if (i === 0 || boxReady[i - 1]) {
$boxLabel.text('Processing...');
startProcessing($box, $boxLabel, i);
} else {
$box.css('background', 'lightpink');
$('#result').append('Fail :(\n');
}
});
boxCount++;
}
function startProcessing($box, $boxLabel, i) {
setTimeout(function () {
$boxLabel.text('Done');
boxReady[i] = true;
$box.css('background', 'lightgreen');
if (i === BOXES - 1) {
$('#result').append('Horray!!\n');
}
}, 2000);
}
loadBoxes();
Raw
style.css
.box {
display: inline-block;
border: 1px solid gray;
margin: 1px;
width: 80px;
height: 80px;
}
button {
display: block;
}
@Cobi
Copy link

Cobi commented Jul 14, 2013

spoiler (in Javascript + jQuery, since I do not know selenium):

! function($) {
  var intervalId = null;
  var doIt = function() {
    if(intervalId != null)
      clearInterval(intervalId);
  };
  var updateDoIt = function(newFunction) {
    doIt = newFunction(doIt);
  };
  $.each([3, 2, 1], function(k, v) {
    var parent = $('.box span:contains(' + v + ')').parent();
    var button = parent.find('button');
    updateDoIt(function(oldDoIt) {
      return function() {
        if(parent.find('span').text() == 'Done')
          doIt = oldDoIt;
      };
    }); 
    updateDoIt(function(oldDoIt) {
      return function() {
        button.click();
        doIt = oldDoIt;
      };
    });
  });
  intervalId = setInterval(function() { doIt(); }, 500);
}(jQuery);

And a general solution for n boxes:

! function($) {
  var intervalId = null;
  var doIt = function() {
    if(intervalId != null)
      clearInterval(intervalId);
  };
  var updateDoIt = function(newFunction) {
    doIt = newFunction(doIt);
  };
  for(i = $('.box').length; i > 0; i--) (function(v) {
    var parent = $('.box span:contains(' + v + ')').filter(function() { return $(this).text() == v; }).parent();
    var button = parent.find('button');
    updateDoIt(function(oldDoIt) {
      return function() {
        if(parent.find('span').text() == 'Done')
          doIt = oldDoIt;
      };
    }); 
    updateDoIt(function(oldDoIt) {
      return function() {
        button.click();
        doIt = oldDoIt;
      };
    });
  })(i);
  intervalId = setInterval(function() { doIt(); }, 500);
}(jQuery);

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