Best AI Assistant for Writing Playwright Tests

Writing Playwright tests for drag and drop interactions presents unique challenges that differ from standard UI testing. Drag and drop involves precise mouse event sequences, element positioning, and timing considerations that require specific approaches. This article evaluates which AI assistants excel at generating, maintainable drag and drop test code.

Understanding Drag and Drop Testing Requirements

Drag and drop tests must simulate multiple mouse events in the correct sequence. Unlike simple click tests, drag operations require coordinating mousedown, mousemove, and mouseup events while maintaining proper element positioning. The complexity increases when testing across different browsers, as each handles drag operations slightly differently.

Playwright provides several methods for drag and drop testing. The most common approach uses the page.dragAndDrop() method, but more complex scenarios require manual event simulation using keyboard and mouse actions. AI assistants that understand these nuances can generate more reliable test code.

What Makes an AI Assistant Effective for This Niche

An effective AI assistant for drag and drop test generation must understand the specific challenges of mouse event sequencing. It should recognize when to use built-in methods versus manual event simulation. The assistant needs familiarity with Playwright’s locator strategies, particularly for dynamic elements that change position during drag operations.

The best assistants also account for test reliability concerns like waiting for animations to complete, handling element visibility changes during drag, and managing the asynchronous nature of drag operations in modern web applications.

Real-World Drag and Drop Scenarios

Different drag scenarios require different testing approaches:

Scenario 1: Kanban Board Column Reordering

Testing moving cards between columns in a Kanban board:

test('move card between kanban columns', async ({ page }) => {
  await page.goto('/kanban');

  const sourceCard = page.locator('[data-testid="card-1"]');
  const targetColumn = page.locator('[data-testid="column-done"]');

  // Wait for animations to finish before dragging
  await page.waitForLoadState('networkidle');

  // Get column center coordinates
  const columnBox = await targetColumn.boundingBox();
  const targetX = columnBox.x + columnBox.width / 2;
  const targetY = columnBox.y + columnBox.height / 2;

  // Perform drag with realistic timing
  await sourceCard.dragTo(targetColumn, {
    sourcePosition: { x: 50, y: 25 },
    targetPosition: { x: 50, y: 25 }
  });

  // Verify card moved
  await expect(targetColumn.locator('[data-testid="card-1"]')).toBeVisible();
  await expect(page.locator('[data-testid="column-todo"]').locator('[data-testid="card-1"]')).not.toBeVisible();
});

Scenario 2: Draggable Table Rows

Testing row reordering in a data table:

test('reorder table rows by dragging', async ({ page }) => {
  await page.goto('/data-table');

  const row1 = page.locator('tbody tr').nth(0);
  const row2 = page.locator('tbody tr').nth(1);

  // Get initial row content
  const initialFirstRow = await row1.textContent();
  const initialSecondRow = await row2.textContent();

  // Drag row 1 below row 2
  const row1Box = await row1.boundingBox();
  const row2Box = await row2.boundingBox();

  await page.mouse.move(row1Box.x + row1Box.width / 2, row1Box.y + row1Box.height / 2);
  await page.mouse.down();
  await page.mouse.move(row2Box.x + row2Box.width / 2, row2Box.y + row2Box.height + 20);
  await page.mouse.up();

  // Wait for reordering animation
  await page.waitForTimeout(500);

  // Verify rows swapped
  const newFirstRow = await page.locator('tbody tr').nth(0).textContent();
  expect(newFirstRow).toBe(initialSecondRow);
});

Scenario 3: jQuery UI Sortable Lists

Testing with jQuery UI which uses different event model:

test('reorder items in jQuery UI sortable', async ({ page }) => {
  await page.goto('/jquery-sortable');

  const sourceItem = page.locator('#sortable li').nth(2);
  const targetItem = page.locator('#sortable li').nth(0);

  // jQuery requires multiple events to recognize drag
  await sourceItem.hover();
  await page.mouse.move(0, 0); // Reset position

  const sourceBox = await sourceItem.boundingBox();
  const targetBox = await targetItem.boundingBox();

  // Simulate full drag sequence
  await page.mouse.move(sourceBox.x + 20, sourceBox.y + 20);
  await page.mouse.down();

  // Move in steps to trigger hover effects
  for (let i = 0; i < 5; i++) {
    await page.mouse.move(
      sourceBox.x + 20,
      sourceBox.y + 20 - (i * 10)
    );
    await page.waitForTimeout(50);
  }

  await page.mouse.move(targetBox.x + 20, targetBox.y + 10);
  await page.mouse.up();

  // Verify reordering with explicit wait
  await expect(page.locator('#sortable li').nth(0)).toContainText(sourceItem);
});

Practical Examples

Consider a typical drag and drop scenario: reordering items in a sortable list. Here is how different AI assistants approach generating this test.

When prompted to create a test for dragging a list item to a new position, a capable AI assistant should generate code similar to this:

import { test, expect } from '@playwright/test';

