{"id":600,"date":"2011-10-27T11:01:00","date_gmt":"2011-10-27T11:01:00","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/2012\/10\/testing-gwt-apps-with-selenium-or-webdriver.html"},"modified":"2012-10-21T20:23:34","modified_gmt":"2012-10-21T20:23:34","slug":"testing-gwt-apps-with-selenium-or","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2011\/10\/testing-gwt-apps-with-selenium-or.html","title":{"rendered":"Testing GWT Apps with Selenium or WebDriver"},"content":{"rendered":"
Good functional testing is one of the most difficult tasks for web application developers and their teams. It is a challenge to develop tests that are cheap to maintain and yet provide good test coverage, which helps reduce QA costs and increase quality.<\/p>\n

Both Selenium and WebDriver (which is essentially now the successor to Selenium) provide a good way to functionally test web applications in multiple target environments without manual work. In the past, web UIs were built using the page navigation to allow users to submit forms, etc. These days, more and more web applications use Ajax and therefore act and look a lot more like desktop applications. However, this poses problems for testing \u2013 Selenium and WebDriver are designed to work with user interations resulting in page navigation and don\u2019t play well with AJAX apps out of the box.<\/p>\n

GWT-based applications in particular have this problem, but there are some ways I\u2019ve found to develop useful and effective tests. GWT also poses other issues in regards to simulating user input and locating DOM elements, and I discuss those below. Note that my code examples use Groovy to make them concise, but they can be pretty easily converted to Java code.<\/p>\n

Problem 1: Handling Asynchronous Changes<\/strong><\/p>\n

One issue that developers face pretty quickly when testing applications based on GWT is detecting and waiting for a response to user interaction. For example, a user may click a button which results in an AJAX call which would either succeed and close a window or, alternatively, show an error message. What we need is a way to block until we see the expected changes, with a timeout so we can fail if we don\u2019t see the expected changes.<\/p>\n

Solution: Use WebDriverWait<\/strong><\/p>\n

The easiest way to do this is by taking advantage of the WebDriverWait (or Selenium\u2019s Wait). This allows you to wait on a condition and proceed when it evaluates to true. Below I use Groovy code for the conciseness of using closures, but the same can be done in Java, though with a bit more code due to the need for anonymous classes.<\/p>\n

def waitForCondition(Closure closure) {\r\n    int timeout = 20\r\n    WebDriverWait w = new WebDriverWait(driver, timeout)\r\n    w.until({\r\n        closure() \/\/ wait until this closure evaluates to true\r\n    } as ExpectedCondition)\r\n}\r\n\r\ndef waitForElement(By finder) {\r\n    waitForCondition {\r\n        driver.findElements(finder).size() > 0;\r\n    }\r\n}\r\n\r\ndef waitForElementRemoval(By finder) {\r\n    waitForCondition {\r\n        driver.findElements(finder).size() == 0;\r\n    }\r\n}\r\n\r\n\/\/ now some sample test code \r\n\r\nsubmitButton.click() \/\/ submit a form\r\n\r\n\/\/ wait for the expected error summary to show up\r\nwaitForElement(By.xpath(\"\/\/div[@class='error-summary']\"))\r\n\/\/ maybe some more verification here to check the expected errors\r\n\r\n\/\/ ... correct error and resubmit\r\n\r\nsubmitButton.click()\r\nwaitForElementRemoval(By.xpath(\"\/\/div[@class='error-summary']\"))\r\nwaitForElementRemoval(By.id(\"windowId\"))\r\n<\/pre>\n
As you can see from the example, your code can focus on the actual test logic while handling the asynchronous nature of GWT applications seamlessly.
 
<\/div> <\/div><\/p>\n
Problem 2: Locating Elements when you have little control over DOM<\/strong><\/p>\n
In web applications that use templating (JSPs, Velocity, JSF, etc.), you have good control and easy visibility into the DOM structure that your pages will have. With GWT, this isn\u2019t always the case. Often, you\u2019re dealing with nested elements that you can\u2019t control at a fine level.<\/p>\n
With WebDriver and Selenium, you can target elements using a few methods, but the most useful are by DOM element ID and XPath. How can we leverage these to get maintainable tests that don\u2019t break with minor layout changes?<\/p>\n
Solution: Use XPath combined with IDs to limit scope<\/strong><\/p>\n
In my experience, to develop functional GWT tests in WebDriver, you should use somewhat loose XPath as your primary means of locating elements, and supplement it by scoping these calls by DOM ID, where applicable.<\/p>\n
In particular, use IDs at top level elements like windows or tabs that are unique in your application and won\u2019t exist more than once in a page. These can help scope your XPath expressions, which can look for window or form titles, field labels, etc.<\/p>\n
Here are some examples to get you going. Note that we use \/\/ and * in our XPath to keep our expressions flexible so that layout changes do not break our tests unless they are major.<\/p>\n
By byUserName = By.xpath(\"\/\/*[@id='userTab']\/\/*[text()='User Name']\/..\/\/input\")\r\nWebElement userNameField = webDriver.findElement(byUserName)\r\nuserNameField.sendKeys(\"my new user\")\r\n\r\n\/\/ maybe a user click and then wait for the window to disappear\r\nBy submitLocator = By.xpath(\"\/\/*[@id='userTab']\/\/input[@type='submit']\")\r\nWebElement submit = webDriver.findElement(submitLocator)\r\nsubmit.click()\r\n\r\n\/\/ use our helper method from Problem 1\r\nwaitForElementRemoval By.id(\"userTab\")\r\n<\/pre>\n
Problem 3: Normal element interaction methods don\u2019t work!<\/strong><\/p>\n
GWT and derivatives (Vaadin, GXT, etc.) often are doing some magic behind the scenes as far as managing the state of the DOM goes. To the developer, this means you\u2019re not always dealing with plain <input> or <select>, etc. elements. Simply setting the value of the field through normal means may not work, and using WebDriver or Selenium\u2019s click methods may not work.<\/p>\n
WebDriver has improved in this regard, but issues still persist.<\/p>\n
Solution: Unfortunately, just some workarounds<\/strong><\/p>\n
The main problems you\u2019re likely to encounter relate to typing into fields and clicking elements.<\/p>\n
Here are some variants that I have found necessary in the past to get around clicks not working as expected. Try them if you are hitting issues. The examples are in Selenium, but they can be adapted to the corresponding calls in WebDriver if you require them. You may also use the Selenium adapter for WebDriver (WebDriverBackedSelenium) if you want to use the examples directly.<\/p>\n
CLICK ISSUES<\/strong><\/i>
\nSometimes elements won\u2019t respond to a click() call in Selenium or WebDriver. In these cases, you usually have to simulate events in the browser. This was true more of Selenium before 2.0 than WebDriver.<\/p>\n
\/\/ Selenium's click sometimes has to be simulated with events.\r\ndef fullMouseClick(String locator) {\r\n    selenium.mouseOver locator\r\n    selenium.mouseDown locator\r\n    selenium.mouseUp locator\r\n}\r\n\r\n\/\/ In some cases you need only mouseDown, as mouseUp may be\r\n\/\/ handled the same as mouseDown.\r\n\/\/ For example, this could result in a table row being selected, then deselected.\r\ndef mouseOverAndDown(String locator) {\r\n    selenium.mouseOver locator\r\n    selenium.mouseDown locator\r\n}\r\n<\/pre>\n
TYPING ISSUES<\/strong><\/i>
\nThese are the roundabout methods of typing I have been able to use successfully in the past when GWT doesn\u2019t recognize typed input.<\/p>\n
\/\/ fires only key events (works for most GWT inputs)\r\n\/\/ Useful if WebDriver sendKeys() or Selenium type() aren't cooperating.\r\ndef typeWithEvents(String locator, String text) {\r\n    def keyEvents = [\"keydown\", \"keypress\", \"keyup\"]\r\n    typeWithEvents(locator, text, keyEvents)\r\n}\r\n\r\n\/\/ fires key events, plus blur and focus for really picky cases\r\ndef typeWithFullEvents(String locator, String text) {\r\n    def fullEvents = [\"keydown\", \"keypress\", \"keyup\", \"blur\", \"focus\"]\r\n    typeWithEvents(locator, text, fullEvents)\r\n}\r\n\r\n\/\/ use this directly to customize which events are fired\r\ndef typeWithEvents(String locator, String text, def events) {\r\n    text.eachWithIndex { ch, i ->\r\n        selenium.type locator, text.substring(0, i+1)\r\n        events.each{ event ->\r\n            selenium.fireEvent locator, event\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
Note that the exact method that works will have to be figured out by trial-and-error and in some cases, you may get different behaviour in different browsers, so if you run your functional tests against different environments, you\u2019ll have to ensure your method works for all of them.<\/p>\n
Conclusion<\/strong><\/p>\n
Hopefully some of you find these tips useful. There are similar tips out there but I wanted to compile a good set of examples and workarounds so that others in similar situations don\u2019t hit dead-ends or waste time on problems that require lots of guessing and time.<\/p>\n
Reference: <\/i><\/strong>Testing GWT Apps with Selenium or WebDriver<\/a> from our JCG partner<\/a>s at the Carfey Software blog<\/a>.<\/p>\n
Related Articles :<\/i><\/strong><\/div>\n