@serenity-js/web 3.39.0 → 3.40.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.40.0](https://github.com/serenity-js/serenity-js/compare/v3.39.0...v3.40.0) (2026-02-04)
+
+
+### Bug Fixes
+
+* **protractor:** use JavaScript-based drag and drop for HTML5 events ([c5fdfca](https://github.com/serenity-js/serenity-js/commit/c5fdfca1788136fb8f69c9dbe5829072181a061f))
+
+
+### Features
+
+* **web:** introduce Drag interaction to drag and drop page elements ([fdde2c3](https://github.com/serenity-js/serenity-js/commit/fdde2c317074f93527bf67f86bf56dcbf1b6647e)), closes [#2663](https://github.com/serenity-js/serenity-js/issues/2663)
+
+
+
+
+
 # [3.39.0](https://github.com/serenity-js/serenity-js/compare/v3.38.0...v3.39.0) (2026-01-30)
 
 **Note:** Version bump only for package @serenity-js/web

package/lib/screenplay/interactions/Drag.d.ts

@@ -0,0 +1,95 @@
+import type { Answerable } from '@serenity-js/core';
+import { Interaction } from '@serenity-js/core';
+import type { PageElement } from '../models';
+/**
+ * Instructs an [actor](https://serenity-js.org/api/core/class/Actor/) who has the [ability](https://serenity-js.org/api/core/class/Ability/) to [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
+ * to drag a [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) and drop it on another [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+ *
+ * ## Example HTML with draggable element and drop zone
+ *
+ * ```html
+ * <p id="draggable" draggable="true">
+ *   This element is draggable.
+ * </p>
+ * <div id="droppable">
+ *   Drop Zone
+ * </div>
+ *
+ * <script>
+ *   const draggable = document.getElementById('draggable');
+ *   const droppable = document.getElementById('droppable');
+ *
+ *   draggable.addEventListener('dragstart', (event) => {
+ *     event.dataTransfer.setData('text/plain', event.target.id);
+ *     event.dataTransfer.effectAllowed = 'move';
+ *   });
+ *
+ *   droppable.addEventListener('dragover', (event) => {
+ *     event.preventDefault();
+ *   });
+ *
+ *   droppable.addEventListener('drop', (event) => {
+ *     event.preventDefault();
+ *     const id = event.dataTransfer.getData('text/plain');
+ *     event.target.appendChild(document.getElementById(id));
+ *   });
+ * </script>
+ * ```
+ *
+ * ## Page Elements for draggable and drop zone
+ *
+ * ```ts
+ * import { By, PageElement } from '@serenity-js/web';
+ *
+ * const draggable = () =>
+ *   PageElement.located(By.id('draggable')).describedAs('draggable element');
+ *
+ * const dropZone = () =>
+ *   PageElement.located(By.id('droppable')).describedAs('drop zone');
+ * ```
+ *
+ * ## Dragging and dropping the element
+ *
+ * ```ts
+ * import { actorCalled } from '@serenity-js/core'
+ * import { Ensure, isPresent } from '@serenity-js/assertions'
+ * import { Drag, Navigate } from '@serenity-js/web'
+ *
+ * await actorCalled('Doug')
+ *   .attemptsTo(
+ *     Navigate.to('/drag-and-drop-example.html'),
+ *     Drag.the(draggable()).to(dropZone()),
+ *     Ensure.that(draggable().of(dropZone()), isPresent()),
+ *   )
+ * ```
+ *
+ * ## Learn more
+ *
+ * - [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
+ * - [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) on MDN
+ *
+ * @group Activities
+ */
+export declare class Drag {
+    private readonly draggable;
+    /**
+     * Instructs an [actor](https://serenity-js.org/api/core/class/Actor/) who has the [ability](https://serenity-js.org/api/core/class/Ability/) to [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
+     * to drag a [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) and drop it on another [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+     *
+     * Call [`.to(...)`](https://serenity-js.org/api/web/class/Drag/#to) to specify the destination.
+     *
+     * @param draggable
+     *  The element that will be dragged
+     */
+    static the(draggable: Answerable<PageElement>): Drag;
+    private constructor();
+    /**
+     * Instructs an [actor](https://serenity-js.org/api/core/class/Actor/) who has the [ability](https://serenity-js.org/api/core/class/Ability/) to [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
+     * to drag a [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) and drop it on another [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+     *
+     * @param destination
+     *  The element to drop it on
+     */
+    to(destination: Answerable<PageElement>): Interaction;
+}
+//# sourceMappingURL=Drag.d.ts.map

package/lib/screenplay/interactions/Drag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drag.d.ts","sourceRoot":"","sources":["../../../src/screenplay/interactions/Drag.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAS,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAO,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,qBAAa,IAAI;IAeO,OAAO,CAAC,QAAQ,CAAC,SAAS;IAb9C;;;;;;;;OAQG;IACH,MAAM,CAAC,GAAG,CAAC,SAAS,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,IAAI;IAIpD,OAAO;IAGP;;;;;;OAMG;IACH,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,WAAW;CAGxD"}

package/lib/screenplay/interactions/Drag.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drag = void 0;
+const core_1 = require("@serenity-js/core");
+/**
+ * Instructs an [actor](https://serenity-js.org/api/core/class/Actor/) who has the [ability](https://serenity-js.org/api/core/class/Ability/) to [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
+ * to drag a [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) and drop it on another [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+ *
+ * ## Example HTML with draggable element and drop zone
+ *
+ * ```html
+ * <p id="draggable" draggable="true">
+ *   This element is draggable.
+ * </p>
+ * <div id="droppable">
+ *   Drop Zone
+ * </div>
+ *
+ * <script>
+ *   const draggable = document.getElementById('draggable');
+ *   const droppable = document.getElementById('droppable');
+ *
+ *   draggable.addEventListener('dragstart', (event) => {
+ *     event.dataTransfer.setData('text/plain', event.target.id);
+ *     event.dataTransfer.effectAllowed = 'move';
+ *   });
+ *
+ *   droppable.addEventListener('dragover', (event) => {
+ *     event.preventDefault();
+ *   });
+ *
+ *   droppable.addEventListener('drop', (event) => {
+ *     event.preventDefault();
+ *     const id = event.dataTransfer.getData('text/plain');
+ *     event.target.appendChild(document.getElementById(id));
+ *   });
+ * </script>
+ * ```
+ *
+ * ## Page Elements for draggable and drop zone
+ *
+ * ```ts
+ * import { By, PageElement } from '@serenity-js/web';
+ *
+ * const draggable = () =>
+ *   PageElement.located(By.id('draggable')).describedAs('draggable element');
+ *
+ * const dropZone = () =>
+ *   PageElement.located(By.id('droppable')).describedAs('drop zone');
+ * ```
+ *
+ * ## Dragging and dropping the element
+ *
+ * ```ts
+ * import { actorCalled } from '@serenity-js/core'
+ * import { Ensure, isPresent } from '@serenity-js/assertions'
+ * import { Drag, Navigate } from '@serenity-js/web'
+ *
+ * await actorCalled('Doug')
+ *   .attemptsTo(
+ *     Navigate.to('/drag-and-drop-example.html'),
+ *     Drag.the(draggable()).to(dropZone()),
+ *     Ensure.that(draggable().of(dropZone()), isPresent()),
+ *   )
+ * ```
+ *
+ * ## Learn more
+ *
+ * - [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
+ * - [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) on MDN
+ *
+ * @group Activities
+ */
+class Drag {
+    draggable;
+    /**
+     * Instructs an [actor](https://serenity-js.org/api/core/class/Actor/) who has the [ability](https://serenity-js.org/api/core/class/Ability/) to [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
+     * to drag a [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) and drop it on another [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+     *
+     * Call [`.to(...)`](https://serenity-js.org/api/web/class/Drag/#to) to specify the destination.
+     *
+     * @param draggable
+     *  The element that will be dragged
+     */
+    static the(draggable) {
+        return new Drag(draggable);
+    }
+    constructor(draggable) {
+        this.draggable = draggable;
+    }
+    /**
+     * Instructs an [actor](https://serenity-js.org/api/core/class/Actor/) who has the [ability](https://serenity-js.org/api/core/class/Ability/) to [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
+     * to drag a [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) and drop it on another [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+     *
+     * @param destination
+     *  The element to drop it on
+     */
+    to(destination) {
+        return new DragAndDrop(this.draggable, destination);
+    }
+}
+exports.Drag = Drag;
+/**
+ * @package
+ */
+class DragAndDrop extends core_1.Interaction {
+    draggable;
+    destination;
+    constructor(draggable, destination) {
+        super((0, core_1.the) `#actor drags ${draggable} and drops it on ${destination}`);
+        this.draggable = draggable;
+        this.destination = destination;
+    }
+    /**
+     * @inheritDoc
+     */
+    async performAs(actor) {
+        const draggable = await actor.answer(this.draggable);
+        const destination = await actor.answer(this.destination);
+        await draggable.dragTo(destination);
+    }
+}
+//# sourceMappingURL=Drag.js.map

package/lib/screenplay/interactions/Drag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drag.js","sourceRoot":"","sources":["../../../src/screenplay/interactions/Drag.ts"],"names":[],"mappings":";;;AACA,4CAAqD;AAIrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,MAAa,IAAI;IAewB;IAbrC;;;;;;;;OAQG;IACH,MAAM,CAAC,GAAG,CAAC,SAAkC;QACzC,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;IAC/B,CAAC;IAED,YAAqC,SAAkC;QAAlC,cAAS,GAAT,SAAS,CAAyB;IACvE,CAAC;IAED;;;;;;OAMG;IACH,EAAE,CAAC,WAAoC;QACnC,OAAO,IAAI,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IACxD,CAAC;CACJ;AA5BD,oBA4BC;AAED;;GAEG;AACH,MAAM,WAAY,SAAQ,kBAAW;IAEZ;IACA;IAFrB,YACqB,SAAkC,EAClC,WAAoC;QAErD,KAAK,CAAC,IAAA,UAAG,EAAA,gBAAiB,SAAU,oBAAqB,WAAY,EAAE,CAAC,CAAC;QAHxD,cAAS,GAAT,SAAS,CAAyB;QAClC,gBAAW,GAAX,WAAW,CAAyB;IAGzD,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,SAAS,CAAC,KAAY;QACxB,MAAM,SAAS,GAAG,MAAM,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACrD,MAAM,WAAW,GAAG,MAAM,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEzD,MAAM,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IACxC,CAAC;CACJ"}

package/lib/screenplay/interactions/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Clear';
 export * from './Click';
 export * from './DoubleClick';
+export * from './Drag';
 export * from './Enter';
 export * from './ExecuteScript';
 export * from './Hover';

package/lib/screenplay/interactions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/screenplay/interactions/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/screenplay/interactions/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC"}

package/lib/screenplay/interactions/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Clear"), exports);
 __exportStar(require("./Click"), exports);
 __exportStar(require("./DoubleClick"), exports);
+__exportStar(require("./Drag"), exports);
 __exportStar(require("./Enter"), exports);
 __exportStar(require("./ExecuteScript"), exports);
 __exportStar(require("./Hover"), exports);

package/lib/screenplay/interactions/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/screenplay/interactions/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB;AACxB,0CAAwB;AACxB,gDAA8B;AAC9B,0CAAwB;AACxB,kDAAgC;AAChC,0CAAwB;AACxB,6CAA2B;AAC3B,2DAAyC;AACzC,0CAAwB;AACxB,+CAA6B;AAC7B,2CAAyB;AACzB,2CAAyB;AACzB,2CAAyB;AACzB,mDAAiC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/screenplay/interactions/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB;AACxB,0CAAwB;AACxB,gDAA8B;AAC9B,yCAAuB;AACvB,0CAAwB;AACxB,kDAAgC;AAChC,0CAAwB;AACxB,6CAA2B;AAC3B,2DAAyC;AACzC,0CAAwB;AACxB,+CAA6B;AAC7B,2CAAyB;AACzB,2CAAyB;AACzB,2CAAyB;AACzB,mDAAiC"}

package/lib/screenplay/models/PageElement.d.ts

@@ -115,6 +115,13 @@ export declare abstract class PageElement<Native_Element_Type = any> implements
     abstract rightClick(): Promise<void>;
     abstract selectOptions(...options: Array<SelectOption>): Promise<void>;
     abstract selectedOptions(): Promise<Array<SelectOption>>;
+    /**
+     * Drags this element and drops it on the `destination` element.
+     *
+     * @param destination
+     *  The element to drop this element on
+     */
+    abstract dragTo(destination: PageElement<Native_Element_Type>): Promise<void>;
     abstract attribute(name: string): Promise<string>;
     abstract text(): Promise<string>;
     abstract value(): Promise<string>;

package/lib/screenplay/models/PageElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageElement.d.ts","sourceRoot":"","sources":["../../../src/screenplay/models/PageElement.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageElement.d.ts","sourceRoot":"","sources":["../../../src/screenplay/models/PageElement.ts"],"names":[],"mappings":"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"}

package/lib/screenplay/models/PageElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageElement.js","sourceRoot":"","sources":["../../../src/screenplay/models/PageElement.ts"],"names":[],"mappings":";;;AACA,4CAAkD;AAClD,2CAA+C;AAE/C,4CAA4C;AAO5C;;;;;;;;;;GAUG;AACH,MAAsB,WAAW;IA+DD;IA7D5B,MAAM,CAAC,IAAI,CAAM,aAAkB;QAC/B,OAAO,eAAQ,CAAC,KAAK,CAAC,qBAAqB,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE;YACvD,MAAM,WAAW,GAAG,MAAM,wBAAY,CAAC,EAAE,CAAoB,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;YAElF,OAAO,WAAW,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;IACP,CAAC;IAED,MAAM,CAAC,OAAO,CAAM,QAA8B;QAC9C,OAAO,eAAQ,CAAC,KAAK,CAAC,IAAA,UAAG,EAAA,wBAAyB,QAAS,EAAE,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE;YACzE,MAAM,UAAU,GAAI,MAAM,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YACjD,MAAM,WAAW,GAAG,MAAM,wBAAY,CAAC,EAAE,CAAoB,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;YAElF,OAAO,WAAW,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC;IACP,CAAC;IAED,MAAM,CAAC,EAAE,CACL,YAAwF,EACxF,aAA2C;QAE3C,OAAO,eAAQ,CAAC,KAAK,CAAC,IAAA,UAAG,EAAA,GAAI,YAAa,OAAQ,aAAc,EAAE,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE;YAC9E,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;YACjD,MAAM,KAAK,GAAG,YAAY,CAAC,EAAE,CAAC,MAAM,CAAC,CAAA;YAErC,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;IACP,CAAC;IAED;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,MAAM,CAAC,IAAI;QACP,OAAO;YACH,EAAE,EAAE,CAAC,WAAyC,EAAE,EAAE,CAC9C,eAAQ,CAAC,KAAK,CAAC,iBAAiB,WAAW,EAAE,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE;gBACzD,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;gBAChD,OAAO,OAAO,CAAC,IAAI,EAAE,CAAC;YAC1B,CAAC,CAAC;SACT,CAAA;IACL,CAAC;IAED,YAA4B,OAAqC;QAArC,YAAO,GAAP,OAAO,CAA8B;QAC7D,IAAA,mBAAM,EAAC,wBAAwB,EAAE,OAAO,EAAE,IAAA,sBAAS,GAAE,CAAC,CAAC;IAC3D,CAAC;IA6DD;;OAEG;IACH,KAAK,CAAC,aAAa;QACf,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAED,QAAQ;QACJ,OAAO,uBAAwB,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAG,EAAE,CAAC;IAC9D,CAAC;IA4ED;;;;OAIG;IACH,KAAK,CAAC,SAAS;QACX,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;IACpC,CAAC;CAoBJ;AA9OD,kCA8OC"}
+{"version":3,"file":"PageElement.js","sourceRoot":"","sources":["../../../src/screenplay/models/PageElement.ts"],"names":[],"mappings":";;;AACA,4CAAkD;AAClD,2CAA+C;AAE/C,4CAA4C;AAO5C;;;;;;;;;;GAUG;AACH,MAAsB,WAAW;IA+DD;IA7D5B,MAAM,CAAC,IAAI,CAAM,aAAkB;QAC/B,OAAO,eAAQ,CAAC,KAAK,CAAC,qBAAqB,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE;YACvD,MAAM,WAAW,GAAG,MAAM,wBAAY,CAAC,EAAE,CAAoB,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;YAElF,OAAO,WAAW,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;IACP,CAAC;IAED,MAAM,CAAC,OAAO,CAAM,QAA8B;QAC9C,OAAO,eAAQ,CAAC,KAAK,CAAC,IAAA,UAAG,EAAA,wBAAyB,QAAS,EAAE,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE;YACzE,MAAM,UAAU,GAAI,MAAM,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YACjD,MAAM,WAAW,GAAG,MAAM,wBAAY,CAAC,EAAE,CAAoB,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;YAElF,OAAO,WAAW,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC;IACP,CAAC;IAED,MAAM,CAAC,EAAE,CACL,YAAwF,EACxF,aAA2C;QAE3C,OAAO,eAAQ,CAAC,KAAK,CAAC,IAAA,UAAG,EAAA,GAAI,YAAa,OAAQ,aAAc,EAAE,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE;YAC9E,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;YACjD,MAAM,KAAK,GAAG,YAAY,CAAC,EAAE,CAAC,MAAM,CAAC,CAAA;YAErC,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;IACP,CAAC;IAED;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,MAAM,CAAC,IAAI;QACP,OAAO;YACH,EAAE,EAAE,CAAC,WAAyC,EAAE,EAAE,CAC9C,eAAQ,CAAC,KAAK,CAAC,iBAAiB,WAAW,EAAE,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE;gBACzD,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;gBAChD,OAAO,OAAO,CAAC,IAAI,EAAE,CAAC;YAC1B,CAAC,CAAC;SACT,CAAA;IACL,CAAC;IAED,YAA4B,OAAqC;QAArC,YAAO,GAAP,OAAO,CAA8B;QAC7D,IAAA,mBAAM,EAAC,wBAAwB,EAAE,OAAO,EAAE,IAAA,sBAAS,GAAE,CAAC,CAAC;IAC3D,CAAC;IA6DD;;OAEG;IACH,KAAK,CAAC,aAAa;QACf,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAED,QAAQ;QACJ,OAAO,uBAAwB,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAG,EAAE,CAAC;IAC9D,CAAC;IAoFD;;;;OAIG;IACH,KAAK,CAAC,SAAS;QACX,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;IACpC,CAAC;CAoBJ;AAtPD,kCAsPC"}

package/lib/scripts/dragAndDrop.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Simulates HTML5 drag and drop events.
+ *
+ * This script is a workaround for Selenium WebDriver's inability to properly
+ * trigger HTML5 drag events using the Actions API. It manually dispatches
+ * the required drag events (dragstart, dragenter, dragover, drop, dragend)
+ * to simulate a complete drag and drop operation.
+ *
+ * @param source - The element to drag
+ * @param target - The element to drop onto
+ */
+export declare function dragAndDrop(source: HTMLElement, target: HTMLElement): void;
+//# sourceMappingURL=dragAndDrop.d.ts.map

package/lib/scripts/dragAndDrop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragAndDrop.d.ts","sourceRoot":"","sources":["../../src/scripts/dragAndDrop.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAgE1E"}

package/lib/scripts/dragAndDrop.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dragAndDrop = dragAndDrop;
+/* c8 ignore start */
+/**
+ * Simulates HTML5 drag and drop events.
+ *
+ * This script is a workaround for Selenium WebDriver's inability to properly
+ * trigger HTML5 drag events using the Actions API. It manually dispatches
+ * the required drag events (dragstart, dragenter, dragover, drop, dragend)
+ * to simulate a complete drag and drop operation.
+ *
+ * @param source - The element to drag
+ * @param target - The element to drop onto
+ */
+function dragAndDrop(source, target) {
+    function createDragEvent(type, dataTransfer) {
+        return new DragEvent(type, {
+            bubbles: true,
+            cancelable: true,
+            dataTransfer,
+        });
+    }
+    function createDataTransfer() {
+        try {
+            return new DataTransfer();
+        }
+        catch {
+            // Fallback for older browsers
+            const event = document.createEvent('CustomEvent');
+            event.initCustomEvent('', false, false, null);
+            event.dataTransfer = {
+                data: {},
+                setData(format, data) {
+                    this.data[format] = data;
+                },
+                getData(format) {
+                    return this.data[format];
+                },
+                clearData(format) {
+                    if (format) {
+                        delete this.data[format];
+                    }
+                    else {
+                        this.data = {};
+                    }
+                },
+                setDragImage() {
+                    // no-op
+                },
+                dropEffect: 'none',
+                effectAllowed: 'all',
+                files: [],
+                items: [],
+                types: [],
+            };
+            return event.dataTransfer;
+        }
+    }
+    // Create a DataTransfer object to share between events
+    const dataTransfer = createDataTransfer();
+    // Dispatch dragstart on source
+    source.dispatchEvent(createDragEvent('dragstart', dataTransfer));
+    // Dispatch dragenter on target
+    target.dispatchEvent(createDragEvent('dragenter', dataTransfer));
+    // Dispatch dragover on target (required for drop to work)
+    const dragOverEvent = createDragEvent('dragover', dataTransfer);
+    target.dispatchEvent(dragOverEvent);
+    // Dispatch drop on target
+    target.dispatchEvent(createDragEvent('drop', dataTransfer));
+    // Dispatch dragend on source
+    source.dispatchEvent(createDragEvent('dragend', dataTransfer));
+}
+/* c8 ignore stop */
+//# sourceMappingURL=dragAndDrop.js.map

package/lib/scripts/dragAndDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragAndDrop.js","sourceRoot":"","sources":["../../src/scripts/dragAndDrop.ts"],"names":[],"mappings":";;AAaA,kCAgEC;AA5ED,qBAAqB;AACrB;;;;;;;;;;GAUG;AACH,SAAgB,WAAW,CAAC,MAAmB,EAAE,MAAmB;IAEhE,SAAS,eAAe,CAAC,IAAY,EAAE,YAA0B;QAC7D,OAAO,IAAI,SAAS,CAAC,IAAI,EAAE;YACvB,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,YAAY;SACf,CAAC,CAAC;IACP,CAAC;IAED,SAAS,kBAAkB;QACvB,IAAI,CAAC;YACD,OAAO,IAAI,YAAY,EAAE,CAAC;QAC9B,CAAC;QACD,MAAM,CAAC;YACH,8BAA8B;YAC9B,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,aAAa,CAAQ,CAAC;YACzD,KAAK,CAAC,eAAe,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;YAC9C,KAAK,CAAC,YAAY,GAAG;gBACjB,IAAI,EAAE,EAA4B;gBAClC,OAAO,CAAC,MAAc,EAAE,IAAY;oBAChC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;gBAC7B,CAAC;gBACD,OAAO,CAAC,MAAc;oBAClB,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAC7B,CAAC;gBACD,SAAS,CAAC,MAAe;oBACrB,IAAI,MAAM,EAAE,CAAC;wBACT,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;oBAC7B,CAAC;yBAAM,CAAC;wBACJ,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;oBACnB,CAAC;gBACL,CAAC;gBACD,YAAY;oBACR,QAAQ;gBACZ,CAAC;gBACD,UAAU,EAAE,MAAoC;gBAChD,aAAa,EAAE,KAAsC;gBACrD,KAAK,EAAE,EAAyB;gBAChC,KAAK,EAAE,EAAqC;gBAC5C,KAAK,EAAE,EAAc;aACxB,CAAC;YACF,OAAO,KAAK,CAAC,YAAY,CAAC;QAC9B,CAAC;IACL,CAAC;IAED,uDAAuD;IACvD,MAAM,YAAY,GAAG,kBAAkB,EAAE,CAAC;IAE1C,+BAA+B;IAC/B,MAAM,CAAC,aAAa,CAAC,eAAe,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjE,+BAA+B;IAC/B,MAAM,CAAC,aAAa,CAAC,eAAe,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjE,0DAA0D;IAC1D,MAAM,aAAa,GAAG,eAAe,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;IAChE,MAAM,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAEpC,0BAA0B;IAC1B,MAAM,CAAC,aAAa,CAAC,eAAe,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAE5D,6BAA6B;IAC7B,MAAM,CAAC,aAAa,CAAC,eAAe,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;AACnE,CAAC;AACD,oBAAoB"}

package/lib/scripts/index.d.ts

@@ -1,3 +1,4 @@
+export * from './dragAndDrop';
 export * from './isVisible';
 export * from './rehydrate';
 //# sourceMappingURL=index.d.ts.map

package/lib/scripts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/scripts/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/scripts/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}

package/lib/scripts/index.js

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./dragAndDrop"), exports);
 __exportStar(require("./isVisible"), exports);
 __exportStar(require("./rehydrate"), exports);
 //# sourceMappingURL=index.js.map

package/lib/scripts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/scripts/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,8CAA4B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/scripts/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serenity-js/web",
-  "version": "3.39.0",
+  "version": "3.40.0",
   "description": "Serenity/JS Screenplay Pattern library offering a flexible, web driver-agnostic approach for interacting with web-based user interfaces and components, suitable for various testing contexts",
   "author": {
     "name": "Jan Molak",
@@ -53,8 +53,8 @@
     "node": "^20 || ^22 || ^24"
   },
   "dependencies": {
-    "@serenity-js/assertions": "3.39.0",
-    "@serenity-js/core": "3.39.0",
+    "@serenity-js/assertions": "3.40.0",
+    "@serenity-js/core": "3.40.0",
     "tiny-types": "1.24.3"
   },
   "devDependencies": {
@@ -67,5 +67,5 @@
     "ts-node": "10.9.2",
     "typescript": "5.9.3"
   },
-  "gitHead": "253c63474dd24f3850a0f34b6d5f42559049a25c"
+  "gitHead": "185b8435cf6e87b8a54f10944da3e652227ecb6e"
 }

package/src/screenplay/interactions/Drag.ts

@@ -0,0 +1,125 @@
+import type { Actor, Answerable } from '@serenity-js/core';
+import { Interaction, the } from '@serenity-js/core';
+
+import type { PageElement } from '../models';
+
+/**
+ * Instructs an [actor](https://serenity-js.org/api/core/class/Actor/) who has the [ability](https://serenity-js.org/api/core/class/Ability/) to [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
+ * to drag a [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) and drop it on another [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+ *
+ * ## Example HTML with draggable element and drop zone
+ *
+ * ```html
+ * <p id="draggable" draggable="true">
+ *   This element is draggable.
+ * </p>
+ * <div id="droppable">
+ *   Drop Zone
+ * </div>
+ *
+ * <script>
+ *   const draggable = document.getElementById('draggable');
+ *   const droppable = document.getElementById('droppable');
+ *
+ *   draggable.addEventListener('dragstart', (event) => {
+ *     event.dataTransfer.setData('text/plain', event.target.id);
+ *     event.dataTransfer.effectAllowed = 'move';
+ *   });
+ *
+ *   droppable.addEventListener('dragover', (event) => {
+ *     event.preventDefault();
+ *   });
+ *
+ *   droppable.addEventListener('drop', (event) => {
+ *     event.preventDefault();
+ *     const id = event.dataTransfer.getData('text/plain');
+ *     event.target.appendChild(document.getElementById(id));
+ *   });
+ * </script>
+ * ```
+ *
+ * ## Page Elements for draggable and drop zone
+ *
+ * ```ts
+ * import { By, PageElement } from '@serenity-js/web';
+ *
+ * const draggable = () =>
+ *   PageElement.located(By.id('draggable')).describedAs('draggable element');
+ *
+ * const dropZone = () =>
+ *   PageElement.located(By.id('droppable')).describedAs('drop zone');
+ * ```
+ *
+ * ## Dragging and dropping the element
+ *
+ * ```ts
+ * import { actorCalled } from '@serenity-js/core'
+ * import { Ensure, isPresent } from '@serenity-js/assertions'
+ * import { Drag, Navigate } from '@serenity-js/web'
+ *
+ * await actorCalled('Doug')
+ *   .attemptsTo(
+ *     Navigate.to('/drag-and-drop-example.html'),
+ *     Drag.the(draggable()).to(dropZone()),
+ *     Ensure.that(draggable().of(dropZone()), isPresent()),
+ *   )
+ * ```
+ *
+ * ## Learn more
+ *
+ * - [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
+ * - [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) on MDN
+ *
+ * @group Activities
+ */
+export class Drag {
+
+    /**
+     * Instructs an [actor](https://serenity-js.org/api/core/class/Actor/) who has the [ability](https://serenity-js.org/api/core/class/Ability/) to [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
+     * to drag a [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) and drop it on another [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+     *
+     * Call [`.to(...)`](https://serenity-js.org/api/web/class/Drag/#to) to specify the destination.
+     *
+     * @param draggable
+     *  The element that will be dragged
+     */
+    static the(draggable: Answerable<PageElement>): Drag {
+        return new Drag(draggable);
+    }
+
+    private constructor(private readonly draggable: Answerable<PageElement>) {
+    }
+
+    /**
+     * Instructs an [actor](https://serenity-js.org/api/core/class/Actor/) who has the [ability](https://serenity-js.org/api/core/class/Ability/) to [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
+     * to drag a [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) and drop it on another [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+     *
+     * @param destination
+     *  The element to drop it on
+     */
+    to(destination: Answerable<PageElement>): Interaction {
+        return new DragAndDrop(this.draggable, destination);
+    }
+}
+
+/**
+ * @package
+ */
+class DragAndDrop extends Interaction {
+    constructor(
+        private readonly draggable: Answerable<PageElement>,
+        private readonly destination: Answerable<PageElement>,
+    ) {
+        super(the`#actor drags ${ draggable } and drops it on ${ destination }`);
+    }
+
+    /**
+     * @inheritDoc
+     */
+    async performAs(actor: Actor): Promise<void> {
+        const draggable = await actor.answer(this.draggable);
+        const destination = await actor.answer(this.destination);
+
+        await draggable.dragTo(destination);
+    }
+}

package/src/screenplay/interactions/index.ts

@@ -1,6 +1,7 @@
 export * from './Clear';
 export * from './Click';
 export * from './DoubleClick';
+export * from './Drag';
 export * from './Enter';
 export * from './ExecuteScript';
 export * from './Hover';

package/src/screenplay/models/PageElement.ts

@@ -167,6 +167,14 @@ export abstract class PageElement<Native_Element_Type = any> implements Optional
     abstract selectOptions(...options: Array<SelectOption>): Promise<void>;
     abstract selectedOptions(): Promise<Array<SelectOption>>;
 
+    /**
+     * Drags this element and drops it on the `destination` element.
+     *
+     * @param destination
+     *  The element to drop this element on
+     */
+    abstract dragTo(destination: PageElement<Native_Element_Type>): Promise<void>;
+
     abstract attribute(name: string): Promise<string>;
     abstract text(): Promise<string>;
     abstract value(): Promise<string>;

package/src/scripts/dragAndDrop.ts

@@ -0,0 +1,79 @@
+
+/* c8 ignore start */
+/**
+ * Simulates HTML5 drag and drop events.
+ *
+ * This script is a workaround for Selenium WebDriver's inability to properly
+ * trigger HTML5 drag events using the Actions API. It manually dispatches
+ * the required drag events (dragstart, dragenter, dragover, drop, dragend)
+ * to simulate a complete drag and drop operation.
+ *
+ * @param source - The element to drag
+ * @param target - The element to drop onto
+ */
+export function dragAndDrop(source: HTMLElement, target: HTMLElement): void {
+
+    function createDragEvent(type: string, dataTransfer: DataTransfer): DragEvent {
+        return new DragEvent(type, {
+            bubbles: true,
+            cancelable: true,
+            dataTransfer,
+        });
+    }
+
+    function createDataTransfer(): DataTransfer {
+        try {
+            return new DataTransfer();
+        }
+        catch {
+            // Fallback for older browsers
+            const event = document.createEvent('CustomEvent') as any;
+            event.initCustomEvent('', false, false, null);
+            event.dataTransfer = {
+                data: {} as Record<string, string>,
+                setData(format: string, data: string) {
+                    this.data[format] = data;
+                },
+                getData(format: string) {
+                    return this.data[format];
+                },
+                clearData(format?: string) {
+                    if (format) {
+                        delete this.data[format];
+                    } else {
+                        this.data = {};
+                    }
+                },
+                setDragImage() {
+                    // no-op
+                },
+                dropEffect: 'none' as DataTransfer['dropEffect'],
+                effectAllowed: 'all' as DataTransfer['effectAllowed'],
+                files: [] as unknown as FileList,
+                items: [] as unknown as DataTransferItemList,
+                types: [] as string[],
+            };
+            return event.dataTransfer;
+        }
+    }
+
+    // Create a DataTransfer object to share between events
+    const dataTransfer = createDataTransfer();
+
+    // Dispatch dragstart on source
+    source.dispatchEvent(createDragEvent('dragstart', dataTransfer));
+
+    // Dispatch dragenter on target
+    target.dispatchEvent(createDragEvent('dragenter', dataTransfer));
+
+    // Dispatch dragover on target (required for drop to work)
+    const dragOverEvent = createDragEvent('dragover', dataTransfer);
+    target.dispatchEvent(dragOverEvent);
+
+    // Dispatch drop on target
+    target.dispatchEvent(createDragEvent('drop', dataTransfer));
+
+    // Dispatch dragend on source
+    source.dispatchEvent(createDragEvent('dragend', dataTransfer));
+}
+/* c8 ignore stop */

package/src/scripts/index.ts

@@ -1,2 +1,3 @@
+export * from './dragAndDrop';
 export * from './isVisible';
 export * from './rehydrate';