---
title: "Drag and Drop Test Example"
sidebarTitle: "Drag and Drop"
description: "Example test demonstrating drag and drop interactions using mouseDown and mouseUp."
icon: "arrows-up-down-left-right"
mode: "wide"
---

## Demo Test Run

Watch this test execute in a real sandbox environment:

{/* drag-and-drop.test.mjs output */}
<iframe 
  src="https://api-test.testdriver.ai/api/v1/testdriver/testcase/69a62b42fc0ac3cc632a918b/replay" 
  width="100%" 
  height="390" 
  style={{ border: "1px solid #333", borderRadius: "8px" }}
  allow="fullscreen"
/>

## Source Code

```javascript title="drag-and-drop.test.mjs" {33-34,38-39}
/**
 * TestDriver SDK - Drag and Drop Test
 */

import { describe, expect, it } from "vitest";
import { TestDriver } from "testdriverai/vitest/hooks";

const isLinux = (process.env.TD_OS || "linux") === "linux";

describe("Drag and Drop Test", () => {
  it.skipIf(isLinux)(
    'should drag "New Text Document" to "Recycle Bin"',
    async (context) => {
      const testdriver = TestDriver(context, { ip: context.ip || process.env.TD_IP, headless: true });
      await testdriver.provision.chrome({ url: 'http://testdriver-sandbox.vercel.app/login' });

      //
      // Show the desktop
      await testdriver.pressKeys(["win", "d"]);

      // Open the context menu
      await testdriver.pressKeys(["shift", "f10"]);

      // Hover over "New" in the context menu
      const newOption = await testdriver.find(
        "New, new option in the open context menu on the desktop",
      );
      await newOption.hover();

      // Click "Text Document" in the context menu
      const textDocOption = await testdriver.find(
        "Text Document, text document option in the new submenu of the desktop context menu",
      );
      await textDocOption.click();

      // Unfocus the "Text Document" text field
      await testdriver.pressKeys(["esc"]);

      // Drag the "New Text Document" icon to the "Recycle Bin"
      const textDoc = await testdriver.find(
        "New Text Document, new text document icon in the center of the desktop",
      );
      await textDoc.mouseDown();

      const recycleBin = await testdriver.find(
        "Recycle Bin, recycle bin icon in the top left corner of the desktop",
      );
      await recycleBin.mouseUp();

      // Assert "New Text Document" icon is not on the Desktop
      const result = await testdriver.assert(
        'the "New Text Document" icon is not visible on the Desktop',
      );
      expect(result).toBeTruthy();
    },
  );
});
```

## Running This Example

```bash
# Clone the TestDriver repository
git clone https://github.com/testdriverai/testdriverai

# Install dependencies
cd testdriverai
npm install

# Run this specific example
npx vitest run examples/drag-and-drop.test.mjs
```

<Note>
  Make sure you have `TD_API_KEY` set in your environment. Get one at [testdriver.ai](https://testdriver.ai).
</Note>