Drag and drop

Here's a sample TestCafe test script that demonstrates working with drag and drop actions:

import { Selector } from 'testcafe';

fixture('Drag and Drop Test')
    .page('https://www.example.com');

test('Perform Drag and Drop', async t => {
    // Selectors for draggable and droppable elements
    const draggableElement = Selector('#draggable');
    const droppableElement = Selector('#droppable');

    // Get initial positions of draggable and droppable elements
    const draggableStartX = await draggableElement.getBoundingClientRectProperty('left');
    const draggableStartY = await draggableElement.getBoundingClientRectProperty('top');
    const droppableStartX = await droppableElement.getBoundingClientRectProperty('left');
    const droppableStartY = await droppableElement.getBoundingClientRectProperty('top');

    // Perform drag and drop action
    await t
        .dragToElement(draggableElement, droppableElement);

    // Get final positions of draggable and droppable elements after drag and drop
    const draggableEndX = await draggableElement.getBoundingClientRectProperty('left');
    const draggableEndY = await draggableElement.getBoundingClientRectProperty('top');
    const droppableEndX = await droppableElement.getBoundingClientRectProperty('left');
    const droppableEndY = await droppableElement.getBoundingClientRectProperty('top');

    // Assertion to check if the draggable element has been dropped onto the droppable element
    await t.expect(draggableEndX).eql(droppableEndX).expect(draggableEndY).eql(droppableEndY);
});

In this test:

• We import the Selector function from TestCafe to select elements on the web page.
• We define a fixture named 'Drag and Drop Test' and set the page to 'https://www.example.com'.
• Inside the test function, we define selectors for the draggable and droppable elements on the page (replace '#draggable' and '#droppable' with appropriate selectors for your web page).
• We use TestCafe's dragToElement action to perform the drag and drop action from the draggable element to the droppable element.
• We then retrieve the positions of the draggable and droppable elements before and after the drag and drop action using getBoundingClientRectProperty.
• Finally, we use TestCafe's expect function to assert that the final positions of the draggable and droppable elements are the same, indicating that the drag and drop action was successful.

Make sure to replace 'https://www.example.com' with the URL of the website you want to test, and adjust the selectors accordingly based on the structure of the webpage you are testing.