externalDrag

Instructs an actor who has the ability to BrowseTheWeb to drag a PageElement and drop it on another PageElement.

Example HTML with draggable element and drop zone

<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

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

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
• HTML Drag and Drop API on MDN

Index

Methods

• the
• to

Methods

staticexternalthe

• the(draggable: Answerable<PageElement<any>>): Drag

• Instructs an actor who has the ability to BrowseTheWeb to drag a PageElement and drop it on another PageElement.

  Call .to(...) to specify the destination.

  ---

  Parameters

  • externaldraggable: Answerable<PageElement<any>>

    The element that will be dragged

  Returns Drag

externalto

• to(destination: Answerable<PageElement<any>>): Interaction

• Instructs an actor who has the ability to BrowseTheWeb to drag a PageElement and drop it on another PageElement.

  ---

  Parameters

  • externaldestination: Answerable<PageElement<any>>

    The element to drop it on

  Returns Interaction