Question

我有过滤下拉列表，其中列出了所有任务。当我在搜索框中输入字母时，我会看到一系列以这些字母开头的任务。

My Serenity-JS / Cucumber测试输入'Given'中的前两个字符，见下面的黄瓜。但我试图使用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').located(by.className('task'));

这将返回“任务”列表

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

Click.on()采用目标，但如何指定List_Of_All_Tasks.located(by.id='Take_Out_The_Trash')

之类的内容

Answer 1

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

查看Target课程的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'))
));

如果您无法执行上述任何操作或需要执行更复杂的操作（例如过滤列表），则可以定义自定义交互，使用locate(target)或{解析元素{1}}，它将分别为您提供量角器的ElementFinder or ElementArrayFinder实例，并从那里获取：
```
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 */
}
```
查看those examples，了解如何使用量角器的actor.attemptsTo( SelectTask.called('Take_Out_The_Trash') );和$选择器。

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

1 个答案: