typescript - Serenity-JS Select an Element from a list -

i have filtered drop down list list tasks. when type letters search box presented list of tasks start letters.

my serenity-js / cucumber test inputs first 2 characters in 'given' see below cucumber. trying use serenity select item list of options.

given james has entered 'ta' tasks box when selects 'take out trash' task list options sees 'take out trash' in heading 

the code using find tasks this:

static list_of_all_tasks = target.the('list of tasks').located(by.classname('task'));

this returns list of 'tasks'

my question using normal serenity-js pattern. how select item in list?

the click.on() takes target how specify list_of_all_tasks.located(by.id='take_out_the_trash')

you have several options here, assuming each item in list has css class task , id derived name:

1. you can generate selector dynamically using target.of

   const todolist = {   task: target.the('task {0}').located(by.css('.task#{0}'), } 

   and then:

   actor.attemptsto(     click.on(todolist.task.of('take_out_the_trash')) ); 

   have @ test cases target class see how can accomplished.

2. alternatively, can generate whole target dynamically:

   const todolist = {     taskto: (name: string) => target.the(`task ${name}`)                                 .located(by.css(`.task#${name}`) } 

   and then:

   actor.attemptsto(     click.on(todolist.taskto('take_out_the_trash')) )); 

3. if can't of above or need bit more sophisticated filtering list example, define custom interaction, resolve element using locate(target) or locateall(target), give instance of protractor's elementfinder or elementarrayfinder respectively, , take there:

   const tasks = target.the('list of tasks').located(by.classname('task'));  const selecttask = {      called: (name: string) => interaction.where(`#actor selects task ${name}`,      actor => browsetheweb.as(actor).locateall(tasks)./* continue elementarrayfinder methods */ } 

   and then:

   actor.attemptsto(     selecttask.called('take_out_the_trash') ); 

   have @ those examples see how protractor's $ , $$ selectors can used.