在 serenity-js 中执行拖放操作

Question

我正在寻找一种使用 serenity-js (http://serenity-js.org/) 执行拖放操作的方法，但找不到任何示例。我能找到的是量角器方式，但是因为量角器是在 serenity-js 框架中烘焙的，所以我想知道如何让它工作。 (不好意思我是TS新手javascript)

更新：

我实施了 Jan Molak 的 HTML5 解决方法，但收到以下错误消息：

这是我的任务实现：

import { Execute, Target } from 'serenity-js/lib/screenplay-protractor';

import { PerformsTasks, Task } from 'serenity-js/lib/screenplay';

const dragAndDropScript = require('html-dnd').code; // tslint:disable-
line:no-var-requires

 export class DragAndDrop implements Task {

 static with(draggable: Target, dropzone: Target) {
    return new DragAndDrop(draggable, dropzone);
 }

 performAs(actor: PerformsTasks): PromiseLike<void> {
    return actor.attemptsTo(
        Execute.script(dragAndDropScript).withArguments(this.draggable, 
 this.dropzone)
    );
 }

 constructor(private draggable: Target, private dropzone: Target) {
 }
}

Answer 1

没有内置 interaction for that just yet, but Serenity/JS is quite easy to extend, so you could create a custom interaction (and maybe even submit it as a pull request?).

以下是我创建自定义交互的步骤。

1。研究量角器的方法

首先，考虑一下如何使用普通的量角器实现此功能？

Protractor's API documentation 建议以下选项：

// Dragging one element to another.
browser.actions().
    mouseDown(element1).
    mouseMove(element2).
    mouseUp().
    perform();

// You can also use the `dragAndDrop` convenience action.
browser.actions().
    dragAndDrop(element1, element2).
    perform();

// Instead of specifying an element as the target, you can specify an offset
// in pixels. This example double-clicks slightly to the right of an element.
browser.actions().
    mouseMove(element).
    mouseMove({x: 50, y: 0}).
    doubleClick().
    perform();

如您所见，以上所有示例都依赖于 browser.actions() API，因此我们需要找到一种方法来掌握它。

但在深入探讨之前，让我们尝试从外到内设计我们的新交互，并考虑我们想要的界面。

2。定义您要使用的 DSL

假设我想要一个 Serenity/JS、基于 Protractor 文档中第二个示例的剧本式交互：

browser.actions().
    dragAndDrop(element1, element2).
    perform();

提供以下接口：

actor.attemptsTo(
    DragAndDrop(element1).onto(element2);
)

这意味着我可以按如下方式定义交互的 DSL：

import { Target } from 'serenity-js/lib/screenplay-protractor';

export const DragAndDrop = (draggable: Target) => ({
    onto: (dropzone: Target) => ...
})

这将为我提供我想要的 DragAndDrop(draggable).onto(dropzone) 语法。

下一步是 DragAndDrop(draggable).onto(dropzone) 调用 return 实际交互。

3。定义交互

您可以使用以下简写语法定义交互：

import { Interaction } from 'serenity-js/lib/screenplay-protractor';

Interaction.where(`#actor drags ${draggable} onto ${dropzone}`, actor => {
    // interaction body
});

Serenity/JS 提供了一个“ability" to BrowseTheWeb。此功能是 protractor 对象的 Screenplay Pattern 样式包装器，这意味着您可以使用它来访问量角器特定的 APIs.

因此，只要您已赋予演员能力 BrowseTheWeb:

import { Actor, BrowseTheWeb } from 'serenity-js/lib/screenplay-protractor';

const Alice = Actor.named('Alice').whoCan(BrowseTheWeb.using(protractor.browser));

您可以在 interaction body:

中访问它

Interaction.where(`#actor drags ${draggable} onto ${dropzone}`, actor => {
    return BrowseTheWeb.as(actor).actions().
        dragAndDrop(..., ...).
        perform();
});

还缺少一个步骤，量角器的 browser.actions.dragAndDrop(..., ...) 方法要求您提供 WebElement 的实例，而不是 Serenity/JS 特定的 Target。

这意味着我们需要先解析 Target，然后再传递它：

Interaction.where(`#actor drags ${draggable} onto ${dropzone}`, actor => {

    const browse           = BrowseTheWeb.as(actor),
          draggableElement = browse.locate(draggable),
          dropzoneElement  = browse.locate(dropzone);

    return browse.actions().
        dragAndDrop(draggableElement, dropzoneElement).
        perform();
});

4。把它们放在一起

鉴于以上所有内容，最终实现可能如下所示：

import { Actor, BrowseTheWeb, Interaction, Target } from 'serenity-js/lib/screenplay-protractor';

export const DragAndDrop = (draggable: Target) => ({
    onto: (dropzone: Target) => Interaction.where(
        `#actor drags ${draggable} onto ${dropzone}`,
        actor => {
            const browse           = BrowseTheWeb.as(actor),
                  draggableElement = browse.locate(draggable),
                  dropzoneElement  = browse.locate(dropzone);

            return browse.actions().
                dragAndDrop(draggableElement, dropzoneElement).
                perform();
    })
})

HTML5 拖放和 Chrome

请注意，上述实现可能无法在 Chrome 驱动程序中使用 HTML5 drag and drop unless this defect 已修复。

或者，您可以安装 html-dnd 模块并按如下方式执行剧本式任务（您需要 Serenity/JS 1.9.3 或更高版本）：

import { Execute, Target, Task } from 'serenity-js/lib/screenplay-protractor';

const dragAndDropScript = require('html-dnd').code; // tslint:disable-line:no-var-requires

export const DragAndDrop = (draggable: Target) => ({
    onto: (dropzone: Target) => Task.where(`#actor drags ${draggable} onto ${dropzone}`,
        Execute.script(dragAndDropScript).withArguments(draggable, dropzone),
    ),
});

希望这对您有所帮助，感谢您加入 Serenity/JS 社区 :-)

一月

在 serenity-js 中执行拖放操作

Perform a drag and drop in serenity-js

drag-and-drop

serenity-js

更新：

1。研究量角器的方法

2。定义您要使用的 DSL

3。定义交互

4。把它们放在一起

HTML5 拖放和 Chrome