Troglodyne
/
Selenium-Remote-Driver


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
							<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Testing Javascript</title>
    <script type="text/javascript">
        var seen = {};

        function updateContent(input) {
            document.getElementById('result').innerHTML = "<p>" + input.value + "</p>";
        }

        function displayMessage(message) {
            document.getElementById('result').innerHTML = "<p>" + message + "</p>";
        }

        function appendMessage(message) {
            document.getElementById('result').innerHTML += message + " ";
        }

        function register(message) {
          if (!seen[message]) {
            appendMessage(message);
            seen[message] = true;
          }
        }

        function delayedShowHide(delay, show) {
          var blackBox = document.getElementById('clickToHide');
          window.setTimeout(function() {
            blackBox.style.display = show ? '' : 'none';
          }, delay);
        }
    </script>
    <script type="text/javascript">
        var startList = function() {
            // Ugh. Let's hope no-one is faking their user agent when running the tests
            if (navigator.userAgent.indexOf("MSIE") != -1) {
                var navRoot = document.getElementById("nav");
                for (var i = 0; i < navRoot.childNodes.length; i++) {
                    var node = navRoot.childNodes[i];
                    if (node.nodeName == "LI") {
                        node.onmouseover = function() {
                            this.className += " over";
                        };
                        node.onmouseout = function() {
                            this.className = this.className.replace(" over", "");
                        };
                    }
                }
            }
        };
        window.onload=startList;
    </script>
    <style type="text/css">
        #nav {
            padding: 0; margin: 0; list-style: none;
        }
        #nav li {
            float: left; position: relative; width: 10em;
        }
        #nav li ul {
            display: none; position: absolute; top: 1em; left: 0;
        }
        #nav li > ul { top: auto; left: auto; }
        #nav li:hover ul, #nav li.over ul{ display: block; background: white; }
    </style>
</head>
<body>
<h1>Type Stuff</h1>

<div>
    <ul id="nav">
        <li id="menu1">Menu 1
            <ul>
                <li id="item1" onclick="displayMessage('item 1');">Item 1</li>
                <li>Item 2</li>
            </ul>
        </li>
    </ul>
</div>

<div id="result">
    &nbsp;
</div>
<div id="formageddon">
    <form action="#">
        Key Up: <input type="text" id="keyUp" onkeyup="javascript:updateContent(this)"/><br/>
        Key Down: <input type="text" id="keyDown" onkeydown="javascript:updateContent(this)"/><br/>
        Key Press: <input type="text" id="keyPress" onkeypress="javascript:updateContent(this)"/><br/>
        Change: <input type="text" id="change" onkeypress="javascript:displayMessage('change')"/><br/>
        <textarea id="keyDownArea" onkeydown="javascript:updateContent(this)" rows="2" cols="15"></textarea>
        <textarea id="keyPressArea" onkeypress="javascript:updateContent(this)" rows="2" cols="15"></textarea>
        <textarea id="keyUpArea" onkeyup="javascript:updateContent(this)" rows="2" cols="15"></textarea>
        <select id="selector" onchange="javascript:updateContent(this)">
            <option value="foo">Foo</option>
            <option value="bar">Bar</option>
        </select>
        <input type="checkbox" id="checkbox" value="checkbox thing" onchange="javascript:updateContent(this)"/>
        <input id="clickField" type="text" onclick="document.getElementById('clickField').value='Clicked';" value="Hello"/>
        <input id="clearMe" value="Something" onchange="displayMessage('Cleared')"/>
    </form>
</div>

<div>
    <p><a href="#" onclick="javascript:document.title='Changed'">Change the page title!</a></p>

    <p><a onclick="javascript:document.title='Changed'" id="nohref">No href</a></p>

    <p><a id="updatediv" href="#" onclick="javascript:document.getElementById('dynamo').innerHTML = 'Fish and chips!';">Update a
        div</a></p>
</div>

<div id="dynamo">What's for dinner?</div>

<div id="mousedown" onmousedown="javascript:displayMessage('mouse down');">
    <p>Click for the mouse down event</p>
    <span><p id="child">Here's some text</p></span>
</div>

<div id="mouseup" onmouseup="javascript:displayMessage('mouse up');">
    <p>Click for the mouse up event</p>
</div>

<div id="mouseclick" onclick="javascript:displayMessage('mouse click');">
    <p>Click for the mouse click event</p>
</div>

<div id="error" onclick="document.getElementById('doesnotexist').innerHTML = 'cheese';">
    Clicking this causes a JS exception in the click handler
</div>

