Implementing PageObjects pattern for frames in a page

Question

How to implement the pageObject pattern(Selenium) for frames in a page..I have a home page and there is a left frame and Right frame and i would like to create page object for each frame..

For example, I have the LeftFrame Page Object as below:

Public Class HomePageLeftFrame{

private WebElement link;
private WebElement textField;

}

How to write the @FindBy annotation for the two elements in the HomePageLeftFrame object...Is there a way?

Note: As per the documentation on the selenium for pageObjects it is mentioned that page objects can be a whole HTML page or part of a page..Is my understanding correct for the above implementation??

Answer 1

Before writing my suggestion first I'd like to share my application for which I developed a POM framework. So basically my application has three different frames for each html page:

1. Top frame : It is shared view for whole application which contains common functionalists like Log-Out, help, Admin Settings etc.

2. Left navigation panel: At most of places in my application this frame is available and it provides navigation in between different section of application.

3. Content Frame: This is the frame where user does main operation.

To design a Page Object based framework for this type of application is really a tedious job, But I decided to design it in such a manner so that we can avoid all the repetitive code.First of all I'll share framework structure:

org.xyz.automation.sdk
     - TopFrame.java
     - MainNavigator.java
     - WebDriverFactory.java
     - Configuration.java
org.xyz.automation.sdk.global.pages
     - LoginPage.java
     - TopFrame.java
org.xyz.automation.sdk.global
     - Navigator.java
org.xyz.automation.sdk.leftpanel.pages
     - LeftFramePage.java
org.xyz.automation.sdk.leftpanel
     - LeftFrameNavigator.java

So basically org.xyz.automation.sdk contains all common configuration classes which has responsibility to instantiate web driver as per your system configuration.

org.xyz.automation.sdk.global.pages: This package contains page object class of common views, as I already said TopFrame is something which you can see throughout whole application so I modeled this view in TopFrame.java.To segregate the frame navigation from Page object class, I kept that in a separate package which is nothing but parent package of Page Object class.

org.xyz.automation.sdk.global contains Navigation.java which takes care of frame navigation and all other navigations. The only benefit of keeping it out from global.pages is that in future when your application won't support frames, you do not need to change any thing Page class, modify only navigator class.

org.xyz.automation.sdk.leftpanel.pages: Similar to above this package contains page object java class of left panel and again I separated out navigation of this left panel from leftpanel.pages package.

@FindBy This is nothing but a shortcut way to find web-elements of modeled page. The very basic concept of page object is each class should model a single view only so modeled class should contain only those web-elements which actually appear on modeled view. For e.g. TopFrame.java should contain log out element as it appears on that frame only.

    @FindBy(name = "logOut") // To find the element by name
    @CacheLookup
    private WebElement logOutLInk;

and while performing any action on it you should treat it as an instance of WebElement.

logOutLInk.click();

  /**
   * Class which models the view of Left Navigation Frame
   */
    public class LeftNavigationFrame{

        @FindBy(name= "exampleName")
        private WebElement exampleButton;

        private WebDriver driver;

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

        /**
         * Opens a new page by clicking example button
         */
        public void openNewPage() {
            exampleButton.click();
    }
}

Example of Navigator class:

  /**
   * Class which provides convenient methods to navigate on left frame
   */
    public class LeftFrameNavigator{
        private WebDriver driver;

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

        /**
         * Changes scope to the left frame 
         *
         * @return Page Object class of LeftNavigationFrame
         */
        public LeftNavigationFrame switchToLeftFrame() {
            // Code to switch Frame
            return new LeftNavigationFrame(driver);
    }
}

This is an example of your test class:

      /**
       * Class which contains test cases of xyz
       */
        public class doTesting{
        LeftFrameNavigator leftNav;

            @BeforeTest
            public void instantiateRequiredClasses() {
            LeftFrameNavigator leftNav = new LeftFrameNavigator();
            }

            @Test
            public void doTestingHere() {
            LeftNavigationFrame leftFrame = leftNav.switchToLeftFrame();
            leftFrame.openNewPage()
            }
        }
    }