javascript/webdriver/test/atoms/inject/interactions_test.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>interactions_test</title>
<link rel="stylesheet" href="/filez/_main/third_party/js/qunit/qunit.css">
<script src="/filez/_main/third_party/js/qunit/qunit.js"></script>
<script src="/filez/_main/third_party/js/qunit/qunit_test_runner.js"></script>
<script src="../../test_bootstrap.js"></script>
<script src="../../../atoms/inject/deps.js"></script>
<script>
goog.require('bot.Keyboard');
goog.require('bot.Mouse');
goog.require('bot.color');
goog.require('bot.dom');
goog.require('bot.inject.cache');
goog.require('bot.json');
goog.require('bot.response');
goog.require('bot.userAgent');
goog.require('goog.array');
goog.require('webdriver.Key');
goog.require('webdriver.atoms.inject.action');
</script>
<style>
#click-box {
  position: absolute;
  width: 75px;
  height: 75px;
  top: 50px;
  left: 50px;
}
</style>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<input id="focus-sync">
<input id="text-input">
<div id="click-box"></div>
<script>
var clickBox = document.getElementById('click-box');
clickBox.style.background = 'red';
clickBox.onclick = function(e) {
  e = e || window.event;
  clickBox.style.background = 'blue';
  if (e.clientX > 100) {
    clickBox.style.background = 'cyan';
  }
  if (e.clientY > 100) {
    clickBox.style.background = 'yellow';
  }
};
clickBox.oncontextmenu = function() {
  clickBox.style.background = 'green';
  return false;
};


function resetFocus() {
  var sink = document.getElementById('focus-sync');
  focusElement(sink);
}


function focusElement(el) {
  el.focus();
  QUnit.assert.strictEqual(bot.dom.getActiveElement(document), el);
}


QUnit.test('sendKeysToActiveElement', function(assert) {
  resetFocus();

  var input = document.getElementById('text-input');
  focusElement(input);

  var state = doType('foo');
  assert.strictEqual(input.value, 'foo');

  resetFocus();

  state['pressed'].push(bot.Keyboard.Keys.SHIFT);
  state = doType('more', state);
  assert.strictEqual(input.value, 'foo');

  focusElement(input);
  doType(['bar', webdriver.Key.SHIFT, 'baz'], state);

  // IE<10 does not preserve cursor position after changing focus.
  if (bot.userAgent.IE_DOC_PRE10) {
    assert.strictEqual(input.value, 'BARbazfoo');
  } else {
    assert.strictEqual(input.value, 'fooBARbaz');
  }

  function doType(keys, opt_state) {
    var res = webdriver.atoms.inject.action.sendKeysToActiveElement(
        keys, opt_state);
    res = bot.json.parse(res);
    bot.response.checkResponse(res);
    return res['value'];
  }
});

QUnit.test('mouseClick', function(assert) {
  // Reset box color first
  clickBox.style.background = 'red';
  assert.strictEqual(getColor(), 'rgba(255, 0, 0, 1)', 'initial state is wrong');

  var state = doClick(bot.Mouse.Button.LEFT, {
    clientXY: {x: 60, y: 60}  // Click over the clickBox.
  });
  assert.strictEqual(getColor(), 'rgba(0, 0, 255, 1)');
  assert.ok(!!state['element']);
  assert.strictEqual(
      bot.inject.cache.getElement(state['element']['ELEMENT']),
      clickBox);

  state = doClick(bot.Mouse.Button.RIGHT, state);
  assert.strictEqual(getColor(), 'rgba(0, 128, 0, 1)');

  state.clientXY.x += 41;
  assert.strictEqual(state.clientXY.x, 101);
  doClick(bot.Mouse.Button.LEFT, state);
  assert.strictEqual(getColor(), 'rgba(0, 255, 255, 1)');

  state.clientXY.y += 41;
  assert.strictEqual(state.clientXY.y, 101);
  doClick(bot.Mouse.Button.LEFT, state);
  assert.strictEqual(getColor(), 'rgba(255, 255, 0, 1)');

  state.clientXY = {x: 50, y: 50};
  doClick(bot.Mouse.Button.LEFT, state);
  assert.strictEqual(getColor(), 'rgba(0, 0, 255, 1)');

  function doClick(button, state) {
    var res = webdriver.atoms.inject.action.mouseClick(button, state);
    res = bot.json.parse(res);
    bot.response.checkResponse(res);
    return res['value'];
  }

  function getColor() {
    var value = bot.dom.getEffectiveStyle(clickBox, 'backgroundColor');
    return bot.color.standardizeColor('backgroundColor', value);
  }
});
</script>
</body>
</html>