{"id":6720,"date":"2016-07-28T14:42:57","date_gmt":"2016-07-28T05:42:57","guid":{"rendered":"http:\/\/www.skyarch.net\/blog\/?p=6720"},"modified":"2017-11-07T11:17:20","modified_gmt":"2017-11-07T02:17:20","slug":"customizing-selenium-pageobject","status":"publish","type":"post","link":"https:\/\/www.skyarch.net\/blog\/en\/customizing-selenium-pageobject\/","title":{"rendered":"Customizing Selenium PageObject"},"content":{"rendered":"

In this blog, we\u00a0will be using Selenium WebDriver <\/a>(Java) for my example codes.
\nAnd please note that the codes here are not tested. These are only guides and are not intended for any other purpose.<\/span><\/p>\n

In simple words, page objects in selenium mimics the page's UI controls\/objects so we can use it to interact with the page easily.
\nThink of the page as an object-oriented class, that is exactly what page object pattern is. The page object class serves as interface to a page of your application. It hides away the page-specific code implementations like the locators.<\/p>\n

\"page<\/a>
\nImage taken from\u00a0Page Object Pattern & Page Factory<\/a><\/span><\/p>\n

We will use this class along with the selenium webdriver to interact with its UI.<\/p>\n

Before we\u00a0start building page objects for our\u00a0tests, here are some pros and cons to know.
\nPros:<\/p>\n

    \n
  1. Your AUT's UI becomes loosely coupled from the actual test. Hence;<\/li>\n
  2. Minimizing test code complexity.<\/li>\n
  3. Removes redundancy.<\/li>\n<\/ol>\n

    Con:<\/p>\n

      \n
    1. Your code will be a little hard to read as your objects will be behind an abstraction.<\/li>\n<\/ol>\n

      Creating a simple Page Object Class<\/h3>\n

      Say we have a Login Page to test and the page has 3 UI objects we need to interact with.<\/p>\n\"login\"<\/a>\n

      We would want to create a simple page object class containing each of the UI object as field\/property.<\/p>\n

      \r\npackage com.skyarch.PageObjects;\r\n\r\nimport org.openqa.selenium.WebDriver;\r\nimport org.openqa.selenium.WebElement;\r\nimport org.openqa.selenium.support.FindBy;\r\nimport org.openqa.selenium.support.How;\r\n\r\npublic class LoginPage {\r\n\r\n    @FindBy(how = How.NAME, using = "username")\r\n    private WebElement username;\r\n\r\n    @FindBy(how = How.NAME, using = "password")\r\n    private WebElement password;\r\n\r\n    @FindBy(how = How.ID, using = "login")\r\n    private WebElement login;\r\n}\r\n<\/pre>\n
      When writing the actual test, you can simply initilize the page object using the initElements<\/code> method of PageFactory<\/code>.<\/p>\n
      \r\nimport org.openqa.selenium.support.PageFactory;\r\n\r\nLoginPage page = PageFactory.intElements(driver,LoginPage.class)\r\n<\/pre>\n
      Using the objects is fairly the same as you would have when you were not using the page object pattern.<\/p>\n
      \r\npage.username.sendKeys("zuckerberd");\r\npage.username.sendKeys("dadada");\r\npage.login.click();\r\n<\/pre>\n
      Now that is plainly better than doing this.<\/p>\n
      \r\ndriver.findElement(By.name("username")).sendKeys("zuckerberd");\r\ndriver.findElement(By.name("password")).sendKeys("dadada");\r\ndriver.findElement(By.id("login")).click();\r\n<\/pre>\n
      Now our lives are better with the page object pattern in our tests, isn't it? \ud83d\ude42<\/p>\n
      But wait...<\/h5>\n
      What if your page object class is getting bigger and your AUT's pages are having framework generated names and other stuffs that make us suffer?
      \nHere is where we want to create our own locators, alternate to the ones that Selenium gives us.<\/p>\n
      For our team, we wanted to locate elements on the page by using the best readable identifiers like labels or placeholders, button texts, etc.\u00a0We could not do this because we cannot assign a dynamic value for the\u00a0annotation (in java).<\/p>\n
      Now you're thinking, why not just use xpath instead of creating a custom ElementLocator<\/code> for the PageFactory?<\/p>\n
      Yes, we will be using XPath, but that doesn't solve the problem of complicating our page object classes when they get bigger.
      \nCreating a custom ElementLocator will abstract those long and hard to read, redundant XPaths, leaving us with only labels on the class, or maybe a little count of Xpaths, which is way better than reading the whole XPath when you only want to know where that object points to on the page.<\/p>\n
      And not only we can create a custom ElementLocator<\/code>, we can also create a custom FieldDecorator<\/code>, giving us the power to fully customize our page object classes.
      \nFor instance we have a page that contains select<\/code> or the       select2<\/code><\/a> plugin boxes, datetime<\/code> pickers, and other input plugins you can think of, and we wanted to create a simple, readable and uncomplicated page object.<\/p>\n
      \r\n public class ScheduledMessengerPage {\r\n\r\n     @FindBy(label="Send to:")\r\n     private Select2 userSelect2;\r\n\r\n     @FindBy(label="Subject:")\r\n     private WebElement subject;\r\n\r\n     @FindBy(label="Body:")\r\n     private WYSIWYG contentBody;\r\n\r\n     @FindBy(label="Scheduled For:")\r\n     private DateTimePicker scheduleFor;\r\n\r\n     @FindBy(label="Schedule Message")\r\n     private WebElement submit;\r\n }\r\n<\/pre>\n
      We cannot do this without extending the ElementLocator<\/code> and FieldDecorator<\/code>.<\/p>\n
      While extending these classes, we can create new interfaces and classes that will contain all the methods for the custom objects in our AUT's page. Don't worry, we can extend the WebElement interface. \ud83d\ude42<\/p>\n
      Well, now I can say that our lives are better! \ud83d\ude00<\/p>\n
      Customizing the Page Object<\/h3>\n
      Before we begin this journey of customizing our page object pattern, let's enumerate what we want to achieve.<\/p>\n
        \n
      1. Our test page objects are more readable when it gets bigger and bigger.<\/li>\n
      2. We will\u00a0be able to locate or map elements with their labels.<\/li>\n
      3. We can include objects for custom plugins on the page without complicating our page object classes. And create encapsulated methods for them.<\/li>\n<\/ol>\n
        List of things we need to do:<\/p>\n
          \n
        1. Custom Class implementing ElementLocatorFactory<\/li>\n
        2. Custom Class extending AbstractAnnotations<\/li>\n
        3. Custom Class implementing FieldDecorator<\/li>\n
        4. A Class implementing InvocationHandler; for our custom object<\/li>\n
        5. A public annotation interface<\/li>\n<\/ol>\n
          We will be using Java's string formatting in locating our elements.<\/em>
          \nIn some other classes, you might just want to extend the default ones Selenium provided.<\/p>\n
          1. Creating Custom Class implementing ElementLocatorFactory<\/code><\/h4>\n
          The ElementLocatorFactory<\/code> interface only implements one method.<\/p>\n
          \r\npublic interface ElementLocatorFactory {\r\n ElementLocator createLocator(Field field);\r\n}\r\n<\/pre>\n
          This interface will be the one to give the PageFactory<\/code> a custom locator, the findElement<\/code> and findElements<\/code>. This is needed because we are mapping our page objects with an @Annotation<\/code>.<\/p>\n
          We will use our own annotation interface to map our page objects, and use this annotation to identify if the page object needs to be located by using our custom ElementLocator<\/code>, else give it to the default handlers of Selenium.<\/p>\n
          \r\npackage com.skyarch.PageObjects;\r\n\r\nimport java.lang.reflect.Field;\r\n\r\nimport org.openqa.selenium.SearchContext;\r\nimport org.openqa.selenium.support.pagefactory.Annotations;\r\nimport org.openqa.selenium.support.pagefactory.ElementLocator;\r\nimport org.openqa.selenium.support.pagefactory.ElementLocatorFactory;\r\nimport org.openqa.selenium.support.pagefactory.DefaultElementLocator;\r\n\r\nimport com.skyarch.PageObjects.Annotations.FindBy;\r\n\r\npublic class CustomElementLocatorFactory implements ElementLocatorFactory {\r\n    \r\n    private final SearchContext searchContext;\r\n    \r\n    public CustomElementLocatorFactory(SearchContext context) {\r\n        this.searchContext = context;\r\n    }\r\n    \r\n    @Override\r\n    public ElementLocator createLocator(Field field) {\r\n        FindBy annotation = field.getAnnotation(FindBy.class);\r\n        \r\n        if (annotation == null) {\r\n            \/\/ if our annotation is not present give it to selenium's defaults\r\n            return new DefaultElementLocator(this.searchContext, new Annotations(field));\r\n        }\r\n        return new CustomElementLocator(this.searchContext, new CustomAnnotation(field));\r\n    }\r\n}\r\n<\/pre>\n
          With this, we can redirect all our page objects annotated with our custom annotation to our custom ElementLocator<\/code>.<\/p>\n
          2. Now let's create our Custom Class extending AbstractAnnotations<\/code><\/h4>\n
          This class is the one responsible in building the XPath<\/code> and return a By<\/code> that our CustomElementLocator<\/code> will use to locate the page object.<\/p>\n
          For this step, we will just extend from the default Annotations<\/code> Class Selenium provided as we only need to customize the XPath builder of the class.<\/p>\n
          \r\npackage com.skyarch.PageObjects;\r\n\r\nimport java.lang.reflect.Field;\r\nimport java.util.Arrays;\r\n\r\nimport org.openqa.selenium.By;\r\nimport org.openqa.selenium.support.pagefactory.Annotations;\r\n\r\nimport com.skyarch.PageObjects.Annotations.FindBy;\r\n\r\npublic class CustomAnnotation extends Annotations {\r\n    private Field field;\r\n    \r\n    public CustomAnnotation(Field field, String xpathFormat, String xpathPrefix) {\r\n        super(field);\r\n        this.field = field;\r\n    }\r\n    \r\n    @Override\r\n    public By buildBy() {\r\n        By locateBy = null;\r\n        FindBy findBy = field.getAnnotation(FindBy.class);\r\n\r\n        if (findBy == null) {\r\n            locateBy = super.buildByFromDefault(); \r\n            return locateBy;\r\n        }\r\n\r\n        String xpath;\r\n        \/\/ lets check if there are multiple parameters\r\n        if (findBy.params().length &amp;amp;gt; 0) {\r\n            Object[] objs = Arrays.copyOf(findBy.params(), findBy.params().length, Object[].class);\r\n            xpath = String.format(findBy.format(), objs);\r\n        }\r\n        else { \r\n            xpath = String.format(findBy.format(), xpathPrefix, findBy.param());    \r\n        }\r\n        locateBy = By.xpath(xpath);\r\n\r\n        if (locateBy == null) {\r\n            throw new IllegalArgumentException("Cannot determine how to locate element " + field);\r\n        }\r\n        return locateBy;\r\n    }\r\n}\r\n\r\n<\/pre>\n
          3. Custom Class implementing FieldDecorator<\/code><\/h4>\n
          Now this class is the most important, this is the one that casts the page objects into the Interface (as a Proxy class) we want them to be.
          \nThis will be called by PageFactory<\/code> for every single object in our page object class that is being initialized.
          \nIt first gets the ElementLocator<\/code> given by the ElementLocatorFactory<\/code>. Then casts the page object field into a Proxy<\/code> instance of, in Selenium's default a WebElement<\/code>.<\/p>\n
          In this step, we can add our custom page objects (select, etc.). Yehey!
          \nWe will also be extending the DefaultFieldDecorator<\/code>.
          \nNote: Example custom page objects are in the Side Quest<\/a> section.<\/em><\/p>\n
          \r\npackage com.skyarch.PageObjects;\r\n\r\nimport java.lang.reflect.Field;\r\nimport java.lang.reflect.InvocationHandler;\r\nimport java.lang.reflect.Proxy;\r\nimport java.util.List;\r\n\r\nimport org.openqa.selenium.WebDriver;\r\nimport org.openqa.selenium.WebElement;\r\nimport org.openqa.selenium.support.pagefactory.DefaultFieldDecorator;\r\nimport org.openqa.selenium.support.pagefactory.ElementLocator;\r\nimport org.openqa.selenium.support.pagefactory.ElementLocatorFactory;\r\n\r\nimport com.skyarch.PageObjects.CustomElements.Handlers.SelectElementWrapperHandler;\r\nimport com.skyarch.PageObjects.CustomElements.Interfaces.SelectInput;\r\n\r\npublic class CustomFieldDecorator extends DefaultFieldDecorator {\r\n\r\n    public CustomFieldDecorator(ElementLocatorFactory factory) {\r\n        super(factory);\r\n    }\r\n    \r\n    @Override\r\n    public Object decorate(ClassLoader loader, Field field) {\r\n        \/\/ this part is where we pre-filter the acceptable interfaces for our page objects\r\n        if (!(WebElement.class.isAssignableFrom(field.getType())\r\n            || String.class.isAssignableFrom(field.getType())\r\n            || SelectInput.class.isAssignableFrom(field.getType()) \/\/ this will be our example custom object\r\n            || List.class.isAssignableFrom(field.getType())\r\n            || isDecoratableList(field))) {\r\n          return null;\r\n        }\r\n\r\n        ElementLocator locator = factory.createLocator(field);\r\n        if (locator == null) {\r\n          return null;\r\n        }\r\n        if (List.class.isAssignableFrom(field.getType())) {\r\n            return proxyForListLocator(loader, locator);\r\n        } else if (SelectInput.class.isAssignableFrom(field.getType())) {\r\n            return proxySelectForLocator(loader, locator);\r\n        } else if (WebElement.class.isAssignableFrom(field.getType())) {\r\n            return proxyForLocator(loader, locator);\r\n        } else {\r\n          return null;\r\n        }\r\n      }\r\n\r\n    protected SelectInput proxySelectForLocator(ClassLoader loader, ElementLocator locator) {\r\n        InvocationHandler handler = new SelectElementWrapperHandler(locator);\r\n    \r\n        SelectInput proxy;\r\n        proxy = (SelectInput) Proxy.newProxyInstance(\r\n            loader, new Class[]{SelectInput.class}, handler);\r\n        return proxy;\r\n    }\r\n}\r\n<\/pre>\n
          Note that SelectInput<\/code> here is a custom interface to support the Selenium's Select<\/code> class.<\/p>\n
          What we need is our Proxy InvocationHanler<\/code> class for SelectInput<\/code> object to finally work.<\/p>\n
          4. A Class implementing InvocationHandler<\/code>, Let's create that!<\/h4>\n
          Before this, please read more about Java Proxy Class<\/a>.<\/p>\n
          This class will be the one that handles our method calls for our proxy page objects. It will call locator.findElement()<\/code> or locator.findElements()<\/code> and then invokes the method to it.
          \nAnd this is where we cast the WebElement<\/code> into whatever object we want it to be. In this case, a CustomSelect<\/code> (Select<\/code>) Object.<\/p>\n
          \r\npackage com.skyarch.PageObjects.CustomElements.Handlers;\r\n\r\nimport java.lang.reflect.InvocationHandler;\r\nimport java.lang.reflect.InvocationTargetException;\r\nimport java.lang.reflect.Method;\r\n\r\nimport org.openqa.selenium.WebElement;\r\nimport org.openqa.selenium.support.pagefactory.ElementLocator;\r\n\r\nimport com.skyarch.PageObjects.CustomElements.CustomSelect;\r\n\r\npublic class SelectElementWrapperHandler implements InvocationHandler {\r\n    private final ElementLocator locator;\r\n\r\n    public SelectElementWrapperHandler(ElementLocator locator) {\r\n        this.locator = locator;\r\n    }\r\n\r\n    @Override\r\n    public Object invoke(Object proxy, Method method, Object[] args) throws Throwable {\r\n        WebElement element;\r\n        try {\r\n            element = locator.findElement();\r\n        } catch (Exception e) {\r\n            if ("toString".equals(method.getName())) {\r\n                return "Proxy select(element) for: " + locator.toString();\r\n            }\r\n            else throw e;\r\n        }\r\n        CustomSelect el = new CustomSelect(element);\r\n        \r\n        try {\r\n            return method.invoke(el, args);\r\n        } catch (InvocationTargetException e) {\r\n            throw e.getCause();\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
          Note that the CustomSelect<\/code> class is a class extending Selenium's Select<\/code> class and implementing SelectInput<\/code>, we need to do this because we need the class to be implementing our SelectInput<\/code> interface.<\/p>\n
          5. Let's not forget our annotation. A public annotation interface<\/code><\/h4>\n
          \r\npackage com.skyarch.PageObjects.Annotations;\r\n\r\nimport java.lang.annotation.ElementType;\r\nimport java.lang.annotation.Retention;\r\nimport java.lang.annotation.RetentionPolicy;\r\nimport java.lang.annotation.Target;\r\n\r\n@Retention(RetentionPolicy.RUNTIME)\r\n@Target({ElementType.FIELD, ElementType.TYPE})\r\npublic @interface FindBy {\r\n      String format() default "";\r\n      String param() default "";\r\n      String[] params() default {};\r\n}\r\n<\/pre>\n
          You can change the class name so you will not be confused with Selenium's @FindBy<\/code> annotaion.<\/p>\n
          Now we can declare a page object by:<\/p>\n
          \r\n@FindBy(format = "\/\/label[text()='%s']\/following-sibling::select", param = "Select Gender:")\r\npublic SelectInput drpGender;\r\n<\/pre>\n
          You can also customize it more, so you will have a declaration that looks something like:<\/p>\n
          \r\n@FindByFormat(format = "\/\/label[text()='%s']\/following-sibling::select") \/\/ this format will apply to all following @FindBy Annotation until a new @FindByFormat\r\n@FindBy(param = "Select Gender:")\r\npublic SelectInput drpGender;<\/pre>\r\n<pre>@FindBy(param = "Select City:")\r\npublic SelectInput drpCity;<\/pre>\r\n<pre>@FindBy(param = "Select Town:")\r\npublic SelectInput drpTown;<\/pre>\r\n<pre><\/pre>\n
          You can customize it more to fit your needs. This is only a guide and a proof that you can do it your way.
          \nThank you for reading. Say\u014dnara!<\/p>\n
          Side Quest<\/h3>\n
          I will give some examples on how we can create classes for our custom page objects.<\/p>\n
          CustomSelect<\/code> Class<\/strong><\/p>\n
          \r\npackage com.skyarch.PageObjects.CustomElements;\r\n\r\nimport org.openqa.selenium.By;\r\nimport org.openqa.selenium.WebElement;\r\nimport org.openqa.selenium.support.ui.Select;\r\n\r\nimport com.skyarch.PageObjects.CustomElements.Interfaces.SelectInput;\r\n\r\npublic class CustomSelect extends Select implements SelectInput {\r\n    \r\n    public CustomSelect(WebElement element) {\r\n        super(element);\r\n    }\r\n\r\n    \/*\r\n     * Selects multiple text, applies only to multiple select \r\n     *\/\r\n    @Override\r\n    public void selectByVisibleText(String... texts) {\r\n        for (String text : texts) {\r\n            super.selectByVisibleText(text);\r\n        }       \r\n    }\r\n    \/\/ more custom methods here...\r\n}\r\n\r\n<\/pre>\n
          SelectInput<\/code> Interface<\/strong><\/p>\n
          \r\npackage com.skyarch.PageObjects.CustomElements.Interfaces;\r\n\r\nimport java.util.List;\r\n\r\nimport org.openqa.selenium.WebElement;\r\n\r\npublic interface SelectInput {\r\n    boolean isMultiple();\r\n    List&amp;amp;amp;amp;lt;WebElement&amp;amp;amp;amp;gt; getOptions();\r\n    List&amp;amp;amp;amp;lt;WebElement&amp;amp;amp;amp;gt; getAllSelectedOptions();\r\n    WebElement getFirstSelectedOption();\r\n    void selectByVisibleText(String text);\r\n    void selectByIndex(int index);\r\n    void selectByValue(String value);\r\n    void deselectAll();\r\n    void deselectByValue(String value);\r\n    void deselectByIndex(int index);\r\n    void deselectByVisibleText(String text);\r\n    void selectByVisibleText(String...texts);\r\n}\r\n<\/pre>\n
           <\/p>\n
          Looking for a way to test uploading & downloading files using Selenium? Here is a great post from our friends at Guru99.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
          In this blog, we\u00a0will be using Selenium WebDriver (Java) for my example codes. And please note that the codes …<\/p>\n","protected":false},"author":1,"featured_media":7061,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"en_US","_original_post":"6720","footnotes":""},"categories":[9],"tags":[140,143,139,142,141],"class_list":{"0":"post-6720","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-dev","8":"tag-java","9":"tag-page-object","10":"tag-selenium","11":"tag-testing","12":"tag-webdriver","13":"en-US"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/posts\/6720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/comments?post=6720"}],"version-history":[{"count":27,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/posts\/6720\/revisions"}],"predecessor-version":[{"id":12977,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/posts\/6720\/revisions\/12977"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/media\/7061"}],"wp:attachment":[{"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/media?parent=6720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/categories?post=6720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/tags?post=6720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}