function to parse a html identifier in typescript from cucumber .feature file to a pageobject file

Question

Attached I have an image example of my dropdown and textbox I have a dropdown and a text box, I want to create a Pageobject function that parses a .css or class html identifier and splits it with a " - " for example:

i have a cucumber .feature file that does this

And he filters account Name so that it contains dyno

So here I am saying find the Account Name column and select a value in the dropdown and then enter a value inside the text box, in theory if i get the Devs to create a html Identifier for the dropdown and textbox that is something similar to this: (specficially an identifier with accountName)

<th _ngcontent-c2="" class="ui-p-6 ui-sortable-column" 
    preorderablecolumn="" style="text-align:left;" 
    ng-reflect-field="accountId" draggable="true">
        Account Name

  <p-sorticon _ngcontent-c2="" ng-reflect-field="accountId">

    <span class="ui-sortable-column-icon fa fa-fw fa-sort" 
          ng-reflect-klass="ui-sortable-column-icon fa fa-" 
          ng-reflect-ng-class="[object Object]">
    </span>

  </p-sorticon>
</th>

here is my step definition:

this.When(/^s?he filters (.*) so that it ?(.*)?(.*) ?(.*)$/,
    (columnName: string, bySelectingTheFilter: string, 
     andEnteringText: string, intoTextBox: string) => {
        return stage.theActorInTheSpotlight().attemptsTo(
            FilterTheList.toShow(columnName, bySelectingTheFilter, 
                         andEnteringText, intoTextBox)
        );
    });

I have a task file that houses the class that does the selecting the dropdown and entering the data inside the text box here:

export class FilterTheList implements Task {
    constructor(private columnName: string, private filter: string,
                private text: string, private filterTextBox: string) {
    }

    static filterOptionShow() {
        return Click.on(AccountListUI.accountListShowFilter);
    }

    static toShow(columnName: string, filter: string, text: string, filterTextBox: string){
        // @todo need to sanitize columns to match HTML identifier
        // this.columnName = columnName; 

        // @todo need to sanitize columns to match HTML identifier
        // this.filterTextBox = filterTextBox;
        return new FilterTheList(columnName, filter, text, filterTextBox);
    }

    @step('{0} filters the list to show #taskType items')
    performAs(actor: PerformsTasks): PromiseLike<void> {
        return actor.attemptsTo(
            Select.theValue(this.filter)
                .from(AccountListUI.filter.dropDown(this.columnName)),
            Enter.theValue(this.text)
                .into(AccountListUI.filter.textBox(this.filterTextBox))
        );
    }
}

Im thinking I can make a pageoject function like so

static filterItems = {
        dropDown: (name: string) => Target.the(`filter dropdown called ${name}`)
            .located(by.css(`th.${name} input[type="select"]`)),
        textBox: (name: string) => Target.the(`filter textbox called ${name}`)
            .located(by.css(`th.${name} input[type="text"]`)),
    };

but that function will be called after I find the column name

this is where im lost on how I can make a function to say "hey get the column name from the .feature file and parse it to what the html provides (ie: parsing account Name to accountName)

Please give a real HTML of your table – yong Apr 03 '18 at 23:34 — yong, Apr 03 '18 at 23:34

score 0 · Answer 1 · answered Apr 03 '18 at 23:34

PageObject function:

static filterItems = {
        dropDown: (name: string) => Target.the(`filter dropdown called ${name}`)
            .located(by.xpath(`//th[normalize-space(.)="${name}"]/select`)),
        textBox: (name: string) => Target.the(`filter textbox called ${name}`)
            .located(by.xpath(`//th[normalize-space(.)="${name}"]/input[type="text"]`)),
    };

Step in feature file:

And he filters Account Name so that it contains dyno

Step defintion function:

And(/^he filters (.+) so that it (\w+) (.+)$/, (columnName, filterMethod, filterWords) => {
   // columnName   => Account Name
   // filterMethod => contains
   // filterWords  => dyno
   pageA.filterItems.dropdown(columnName)... 
});

I have updated the html and I also added my class that does the selecting and adding text along with my definiton function — kapperkp, Apr 04 '18 at 14:50

function to parse a html identifier in typescript from cucumber .feature file to a pageobject file

1 Answers1