improvements in webdriver UI

Author: Vasyl Vavrychuk

web/WebDriverJsDemo.html

@@ -11,6 +11,10 @@
         border-width: thin;
         border-color: gray;
       }
+
+      #keyboard input {
+        min-width: 30px;
+      }
     </style>
     <script src="webdriver.js"></script>
     <script src="base64-arraybuffer.js"></script>
@@ -33,31 +37,30 @@
           <input type="button" value="GET" onclick="wd.get()"/>
           <input type="button" value="Source" onclick="wd.source()"/>
           <input type="button" value="Screenshot" onclick="wd.screenshot()"/>
+          <select onmouseup="wd.logs(this.options[this.selectedIndex].value)">
+            <option>Logs</option>
+            <option>browser</option>
+            <option>driver</option>
+          </select>
         </td>
       </tr>
     </table>
 
     <div class="commandBlock">
-      <div>
-        <input type="submit" value="Find element" onclick="wd.findElementById()">
-        by id
-        <input name="elementId" type="text"/>
-      </div>
-      <div>
-        <input type="submit" value="Find element" onclick="wd.findElementByName()">
-        by name
-        <input name="elementName" type="text"/>
-      </div>
-      <div>
-        <input type="submit" value="Find element" onclick="wd.findElementByTagName()">
-        by tag name
-        <input name="elementTagName" type="text"/>
-      </div>
+      Find element by
+      <select name="findElementCriteria">
+        <option>id</option>
+        <option>name</option>
+        <option>tag name</option>
+        <option>xpath</option>
+      </select>
+      <input name="findElementKey" type="text"/>
+      <input type="submit" value="Find element" onclick="wd.findElement()">
     </div>
 
     <div class="commandBlock">
       <div style="position: absolute;">Key down:</div>
-      <div style="margin-left: 80px;">
+      <div id="keyboard" style="margin-left: 80px;">
         <div>
           <input type="submit" value="ESC" onclick="wd.sendKeys(webdriver.Key.ESCAPE)"/>
           <input type="submit" value="Q" onclick="wd.sendKeys(this.value)"/>
@@ -70,6 +73,7 @@
           <input type="submit" value="I" onclick="wd.sendKeys(this.value)"/>
           <input type="submit" value="O" onclick="wd.sendKeys(this.value)"/>
           <input type="submit" value="P" onclick="wd.sendKeys(this.value)"/>
+          <input type="submit" value="←" onclick="wd.sendKeys(webdriver.Key.BACK_SPACE)"/>
         </div>
         <div>
           <input type="submit" value="A" onclick="wd.sendKeys(this.value)" style="margin-left: 53px;"/>
@@ -94,14 +98,21 @@
           <input type="submit" value="&#8657;" onclick="wd.sendKeys(webdriver.Key.UP)" style="margin-left: 45px;"/>
         </div>
         <div>
-          <input type="submit" value=" " onclick="wd.sendKeys(this.value)" style="width: 100px; margin-left: 100px;"/>
+          <input type="submit" value=" " onclick="wd.sendKeys(this.value)" style="width: 129px; margin-left: 100px;"/>
           <input type="submit" value="&#8656;" onclick="wd.sendKeys(webdriver.Key.LEFT)" style="margin-left: 91px;"/>
           <input type="submit" value="&#8659;" onclick="wd.sendKeys(webdriver.Key.DOWN)"/>
           <input type="submit" value="&#8658;" onclick="wd.sendKeys(webdriver.Key.RIGHT)"/>
         </div>
       </div>
     </div>
 
+    <div class="commandBlock">
+      <input type="submit" value="List window handles" onclick="wd.listWindowHandles()"/>
+      <select id="windowList" style="visibility: hidden;">
+      </select>
+      <input id="chooseWindow" type="submit" value="Choose window" onclick="wd.chooseWindow()" style="visibility: hidden;"/>
+    </div>
+
     <div class="commandBlock">
       <input type="submit" value="Set window size" onclick="wd.setWindowSize()"/>
       <input name="windowSizeWidth" type="text" style="width: 50px"/>

web/webdriver-app.js

@@ -490,22 +490,35 @@ WebDriverJsController.prototype.screenshot = function() {
   })
 }
 
-WebDriverJsController.prototype.findElementById = function() {
-  this._constructWebDriver();
-  var name = document.getElementsByName('elementId')[0].value;
-  this.element = this.driver.findElement(webdriver.By.id(name));
-}
+WebDriverJsController.prototype.logs = function(type) {
+  if (type === 'Logs')
+    return;
 
-WebDriverJsController.prototype.findElementByName = function() {
   this._constructWebDriver();
-  var name = document.getElementsByName('elementName')[0].value;
-  this.element = this.driver.findElement(webdriver.By.name(name));
+  this.driver.manage().logs().get(type).then(function(entries) {
+    var lines = [];
+    for (var entryIndex in entries) {
+      var entry = entries[entryIndex];
+      lines.push(entry.level.name + ' ' + entry.timestamp + ' ' + entry.message);
+    }
+
+    data = new Blob([lines.join('\n')], {type: 'text/plain'});
+    saveAs(data, 'webdriver.log');
+  })
 }
 
-WebDriverJsController.prototype.findElementByTagName = function() {
+WebDriverJsController.prototype.findElement = function() {
   this._constructWebDriver();
-  var name = document.getElementsByName('elementTagName')[0].value;
-  this.element = this.driver.findElement(webdriver.By.tagName(name));
+  var criteria = document.getElementsByName('findElementCriteria')[0].value;
+  var key = document.getElementsByName('findElementKey')[0].value;
+  if (criteria === 'id')
+    this.element = this.driver.findElement(webdriver.By.id(key));
+  else if (criteria === 'name')
+    this.element = this.driver.findElement(webdriver.By.name(key));
+  else if (criteria === 'tagName')
+    this.element = this.driver.findElement(webdriver.By.tagName(key));
+  else if (criteria === 'xpath')
+    this.element = this.driver.findElement(webdriver.By.xpath(key));
 }
 
 WebDriverJsController.prototype.sendKeys = function(key) {
@@ -522,6 +535,28 @@ WebDriverJsController.prototype.click = function() {
   this.element.click();
 }
 
+WebDriverJsController.prototype.listWindowHandles = function() {
+  this._constructWebDriver();
+
+  var select = document.getElementById('windowList');
+  this.driver.getAllWindowHandles().then(function(handles) {
+    select.innerHTML = '';
+    for (var handle in handles) {
+      var item = document.createElement('option');
+      item.innerHTML = handle;
+      select.appendChild(item)
+    }
+    document.getElementById('windowList').style.visibility = 'visible';
+    document.getElementById('chooseWindow').style.visibility = 'visible';
+  });
+}
+
+WebDriverJsController.prototype.chooseWindow = function() {
+  this._constructWebDriver();
+  var handle = document.getElementById('windowList').value;
+  this.driver.switchTo().window(handle);
+}
+
 WebDriverJsController.prototype.setWindowSize = function() {
   this._constructWebDriver();
   var width = document.getElementsByName('windowSizeWidth')[0].value;