As previously noted, the details of using the inspectors have been outlined in other sources, but what will be covered here is the use of the Selenium Page Object Model to store common element definitions in base classes, which can then be inherited by all subclasses that are derived from them. This reduces the number of elements that need to be defined in the framework itself.

Let's look at a few examples.

If we right click over the Yahoo home page, we will see the Inspect Element menu choice. Once selected, an Inspector window will overlay the page, showing the DOM elements. Users can select the arrow button and move freely over the elements on the page until they find the ones they need to define.

So, let's say the Yahoo page logo is on every page on the Yahoo portal, and we want to test that it exists on each page we build. It would make sense to define that element in the Yahoo base page object class, and inherit it in each page object subclass that is derived from it. For example:

// Yahoo home page logo image

<a id="uh-logo" href="https://www.yahoo.com/" class="D(ib) Bgr(nr) logo-datauri W(190px) H(45px) Bgp($twoColLogoPos) Bgz(190px) Bgp($twoColLogoPosSM)!--sm1024 Bgz(90px)!--sm1024 ua-ie7_Bgi($logoImageIe) ua-ie7_Mstart(-185px) ua-ie8_Bgi($logoImageIe) ua-ie9_Bgi($logoImageIe)" data-ylk="rspns:nav;t1:a1;t2:hd;sec:hd;itc:0;slk:logo;elm:img;elmt:logo;" tabindex="1" data-rapid_p="20"><b class="Hidden">Yahoo</b></a>

// Yahoo Base Class
public abstract class YahooBasePO <M extends WebElement> {

    // constructor
    public YahooBasePO() throws Exception {
        WebDriver driver = CreateDriver.getInstance().getDriver();
        PageFactory.initElements(driver, this);
    }

    @FindBy(id="uh-logo")
    @CacheLookup
    protected M yahooLogo;

    ...
}

// Yahoo News Subclass
public class YahooNewsPO <M extends WebElement> extends YahooBasePO<M> {

    public YahooNewsPO() throws Exception {
        super();
    }

    public void verifyYahooLogo(String expHref) throws Exception {
        String actHref = yahooLogo.getAttribute("href");
        assertEquals(actHref, expHref, "Verify Yahoo Logo HREF");
    }
}

As you can see, the yahooLogo element was not defined in the YahooNewsPO subclass, but it was used in the verifyYahooLogo method in that class. The element is inherited as defined in the base class, by the subclasses derived from it.

If any of the page object classes have slightly different locator definitions, the control can be overridden by including it in the subclass using the same element name.