RichFaces - Testing on Mobile Devices


Published on

Slides from my talk on Red Hat Developer Conference 2012 in Brno.

Published in: Technology
1 Comment
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Smart phones Laptops 209.6 Desktops 112.4 Tablets 63.2 Netbooks 29.4
  • Karel showed you what Arquillian is, what it can do ... He showed Drone extension – WebDriver, Selenium, Ajocado I'll show you how we test RichFaces, a Java Server Faces web framework using Arq on desktop in various browsers I'll explain you how we use all the technologies on this slide for testing Then, after you will get familiar with testing web applications on desktop, I'll introduce you to testing on mobile devices (Android) First I'll show you how to test in emulator and then how to speed up your tests Ajocado – works with Selenium 1 which doesn't support mobile browsers
  • When you need to test your Java web app, you need to build your application and create a WAR archive which can be then deployed to a container In last talk Karel showed you how to start a container and deploy you application According to the version of Selenium you are using, you need to start Selenium server Selenium uses JavaScript to automate web pages. runs inside the JavaScript sandbox, Selenium-RC server to get around the same-origin policy, can sometimes cause issues with browser setup WebDriver on the other hand uses native automation from each language. While this means it takes longer to support new browsers/languages, it does offer a much closer ‘feel’ to the browser. If you’re happy with WebDriver, stick with it, it’s the future. There are limitations and bugs right now, but if they’re not stopping you, go for it. Open web browsers – Selenium 2 supports all major browsers run your tests – TestNG / Junit, integration with Arq, Jenkins Review test results – TestNG report, Jenkins plugin for TestNG
  • Sample RichFaces 4 application built using latest Java EE 6 technologies – JSF2, RichFaces 4, CDI, Bean validation Currency converted which converts 30+ currencies from/to Euros Currency converter, exchange rates list, historical chart Downloads data from ECB Tested on JBoss AS 7.0.2 and 7.1.0.Final released this week Screenshot of desktop version
  • This uses default testng.xml
  • Since it is split, it allows us to run tests multiple times on Jenkins i.e. Unit tests once Functional tests with every container and browser Not implemented yet, just a proof of concept
  • You can either use prepared package or construct war yourself If want to use prepared package, you need to run tests after Maven phase package
  • You can either use prepared package or construct war yourself If want to use prepared package, you need to run tests after Maven phase package
  • Include all classes All xhtml files All images, javascript, css All descriptors, e.g. Bean.xml, web.xml, faces-config.xml All Maven dependencies
  • You can use whichever driver that is supported by Drone Firefox Chrome Internet Explorer Android We didn't test OperaDriver yet
  • Althought simple webdriver test might look like this, it's is better to use page factory pattern for creating tests
  • Do you still remember mobile version of RichRates? If we implemented test using page objects, such a object could Select a date Insert an amount Click the “Calculate” button Select a currency Swap currencies Verify the result of calculation
  • I focus on emulators because we need to run our tests in continuous integration server (Jenkins) and physical devices don't scale
  • As you could see, it is not very fast, mainly because it is an emulator – it emulate an ARM processor. However, there is a solution which can speed up your Android.
  • You can download several prepared images which you can install to a virtual machine, e.g. VirtualBox I tried both Android 3.2 and 4.0 4.0 latest release doesn't work, can be installed but cannot be started Nightly build of 4.0 works like a charm I used an image for Asus EEE, it's netbook but I set up it to have lower resolution so it behaves like a mobile phone It's not ARM but good enough for testing web Fast !!! Unfortunately not as fast as desktop browsers
  • The only drawback is that it sends user agent string as a tablet so e.g. Google serves you a tablet version of search
  • Android-server-2.6.0.apk for Android 2.2,2.3 Android-server-newest.apk for Android 3+
  • Arquillian TestNG tests are fully supported by TestNG Eclipse plugin so it's possible to run whole test suite, selected class or selected method
  • Since TestNG is supported well in Eclipse, debugging is very easy. One can debug tests running in both emulator and android-x86
  • Android eclipse plugin helps a lot with creating new emulators, starting them etc However, it is manual process. Karel created Arq extension that can automate also this part of testing. It was created last week so it's still hot. Unfortunately, we didn't manage to integrate it to RichRates application.
  • Unit tests should run very fast so it doesn't make sense to log which tests is would slower test execution. On the other hand, functional tests usually run much longer (on Android even few seconds). We find it useful to be able to watch test execution progress, especially on Jenkins.
  • After method, always run Result status check Captures screenshots on all major browsers including Android Screenshot contains whole page, not only visible area Dalo by sa implementovat ako Testng listener?
  • Currently we use android plugin on Jenkins You need to install Android SDK on Jenkins slave We run a script that deploys android-server.apk and runs the application
  • RichFaces - Testing on Mobile Devices

    1. RichFaces – Testing on Mobile Devices Pavol Pitoňák Quality Assurance Engineer, Red Hat 17 Feb 2012
    2. Why Are We Doing This? <ul><li> </li></ul>
    4. Testing a Java Web Application <ul><li>Build archive
    5. Start a container
    6. Deploy archive
    7. Open web browser
    8. Run tests (continuously)
    9. Review test results </li></ul>
    10. RichRates <ul><li>
    11. </li></ul>
    12. <ul> </ul>
    13. <ul> </ul>
    14. <ul> </ul>
    15. <ul> </ul>
    16. <ul> </ul>
    17. Project Structure <ul><li>Standard Maven structure
    18. testng.xml
    19. testng-ftest.xml
    20. testng-all.xml </li></ul>
    21. Running Unit Tests <ul>mvn clean package testng.xml </ul>
    22. Running Functional Tests <ul>mvn clean package -P jbossas-managed-71,ftest testng-ftest.xml </ul>
    23. Running All Tests <ul>mvn clean package -P jbossas-managed-71,all-tests testng-all.xml </ul>
    24. Sample Unit Test <ul>public class UAgentInfoTest { <li>@Test
    25. public void testIPad() {
    26. Assert.assertTrue(...);
    27. }
    28. } </li></ul>
    29. Sample Arquillian Test <ul>public class SkinBeanTest extends Arquillian { <li>@Inject private SkinBean skinBean;
    30. @Deployment
    31. public static JavaArchive createTestArchive() {
    32. return ...;
    33. }
    34. @Test
    35. public void testDefaultSkin() {
    36. Assert.assertEquals(skinBean.getSkin(), &quot;blueSky&quot;);
    37. }
    38. } </li></ul>
    39. Sample WebDriver Test public class SampleTest extends Arquillian { @Drone public WebDriver driver; @ArquillianResource private URL deployedRoot; @Deployment public static WebArchive createTestArchive() { return ...; } @Test public void testDefaultSkin() { driver.get(“”); ... } }
    40. Deployment <ul><li>@Deployment(testable = false)
    41. public static WebArchive createTestArchive() {
    42. WebArchive war = ShrinkWrap.createFromZipFile(WebArchive.class, new File(&quot;target/richrates.war&quot;));
    43. }
    44. ... or construct the WAR yourself :) </li></ul>
    45. Deployment <ul><li>@Deployment(testable = false)
    46. public static WebArchive createTestArchive() {
    47. WebArchive war = ShrinkWrap.createFromZipFile(WebArchive.class, new File(&quot;target/richrates.war&quot;));
    48. }
    49. ... or construct the WAR yourself :) </li></ul>
    50. Deployment 2 <ul><li>@Deployment(testable = false)
    51. public static WebArchive createTestArchive() {
    52. MavenDependencyResolver resolver = DependencyResolvers.use(MavenDependencyResolver.class).loadMetadataFromPom( &quot;pom.xml&quot;);
    53. WebArchive war = ShrinkWrap.create(WebArchive.class, &quot;richrates.war&quot;);
    54. war.addPackage(&quot;org.richfaces.examples.richrates&quot;);
    55. war.addPackage(&quot;org.richfaces.examples.richrates.annotation&quot;);
    56. war.addPackages(true, &quot;org.slf4j&quot;);
    57. war.merge(ShrinkWrap.create(ExplodedImporter.class, &quot;tmp1.war&quot;).importDirectory(&quot;src/main/webapp&quot;).as(WebArchive.class));
    58. war.merge(ShrinkWrap.create(ExplodedImporter.class, &quot;tmp2.war&quot;).importDirectory(&quot;src/main/resources&quot;).as(WebArchive.class), &quot;WEB-INF/classes&quot;);
    59. war.addAsLibraries(resolver.artifact(&quot;org.richfaces.ui:richfaces-components-ui&quot;).resolveAsFiles());
    60. war.addAsLibraries(resolver.artifact(&quot;org.richfaces.core:richfaces-core-impl&quot;).resolveAsFiles());
    61. war.addAsLibraries(resolver.artifact(&quot;org.jdom:jdom&quot;).resolveAsFiles());
    62. war.addAsLibraries(resolver.artifact(&quot;joda-time:joda-time&quot;).resolveAsFiles());
    63. return war;
    64. } </li></ul>
    65. Arquillian.xml <ul><li><extension qualifier=&quot;webdriver&quot;>
    66. <property name=&quot;implementationClass&quot;> org.openqa.selenium.firefox.FirefoxDriver </property>
    67. </extension>
    68. -Darquillian.browser.implementation.class=... </li></ul>
    69. Arquillian.xml <ul><li>Define your containers
    70. Maven profiles </li></ul>
    71. Sample WebDriver Test public class SampleTest extends Arquillian { @Drone public WebDriver driver; @ArquillianResource private URL deployedRoot; @Deployment public static WebArchive createTestArchive() { return ...; } @Test public void testDefaultSkin() { driver.get(“”); ... } }
    72. Page Factory <ul><li>@Test
    73. public void googleSearchTest {
    74. WebDriver driver = ...
    75. driver.get(&quot;;);
    76. GoogleSearchPage page = PageFactory.initElements(driver,GoogleSearchPage.class);
    77. page.searchFor(&quot;Cheese&quot;);
    78. } </li></ul>
    79. <ul>Page Factory </ul>
    80. Page Object <ul><li>public class CalculatorPage extends AbstractPage {
    81. @FindBy(id = &quot;calculator:amount&quot;)
    82. private WebElement amountInput;
    83. @FindBy(xpath = &quot;//div[contains(@class, 'result')]&quot;)
    84. private WebElement resultOutput;
    85. @FindBy(id = &quot;calculator:calculateButton&quot;)
    86. private WebElement submitButton;
    87. ...
    88. } </li></ul>
    89. Mobile Web Testing <ul><li>Almost no changes in Arquillian config
    90. Android 1.x not supported
    91. Android 2.x – phones
    92. Android 3.x – tablets
    93. Android 4.x – phones and tablets
    94. Physical device vs. emulator </li></ul>
    95. Physical Devices <ul><li>Windows – install USB drivers
    96. Linux – set up udev
    97. Mac OS X – no setup needed </li></ul>
    98. Android Emulator <ul><li>Part of Android Software Development Kit
    99. Android 1.5 – 4.0.3
    100. <sdk_path>/tools/android
    101. Eclipse plugins </li></ul>
    102. Emulators <ul><li>2.2 </li><ul><li>Relatively fast
    103. Works with selenium-server 2.6 </li></ul><li>2.3 </li><ul><li>Unreliable </li></ul><li>3.x </li><ul><li>Slow </li></ul><li>4.x </li><ul><li>Relatively fast
    104. Works well with newest Selenium </li></ul></ul>
    105. Demo Creating and launching a new emulator
    106. Android-x86 Project <ul><li>
    107. Project porting Android to x86 platform </li></ul>
    108. Demo Launching Android in VirtualBox
    109. AndroidDriver Config <ul><li><extension qualifier=&quot;webdriver&quot;>
    110. <property name=&quot;implementationClass&quot;> </property>
    111. <property name=&quot;remoteAddress&quot;>
    112. http://localhost:4444/wd/hub
    113. </property>
    114. </extension> </li></ul>
    115. Emulator Configuration <ul><li>Install android-server.apk
    116. Launch WebDriver application in emulator
    117. platform-tools/adb forward tcp:4444 tcp:8080
    118. Use for host's localhost </li></ul>
    119. VirtualBox Configuration <ul><li>Set up network
    120. platform-tools/adb connect <android_ip>
    121. Install android-server.apk
    122. Launch WebDriver application in emulator
    123. platform-tools/adb forward tcp:4444 tcp:8080
    124. Tests need server IP address </li></ul>
    125. Demo Tests running with Firefox, Android emulator and Android-x86
    126. Fast, Faster, Fastest
    127. Eclipse <ul><li>Plugins </li><ul><li>Android
    128. JBoss Tools
    129. m2e
    130. TestNG </li></ul><li>Supports both emulator and Android-x86 </li></ul>
    131. Demo Running tests in Eclipse
    132. Debugging <ul><li>You already know how :) </li></ul>
    133. Demo Debugging
    134. Arquillian Android Extension <ul><li>
    135. Hot news!
    136. Create emulator
    137. Start emulator
    138. Install Android server
    139. Start Android server
    140. Can connect to real device </li></ul>
    141. Console Logging Listener <ul><li>Usual console log: </li></ul>
    142. Console Logging Listener <ul><li>Our console log: </li></ul><ul><li>[10:47:54] STARTED: ftest.ExchangeRatesTest.testInit()
    143. [10:47:54] SUCCESS: ftest.ExchangeRatesTest.testInit()
    144. [10:47:55] STARTED: ftest.ExchangeRatesTest.testNextAndPrevious()
    145. [10:47:57] SUCCESS: ftest.ExchangeRatesTest.testNextAndPrevious()
    146. [10:48:09] STARTED: ftest.CalculatorTest.testCalculate()
    147. [10:48:12] SUCCESS: ftest.CalculatorTest.testCalculate() </li></ul>
    148. Console Logging Listener <ul><li>Register in pom.xml or in test class </li></ul><ul><li>@Listeners(ConsoleStatusTestListener.class)
    149. public abstract class AbstractWebDriverTest<P extends Page> extends Arquillian {
    150. ...
    151. } </li></ul>
    152. Screenshot on Failure <ul><li>@AfterMethod(alwaysRun = true, groups = &quot;arquillian&quot;)
    153. public void handleTestError(ITestResult result) {
    154. if (result.getStatus() == ITestResult.SUCCESS) {
    155. return;
    156. }
    157. ...
    158. File scrFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
    159. FileUtils.copyFile(scrFile, imageOutputFile);
    160. } </li></ul>
    161. Jenkins Android Plugin
    162. Jenkins Android Plugin
    163. Mobile Browser Simulator <ul><li>JBoss Tools 3.3 M5
    164. Simulates mobile phones and tablets
    165. Perfect for layout testing
    166. Not for automation </li></ul>
    167. Mobile Browser Simulator
    168. Conclusion <ul><li>Arquillian + Selenium 2
    169. Run from console and Eclipse
    170. How to create Android emulator
    171. Android-x86
    172. Emulator snapshots
    173. ID locators, Xpath locators, CSS locators </li></ul>
    174. [email_address] @ppitonak Q/A