test('drag list item to new position', async ({ page }) => {
  await page.goto('/sortable-list');

  const sourceItem = page.locator('.list-item').first();
  const targetItem = page.locator('.list-item').nth(3);

  // Get bounding boxes for precise dragging
  const sourceBox = await sourceItem.boundingBox();
  const targetBox = await targetItem.boundingBox();

  // Calculate center points
  const startX = sourceBox.x + sourceBox.width / 2;
  const startY = sourceBox.y + sourceBox.height / 2;
  const endX = targetBox.x + targetBox.width / 2;
  const endY = targetBox.y + targetBox.height / 2;

  await page.mouse.move(startX, startY);
  await page.mouse.down();
  await page.mouse.move(endX, endY, { steps: 10 });
  await page.mouse.up();

  // Verify the reorder occurred
  await expect(page.locator('.list-item').first()).not.toHaveText('Item 1');
});

The assistant that generates this code recognizes several important factors. It uses boundingBox() to get precise coordinates rather than relying on approximate positions. It includes a steps parameter in the mouse.move() call to simulate realistic mouse travel. It also adds verification assertions to confirm the drag operation succeeded.

Evaluating AI Assistants for This Use Case

When evaluating AI assistants for drag and drop test generation, consider their handling of edge cases. Effective assistants recognize scenarios requiring special treatment, such as dragging between iframes, handling touch events for mobile testing, and managing drag operations on elements with complex CSS transforms.

An assistant that provides value should also suggest appropriate waiting strategies. Drag operations frequently trigger animations or DOM changes, and tests that do not account for these transitions tend to be flaky. Look for assistants that incorporate explicit waits or Playwright’s auto-waiting features.

Code Quality Factors

The quality of generated drag and drop tests depends on several factors. First, the assistant should use proper locator strategies that remain stable even when other elements are added or removed. Second, the generated code should handle the asynchronous nature of drag operations appropriately. Third, the tests should include meaningful assertions beyond simple presence checks.

Good assistants also provide context about why certain approaches are chosen. When generating drag and drop tests, they should explain the reasoning behind using manual mouse events versus built-in methods, or why certain waiting strategies are necessary for specific scenarios.

Common Pitfalls to Avoid

Several common mistakes appear in AI-generated drag and drop tests. One frequent issue is using hardcoded coordinates without accounting for different screen sizes or responsive layouts. Another is failing to wait for animations to complete before making assertions. A third problem is using fragile locators that break when the UI changes slightly.

The best AI assistants avoid these pitfalls by generating tests that use relative positioning when possible, include appropriate waits, and use stable locator strategies. They also provide options for handling different viewport sizes and suggest ways to make tests more resilient to UI changes.

Best Practices Recommended by Top AI Assistants

Use Page Object Model for Maintainability

// DragAndDropPage.js - Page Object Model
class DragAndDropPage {
  constructor(page) {
    this.page = page;
    this.sourceLocator = '[data-testid="source-item"]';
    this.targetLocator = '[data-testid="target-zone"]';
  }

  async dragItem(sourceIndex, targetIndex) {
    const source = this.page.locator(this.sourceLocator).nth(sourceIndex);
    const target = this.page.locator(this.targetLocator).nth(targetIndex);

    // Wait for elements to be ready
    await source.waitFor({ state: 'visible' });
    await target.waitFor({ state: 'visible' });

    // Perform drag operation
    await source.dragTo(target);

    // Wait for animations
    await this.page.waitForTimeout(300);
  }

  async verifyOrder(expectedOrder) {
    const items = await this.page.locator(this.sourceLocator).count();
    for (let i = 0; i < items; i++) {
      const text = await this.page.locator(this.sourceLocator).nth(i).textContent();
      expect(text).toContain(expectedOrder[i]);
    }
  }
}

// test.spec.js - Using Page Object
test('using page object model', async ({ page }) => {
  const dragPage = new DragAndDropPage(page);
  await page.goto('/drag-drop-list');
  await dragPage.dragItem(0, 2);
  await dragPage.verifyOrder(['Item 2', 'Item 3', 'Item 1']);
});

Handling Animation-Heavy Interfaces

test('drag with animation handling', async ({ page }) => {
  // Set reduced motion for more reliable testing
  await page.emulateMedia({ reducedMotion: 'reduce' });

  const source = page.locator('[data-draggable]').first();
  const target = page.locator('[data-drop-zone]').first();

  // Wait for any initial animations
  await page.waitForFunction(() => {
    const ele = document.querySelector('[data-dragging="false"]');
    return ele !== null;
  });

  // Perform drag
  await source.dragTo(target);

  // Wait for drop animation with custom timeout
  await target.waitFor({ state: 'visible' });
  await page.waitForFunction(
    () => !document.querySelector('[class*="dragging"]'),
    { timeout: 5000 }
  );
});

AI Assistant Performance Comparison

Assistant	Drag Test Generation	Code Quality	Documentation	Best For
Claude 3.5 Sonnet	9/10	9/10	Excellent	Complete test suites
ChatGPT 4o	8/10	8/10	Good	Basic scenarios
Cursor AI	9/10	9/10	Very Good	IDE integration
GitHub Copilot	7/10	7/10	Minimal	Quick suggestions
Windsurf	8/10	8/10	Good	Multi-file awareness

Recommendations

For developers working with drag and drop testing in Playwright, several approaches improve results when working with AI assistants. Provide specific context about the application being tested, including what frameworks are used and how drag operations are implemented. Request explanations of the generated code to understand why certain approaches are chosen. Always review and test the generated code in the actual application environment.

The most effective workflow involves using AI assistants as a starting point rather than final code. Generate initial test structures, then refine them based on the specific requirements of the application and the team’s testing standards.

Built by theluckystrike — More at zovo.one