Serenity-JS Select 列表中的一个元素

Question

我过滤了列出所有任务的下拉列表。当我在搜索框中键入字母时，系统会显示以这些字母开头的任务列表。

我的Serenity-JS / Cucumber 测试输入'Given'中的前两个字符见下面的cucumber。但我正在尝试使用 Serenity select 选项列表中的项目。

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').located(by.className('task'));

这个returns列表'tasks'

我的问题是使用普通的 Serenity-js 模式。我如何 select 列表中的项目？

Click.on() 需要一个目标，但我如何指定 List_Of_All_Tasks.located(by.id='Take_Out_The_Trash')

之类的东西

Answer 1

这里有几个选项，因此假设列表中的每个项目都有一个 CSS class 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'))
);

查看 Target class 的 test cases 以了解如何实现。

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

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

然后：

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

如果您不能执行上述任何操作或需要执行一些更复杂的操作，例如过滤列表，您可以定义自定义交互，使用 [=20 解析元素=] 或 locateAll(target)，这将分别为您提供 Protractor 的 ElementFinder or ElementArrayFinder 实例，并从那里获取它：
```
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(
    SelectTask.called('Take_Out_The_Trash')
);
```
查看 those examples 以了解如何使用量角器的 $ 和 $$ 选择器。

Serenity-JS Select 列表中的一个元素

Serenity-JS Select an Element from a list

typescript

serenity-js