#229 Page Object Pattern

page-object/README.md

@@ -0,0 +1,32 @@
+---
+layout: pattern
+title: Page Object
+folder: page-object
+permalink: /patterns/page-object/
+categories: Testing
+tags:
+- Testing
+- Web Development
+- Encapsulation
+---
+
+## Intent
+
+Page Object encapsulates the UI, hiding the underlying UI widgetry of an application (commonly a web application) and providing an application-specific API to allow the manipulation of UI components required for tests. In doing so, it allows the test class itself to focus on the test logic instead. 
+
+
+![alt text](./etc/page-object.png "Page Object")
+
+
+## Applicability
+
+Use the Page Object pattern when
+
+* You are writing automated tests for your web application and you want to separate the UI manipulation required for the tests from the actual test logic. 
+* Make your tests less brittle, and more readable and robust
+
+## Credits
+
+* [Martin Fowler - PageObject](http://martinfowler.com/bliki/PageObject.html)
+* [Selenium - Page Objects](https://github.com/SeleniumHQ/selenium/wiki/PageObjects)
+

page-object/etc/page-object.ucls

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<class-diagram version="1.1.9" icons="true" always-add-relationships="false" generalizations="true" realizations="true" 
+  associations="true" dependencies="false" nesting-relationships="true">  
+  <classifier-display autosize="true" stereotype="true" package="true" initial-value="false" signature="true" 
+    sort-features="false" accessors="true" visibility="true">    
+    <attributes public="true" package="true" protected="true" private="true" static="true"/>    
+    <operations public="true" package="true" protected="true" private="true" static="true"/>  
+  </classifier-display>  
+  <association-display labels="true" multiplicity="true"/>
+</class-diagram>

page-object/pom.xml

@@ -0,0 +1,46 @@
+<?xml version="1.0"?>
+<!--
+
+    The MIT License
+    Copyright (c) 2014 Ilkka Seppälä
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <parent>
+        <groupId>com.iluwatar</groupId>
+        <artifactId>java-design-patterns</artifactId>
+        <version>1.13.0-SNAPSHOT</version>
+    </parent>
+    <artifactId>page-object</artifactId>
+    <dependencies>
+        <dependency>
+            <groupId>junit</groupId>
+            <artifactId>junit</artifactId>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>net.sourceforge.htmlunit</groupId>
+            <artifactId>htmlunit</artifactId>
+        </dependency>
+    </dependencies>
+</project>

page-object/src/main/java/com/iluwatar/pageobject/App.java

@@ -0,0 +1,89 @@
+/**
+ * The MIT License
+ * Copyright (c) 2014 Ilkka Seppälä
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+package com.iluwatar.pageobject;
+
+import java.awt.Desktop;
+import java.io.File;
+import java.io.IOException;
+
+/**
+ * Page Object pattern wraps an UI component with an application specific API allowing you to
+ * manipulate the UI elements without having to dig around with the underlying UI technology used. This is
+ * especially useful for testing as it means your tests will be less brittle. Your tests can concentrate on
+ * the actual test cases where as the manipulation of the UI can be left to the internals of the page object
+ * itself.
+ *
+ * <p>
+ * Due to this reason, it has become very popular within the test automation community.
+ * In particular, it is very common in that the page object is used to represent the html pages of a
+ * web application that is under test. This web application is referred to as AUT (Application Under Test).
+ * A web browser automation tool/framework like Selenium for instance, is then used to drive the automating
+ * of the browser navigation and user actions journeys through this web application. Your test class would
+ * therefore only be responsible for particular test cases and page object would be used by the test class
+ * for UI manipulation required for the tests.
+ *
+ * <p>
+ * In this implementation rather than using Selenium, the HtmlUnit library is used as a replacement to
+ * represent the specific html elements and to drive the browser. The purpose of this example is just to
+ * provide a simple version that showcase the intentions of this pattern and how this pattern is used
+ * in order to understand it.
+ */
+public final class App {
+
+  private App() {
+  }
+
+  /**
+   * Application entry point
+   *
+   * <p>
+   * The application under development is a web application. Normally you would probably have a
+   * backend that is probably implemented in an object-oriented language (e.g. Java) that serves
+   * the frontend which comprises of a series of HTML, CSS, JS etc...
+   *
+   * <p>
+   * For illustrations purposes only, a very simple static html app is used here. This main method
+   * just fires up this simple web app in a default browser.
+   *
+   * @param args arguments
+   */
+  public static void main(String[] args) {
+
+    try {
+      File applicationFile = new File(App.class.getClassLoader().getResource("sample-ui/login.html").getPath());
+
+      // should work for unix like OS (mac, unix etc...)
+      if (Desktop.isDesktopSupported()) {
+        Desktop.getDesktop().open(applicationFile);
+
+      } else {
+        // java Desktop not supported - above unlikely to work for Windows so try following instead...
+        Runtime.getRuntime().exec("cmd.exe start " + applicationFile);
+      }
+
+    } catch (IOException ex) {
+      ex.printStackTrace();
+    }
+
+  }
+}

page-object/src/main/resources/sample-ui/album-list.html

@@ -0,0 +1,60 @@
+<!--
+
+    The MIT License
+    Copyright (c) 2014 Ilkka Seppälä
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Album List</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/album-list.css">
+</head>
+<body>
+    <header>
+    	<h1>My Album Viewer</h1>
+    </header>
+
+    <section>
+    	<div>
+    		<table>
+    			<tr>
+                    <th>Album Title</th>
+                    <th>Album Year</th>
+                    <th>Album Rating</th>
+                    <th>Number of Songs</th>
+                    <th>Artist</th>
+                </tr>
+    			<tr class="album">
+    				<td><a href="album-page.html">21</a></td>
+                    <td>2011</td>
+                    <td>A</td>
+                    <td>11</td>
+                    <td>Adele</td>
+    			</tr>
+    		</table>
+    	</div>
+    </section>
+
+</body>
+</html>

page-object/src/main/resources/sample-ui/album-page.html

@@ -0,0 +1,74 @@
+<!--
+
+    The MIT License
+    Copyright (c) 2014 Ilkka Seppälä
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Album Page</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <header>
+    	<h1 id="pageHeader">21</h1>
+    </header>
+
+    <section>
+    	<div>
+            <form>
+        		<table>
+                    <tr><td>Title:</td><td><input type="text" id="albumTitle" value="21"></td></tr>
+                    <tr><td>Artist:</td><td><input type="text" id="albumArtist" value="Adele"></td></tr>
+                    <tr>
+                        <td>Year:</td>
+                        <td>
+                            <select id="albumYear">
+                                <option>2011</option>
+                                <option>2012</option>    
+                                <option>2013</option>
+                                <option>2014</option>
+                                <option>2015</option>
+                                <option>2016</option>
+                            </select>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Rating:</td>
+                        <td><input type="text" id="albumRating" value="A"></td>
+                    </tr>
+                    <tr>
+                        <td>Number of Songs:</td>
+                        <td><input type="number" id="numberOfSongs" value="12"></td>
+                    </tr>
+                    <tr>
+                        <td><input type="submit" id="cancelButton" value="Cancel"></td>
+                        <td><input type="submit" id="saveButton" value="Save"></td>
+                    </tr>
+                </table>
+            </form>    
+    	</div>
+    </section>
+
+</body>
+</html>

page-object/src/main/resources/sample-ui/css/album-list.css

@@ -0,0 +1,46 @@
+<!--
+
+    The MIT License
+    Copyright (c) 2014 Ilkka Seppälä
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+
+-->
+table {
+    font-size: 16px;
+    border-collapse: collapse;
+}
+
+th {
+    background-color: #FFFFFF;
+    border: 1px solid black;
+    color: black;
+    width: 150px;
+    height: 20px;
+}
+
+td {
+    border: 1px solid black;
+    background-color: white;
+}
+
+th, td {
+    padding: 15px;
+    text-align: left;
+}

page-object/src/main/resources/sample-ui/css/style.css

@@ -0,0 +1,27 @@
+<!--
+
+    The MIT License
+    Copyright (c) 2014 Ilkka Seppälä
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+
+-->
+body {
+    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+}