Typescript Serenity JS从列表中选择一个元素

我已筛选出列出所有任务的下拉列表。当我在搜索框中键入字母时，我会看到以这些字母开头的任务列表

我的Serenity JS/Cucumber测试输入“给定”中的前两个字符，见下文Cucumber。但是我尝试使用Serenity从选项列表中选择一项

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

我用于查找任务的代码如下所示：

static List_Of_All_Tasks=Target.the（'List Of All Tasks'）。位于（by.className（'task'））

这将返回“任务”列表

我的问题是使用正常的Serenity js模式。如何选择列表中的项目

Click.on（）
有一个目标，但是我如何指定类似于
List\u Of_All\u Tasks.located（by.id='Take\u Out The_Trash'）
的内容呢？这里有几个选项，因此假设列表中的每个项目都有一个CSS类
task
和一个从其名称派生的id：

您可以使用
Target.of

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

然后：

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

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

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

查看
目标
类的示例，了解如何实现这一点

或者，您可以动态生成整个
目标
：

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

然后：

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

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

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


如果您不能执行上述任何操作，或者需要执行更复杂的操作，例如过滤列表，您可以定义自定义交互，使用
locate（target）
或
locateAll（target）
解析元素，这将分别为您提供一个量角器实例，并从中获取：

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 */
}

然后：

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

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

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

查看以了解如何使用量角器的
$
和
$$
选择器

太好了，很高兴听到这个！