Search code examples
javascriptseleniumprotractorend-to-endpageobjects

protractor create a table page object to process tables with different selectors?

my first post. I am writing e2e tests in protractor using page objects with javascript/nodejs. Have read many SO posts on this, read Julie's pages as well as studying ProtractorPageObjects.

All of the tables in the application have the same structure. The only difference is in an attribute: data-row-type can be one of 10 possible values like 'job', 'node', 'rack', etc...

Obviously I can pass in the string to a method and switch in the method to construct the correct selector. Based on comments in ProTractorPageObjects I am trying NOT to write the code that way. Am I being silly here, just use the string and get on with it or is there a way to create such a method without having to pass in the string?

In chapter 5 of the ProTractorPageObjects, in the columns.js file it is mentioned not to use a pattern where a string is passed in to determine what is looked for.

For example: 

<div id="ee54a74e-17b8-4380-bbd8-2a5087bad7c9" class="tableRow escale-table-row-selected" data-row-type="ipAddress" data-qa-row-number="1">
            <div class="tableCell">
                <span class=""></span>                    ips-172-20-143-20-21
            </div>
            <div class="tableCell">
                <span class=""></span>                    UP
            </div>
            <div class="tableCell">
                <span class=""></span>                    Yes
            </div>

...

Another Table:

<div id="6f529383-c0f3-49b7-9ccb-c8db2b0c75a9" class="tableRow escale-table-row-selected" data-row-type="fileSystem" data-qa-row-number="0">
            <div class="tableCell">
                <span class=""></span>                    card-view<div><span class="fa fa-square success fileSystemIndicator"></span><span id="6f529383-c0f3-49b7-9ccb-c8db2b0c75a9-share" class="fa fa-square fileSystemIndicator success"></span><span id="6f529383-c0f3-49b7-9ccb-c8db2b0c75a9-accessRule" class="fa fa-square fileSystemIndicator success"></span></div>
            </div>
            <div class="tableCell">
                <span class=""></span>                    UP
            </div>
            <div class="tableCell">
                <span class=""></span>                    Yes
            </div>
 ......
Solution

  • It is perfectly okay to construct your selector based on a string value that is passed into a method and then used to match a div element's data-row-type attribute. data-row-type attribute in your case is quite a "data-oriented" attribute (well, compare it to, for instance, style attribute - this one is very much UI/style oriented and is always a poor choice to rely your locators on) and uniquely distinguishes/defines the page blocks on a page.

    Example implementation:

    function getTable (tableType) {
    return element(by.css("div[data-row-type='" + tableType + "']"));
}

    Sample usage:

    getTable("ipAddress");
getTable("fileSystem");