Child pages
  • Setting Up Selenium for Web Client UI Testing
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 29 Next »

This chapter provides information on how to set up Selenium for visual testing the Servoy solutions in Web Client. Selenium IDE will record and playback the user clicks on the UI.

In This Chapter

Setup Selenium

  • Install the Selenium IDE plugin for Firefox from http://seleniumhq.org/download/
  • Create a folder wicketPathLocatorBuilder in the local drive with the file user-extension.js.wicketPathLocatorBuilder inside. To add the wicketpath locator into the Selenium IDE Locator Builder options paste the following snippet into this file.

    LocatorBuilders.add('wicketpath', function(e) {
      var path = '';
      var current = e;
      while (current != null) {
        if (current.parentNode != null) {
          path = this.relativeXPathFromParent(current) + path;
          if (1 == current.parentNode.nodeType && // ELEMENT_NODE
              current.parentNode.getAttribute("wicketpath")) {
            return this.preciseXPath("//" + this.xpathHtmlElement(current.parentNode.nodeName.toLowerCase()) +
                "[@wicketpath=" + this.attributeValue(current.parentNode.getAttribute('wicketpath')) + "]" +
                path, e);
          }
        } else {
          return null;
        }
        current = current.parentNode;
      }
      return null;
        });
  • Add the following code inside the  user-extension.js.wicketPathLocatorBuilder to include the command waitForWicketAjax as a Selenium IDE extension. The waitForWicketAjax command checks if there is a pending wicket Ajax request from the current Browser window and will wait until the wicket Ajax request is completed.

    /*
     * Some usefull links:
     * http://www.packtpub.com/article/user-extensions-add-ons-selenium-testing-tools
     * http://selenium.polteq.com/en/
     */
    Selenium.prototype.isWicketAjaxReady = function(locator, text) {
    	//TODO extend with checking JQuery.ajax as well. See http://hedleyproctor.com/2012/07/effective-selenium-testing/
    	if (!selenium.browserbot.getCurrentWindow().wicketAjaxBusy) {
    		var doc = selenium.browserbot.getCurrentWindow().document;
    		var scriptTag = doc.createElement("script");
    		scriptTag.type = "text/javascript"
    		var script = 'wicketAjaxBusy = function() {for (var c in Wicket.channelManager.channels) {if (Wicket.channelManager.channels[c].busy) { Wicket.Log.info("Channel " + c + " is busy");return true;}}Wicket.Log.info("No channels are busy");return false;}';
    		try {
    			scriptTag.appendChild(document.createTextNode(script));
    		} catch (e) {
    			scriptTag.text = script;
    		}
    		doc.body.appendChild(scriptTag);
    	}
    	return !selenium.browserbot.getCurrentWindow().wicketAjaxBusy()
    };
  • Open the Selenium IDE, go to menu Options > Options. In the Selenium Core extensions input field, paste the path to the earlier created folder wicketPathLocatorBuilder.
  • Go to Options > Locator Builders and move the wicketpath entry to the top of the list
  • Restart FireFox.

Setup Servoy

  • setup web client property servoy.webclient.debug.wicketpath to true.
  • Save and restart the Application Server.

Selenium Description

Main Window Description

  • The left part of the main window contains the tree structure that represents the test-suite. The right side displays the details of a selected node. At the bottom of the main window is the terminal output area, which displays standard messages and communications in between the test-suite and the client application being tested.
  • The basic structure of a test-suite and thus the child nodes of the Test-suite root node is fixed. An arbitrary number of Test-set, Test-case or Test nodes are followed by the Procedures, Extras and Windows and components nodes. The Procedures node holds Packages and Procedures.

Starting the Application

  • If Selenium and Servoy Web Client are configured, then the solution can be run on Web Client with Firefox browser.
  • When the application is running on browser, then the Selenium can be started using CTRL+ALT+S or going to Firefox > Web Developer > Selenium IDE.

Recording Events

  • Click record button
  • Go to WC, do the actions needed, typing data / adding records / delete
  • When done go to selenium and hit Stop recording button
  • A sequence is created which can be saved using CTRL+S

Recording Gotcha's

  • When using sendKeys, also add a fireEvent with value blur on the target for the sendKeys, otherwise the sendKeys is not applied
  • When recording, Selenium inserts selectWindow commands. Most of these can be removed. They are only needed when the test needs to switch to another tab or to a different dialog (or back to the main form from a dialog)
  • By default Selenium does not handle Ajax events very well when recording. It inserts simple click events, but those clicks usually result in an Ajax call to the server

Playback - Running the Script

  • If a suite of case is already recorded then can be played from Play entire test suite button
  • For testing case by case of case suite already recorded then can be played from Play current test case button
  • TIP: for easier following of the test run, add a default delay: go to Fast-delay slide bar and adjust the speed of running cases.

Tip: for more detailed documentation and video tutorials user this link: http://jroller.com/selenium/

 

Gotcha's

  • No labels