Component objects instead of page objects in selenium

Question

One of the most popular patterns in testing based on selenium is page object. Unfortunately, we often need to duplicate code if we use it as is. Consider the following situation:

• We use UI framework, with common component, say some fancy table
• Table is quite complicated, has filtering, sorting, searching
• The table is used on several pages in the app

Is there any existing infrastructure to create more granular component objects instead of page objects either in selenium or in a thrid party lbirary?. I mean, annotations, and related infrastructure?

Answer 1

Appium which is the mobile implementation of selenium webdriver has a concept of widgets which is an extension of pageobjects. There is a Widget class which allows one to search relative to an element including in a web browser. You can check this out in the appium source test section. Have a look in the package io.appium.java_client.pagefactory_tests.widgets. This supports the FindBy annotation and WebElement construct and the PageFactory initialization.

So instead of using

@FindBy(.......)
private WebElement myTable;

you can use

@FindBy(container of the table....)
private Table myTable;

Table class can now have all the relevant variables and methods.

Part of POM.xml

<dependency>
    <groupId>org.seleniumhq.selenium</groupId>
    <artifactId>selenium-api</artifactId>
    <version>2.53.1</version>
</dependency>
<dependency>
    <groupId>io.appium</groupId>
    <artifactId>java-client</artifactId>
    <version>4.1.2</version>
</dependency>

Test Class --

import io.appium.java_client.pagefactory.AppiumFieldDecorator;

import org.junit.Test;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.PageFactory;

public class WidgetBrowTest {

    @Test
    public void test() {
        System.setProperty("webdriver.chrome.driver", "E:/Software Testing/Selenium/Jars/chromedriver.exe");

        WebDriver driver = new ChromeDriver();

        driver.get("http://stackoverflow.com/");


        SOHome soHome = new SOHome(driver);
        PageFactory.initElements(new AppiumFieldDecorator(driver), soHome);

        //Below two are from widget - First question in stackoverflow homepage
        System.out.println(soHome.getFirstQues().getQuesTitle());
        System.out.println(soHome.getFirstQues().getQuesTags());

        //Below two are from home page
        System.out.println(soHome.getLogoText());
        System.out.println(soHome.getMenuText());
    }
}

StackOverflow Home -

import java.util.List;
import java.util.stream.Collectors;

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.FindBy;

public class SOHome {

    @FindBy(css="div[id='hlogo'] > a")
    private WebElement logo;

    @FindBy(xpath="//div[@id='hmenus']//li/a")
    private List<WebElement> menuOpt;

    @FindBy(css="div[class='summary']")
    private SOQuesWidget firstQues;

    private WebDriver driver;


    public SOHome(WebDriver driver) {
        this.driver = driver;
    }

    public String getLogoText() {
        return logo.getText();
    }

    public List<String> getMenuText() {
        return menuOpt.stream().map(t -> t.getText()).collect(Collectors.toList());
    }

    public SOQuesWidget getFirstQues() {
        return firstQues;
    }
}

Question Widget - First Question

import java.util.List;
import java.util.stream.Collectors;

import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.FindBy;

import io.appium.java_client.pagefactory.Widget;

public class SOQuesWidget extends Widget {

    @FindBy(css="a[class='question-hyperlink']")
    private WebElement quesTitle;

    @FindBy(xpath=".//div[starts-with(@class,'tags')]/a")
    private List<WebElement> quesTags;

    protected SOQuesWidget(WebElement element) {
        super(element);
    }

    public String getQuesTitle() {
        return quesTitle.getText();
    }

    public List<String> getQuesTags() {
        return quesTags.stream().map(t -> t.getText()).collect(Collectors.toList());
    }
}

Answer 2

Page objects is kind of a misnomer. They don't have to be specifically full pages to follow the page object model. I would create a Table class (page object) that contains all of the locators and methods for the Table object and then include it in the pages/page objects where it appears.

For example, if the home page contains a table object, then the HomePage class would reference the Table class.