Serenity-JS Select an Element from a list

Question

I have filtered drop down list which list all tasks. When I type letters into the search box I am presented with a list of tasks that start with those letters.

My Serenity-JS / Cucumber test inputs the first two characters in the 'Given' see below cucumber. But I am trying to use Serenity to select an Item from the list of options.

Given James has entered 'Ta' into the tasks box
When he selects 'Take out the Trash' from the task list options
Then he sees 'Take Out the Trash' in the heading

The Code I am using to find the tasks is something like this:

static List_Of_All_Tasks = Target.the('List of all tasks').located(by.className('task'));

This returns a list of 'tasks'

My question is using the normal Serenity-js Pattern. How do I select an Item in the list?

The Click.on() takes a Target but how do I specify something like List_Of_All_Tasks.located(by.id='Take_Out_The_Trash')

Answer 1

You have several options here, so assuming that each item in the list has a CSS class task and an ID derived from its name:

1. You can generate the selector dynamically using Target.of

   const TodoList = {
     Task: Target.the('task to {0}').located(by.css('.task#{0}'),
   }
   

   and then:

   actor.attemptsTo(
       Click.on(TodoList.Task.of('Take_Out_The_Trash'))
   );
   

   Have a look at the test cases for the Target class to see how this can be accomplished.

2. Alternatively, you can generate the whole Target dynamically:

   const TodoList = {
       TaskTo: (name: string) => Target.the(`task to ${name}`)
                                   .located(by.css(`.task#${name}`)
   }
   

   and then:

   actor.attemptsTo(
       Click.on(TodoList.TaskTo('Take_Out_The_Trash'))
   ));
   

3. If you can't do any of the above or need to do something a bit more sophisticated like filtering the list for example, you could define a custom Interaction, resolve the element using locate(target) or locateAll(target), which will give you an instance of Protractor's ElementFinder or ElementArrayFinder respectively, and take it from there:

   const Tasks = Target.the('List of all tasks').located(by.className('task'));
   
   const SelectTask = {
        called: (name: string) => Interaction.where(`#actor selects a task to ${name}`,
        actor => BrowseTheWeb.as(actor).locateAll(Tasks)./* continue with ElementArrayFinder methods */
   }
   

   and then:

   actor.attemptsTo(
       SelectTask.called('Take_Out_The_Trash')
   );
   

   Have a look at the those examples to see how protractor's $ and $$ selectors can be used.