<div>
  <form action="resultPage.html" id="on-form">
    <input id="theworks"
           onfocus="appendMessage('focus')"
           onkeydown="appendMessage('keydown')"
           onkeypress="appendMessage('keypress')"
           onkeyup="appendMessage('keyup')"
           onblur="appendMessage('blur')"
           onchange="appendMessage('change')"
           />

    <input id="changeable" name="changeable" onfocus="appendMessage('focus')" onchange="appendMessage('change')" onblur="appendMessage('blur')"/>
    <button type="button" id="plainButton"
            onfocus="appendMessage('focus')"
            onkeydown="appendMessage('keydown')"
            onkeypress="appendMessage('keypress')"
            onkeyup="appendMessage('keyup')"
            onblur="appendMessage('blur')"
            onclick="appendMessage('click')"
            onmousedown="appendMessage('mousedown ')"
            onmouseup="appendMessage('mouseup ')"
            onmouseover="register('mouseover ')"
            onmousemove="register('mousemove ')"
    >
        <b>Go somewhere</b>
    </button>
    <button type="submit" id="submittingButton"><emph>submit</emph></button>
    <button type="button" id="jsSubmitButton" onclick="javascript:document.getElementById('on-form').submit();">Submitomatic</button>

    <button type="button" id="switchFocus" onclick="document.getElementById('theworks').focus();">Switch focus</button>
    <button type="button" onclick="var element = document.getElementById('switchFocus'); var clickEvent = document.createEvent('MouseEvents'); clickEvent.initMouseEvent('click', true, true, null, 0, 0, 0, 0, 0,false, false, false, false, 0, element);element.dispatchEvent(clickEvent);">Do magic</button>
  </form>
  <form action="javascriptPage.html" id="submitListeningForm" onsubmit="appendMessage('form-onsubmit '); return false;">
    <p>
      <input id="submitListeningForm-text" type="text" onsubmit="appendMessage('text-onsubmit ')" onclick="appendMessage('text-onclick ');" />
      <input id="submitListeningForm-submit" type="submit" onsubmit="appendMessage('submit-onsubmit ')" onclick="appendMessage('submit-onclick ');" />
    </p>
  </form>
</div>

<p id="suppressedParagraph" style="display: none">A paragraph suppressed using CSS display=none</p>

<div>
    <p id="displayed">Displayed</p>

    <form action="#"><input type="hidden" name="hidden" /> </form>

    <p id="none" style="display: none;">Display set to none</p>

    <p id="hidden" style="visibility: hidden;">Hidden</p>

    <div id="hiddenparent" style="height: 2em; display: none;">
      <div id="hiddenchild">
        <a href="#" id="hiddenlink">ok</a>
      </div>
    </div>
    <div style="visibility: hidden;">
      <span>
        <input id="unclickable" />
        <input type="checkbox" id="untogglable" checked="checked" />Check box you can't see
      </span>
    </div>

    <p id="outer" style="visibility: hidden">A <b id="visibleSubElement" style="visibility: visible">sub-element that is explicitly visible</b> using CSS visibility=visible</p>
</div>

<div>
    <form>
        <input type="text" id="keyReporter" size="80"
               onkeyup="appendMessage('up: ' + event.keyCode)"
               onkeypress="appendMessage('press: ' + event.keyCode)"
               onkeydown="displayMessage(''); appendMessage('down: ' + event.keyCode)" />
        <input name="suppress" onkeydown="if (event.preventDefault) event.preventDefault(); event.returnValue = false; return false;" onkeypress="appendMessage('press');"/>
    </form>
</div>

<!-- Used for testing styles -->
<div style="background-color: green;" id="green-parent">
  <p id="style1">This should be greenish</p>
    <ul>
      <li id="green-item">So should this</li>
      <li id="red-item" style="background-color: red;">But this is red</li>
    </ul>
</div>

<p id="zeroheight" style="height:0px;">This is a foo</p>

<p id="zerowidth" style="width:0;">This is a bar</p>

<a href="#" id="close" onclick="window.close();">Close window</a>

<div id="delete" onclick="var d = document.getElementById('deleted'); this.removeChild(d);">
    <p id="deleted">I should be deleted when you click my containing div</p>
    <p>Whereas, I should not</p>
</div>

<div>
    <span id="hideMe" onclick="this.style.display = 'none';">Click to hide me.</span>
</div>

<div style="margin-top: 10px;">
  Click actions delayed by 3000ms:
  <div id="clickToShow" onclick="delayedShowHide(3000, true);"
       style="float: left;width: 100px;height:100px;border: 1px solid black;">
    Click to show black box
  </div>
  <div id="clickToHide" onclick="delayedShowHide(3000, false);"
       style="float: left;width: 100px;height:100px;border: 1px solid black;
              background-color: black; color: white; display: none;">
    Click to hide black box
  </div>
  <div style="clear: both"></div>
</div>

</body>
</html>