Understanding table mapping in page objects

Access world-class customer support at the Provar Success Portal

If you face any issues when mapping a particular table, please get in touch with us and we would be happy to help. To raise a case, simply log into the Provar Success Portal and click View/Raise Case. Providing ongoing support is part of our promise to help you deliver robust, scalable and repeatable testing to achieve release agility, drive down system errors and get the maximum return on your Salesforce investment. Please contact us for more information.

Introduction

Once you have mapped a table within a page object, the only way to amend it is to update the Java generated in the page object.

Syntax explained

The column XPath is relative to the table and row XPaths.  

   <Table Xpath><Data Row XPath> and will start with //

Configure a table manually in your page object

Step 1: After mapping your table, Test Builder will add this import to the top of the page object.

import com.provar.core.model.ui.api.UiFacet;

Step 2: Add the following to the class.

@PageRow()
    public static class Example {

        @TextType()
        @FindBy(xpath = "//td[1]")
        public WebElement Company;
    }

    
    @FacetFindBys(value = {
            @FacetFindBy(findBy = @FindBy(xpath = "tbody/tr"), facet = UiFacet.DATA_ROWS),
            @FacetFindBy(findBy = @FindBy(xpath = "tbody/tr[1]"), facet = UiFacet.HEADER_ROW) })
    @FindBy(xpath = "(//table[@id='customers'])[1]")
    @PageTable(firstRowContainsHeaders = false, row = Example.class)
    public List<Example> example;

Manual mapping process

Using the table in the following website, we will attempt to work out the XPaths required to map a table.

Take a look at the Custom table mapping page for an overview of the table mapping fields. If Provar is unable to determine the boundaries of the Table, Rows and Header for you, it is necessary to form this task manually by inspecting the web page under test.  

For this example we will use a simple webpage:  https://www.w3schools.com/html/html_tables.asp

Step 1: Inspect the web page using right-click.

Step 2: Select an element in the table by first clicking Select Element.

Step 3: Then click the first cell in the table.

Step 4: Ask Chrome to provide an XPath for the table by right-clicking on the table element.

From here you can determine the relative XPath for the rows.

Step 5: To arrive at a row you need to provide tbody/tr.

Step 6: Once the table is mapped, you can add columns manually. In the example above the relative XPath for the first column is td[1] and you would add “//td[1]” to your page object.