I am using Playwright and trying to drag & drop the list at this site into the right order. These locators work as expected, and the drag & drop does work every so often. I have tried dragTo(), a combination of mouse up, down, and hover, and a lot of different selectors.

Nothing works consistently.

// launch browser and open a new page
const { context } = await launch();
const page = await context.newPage();

// go to sortable list site
await page.goto('/apps/sortable-list/');

// order list
const correctOrder = [
  'Jeff Bezos',
  'Bill Gates',
  'Warren Buffett',
  'Bernard Arnault',
  'Carlos Slim Helu',
  'Amancio Ortega',
  'Larry Ellison',
  'Mark Zuckerberg',
  'Michael Bloomberg',
  'Larry Page'
];

async function swapItemToIndex(textIndex, listIndex) {
  const correctItem = `div.draggable:has-text('${correctOrder[textIndex]}')`;
  const targetItem = `li[data-index="${listIndex}"]`;
  await page.dragAndDrop(correctItem, targetItem);
}

await swapItemToIndex(0, 0);
await swapItemToIndex(1, 1);

// the elements are not ordered as expected

I am using Playwright and trying to drag & drop the list at this site into the right order. These locators work as expected, and the drag & drop does work every so often. I have tried dragTo(), a combination of mouse up, down, and hover, and a lot of different selectors.

Nothing works consistently.

// launch browser and open a new page
const { context } = await launch();
const page = await context.newPage();

// go to sortable list site
await page.goto('https://qaplayground.dev/apps/sortable-list/');

// order list
const correctOrder = [
  'Jeff Bezos',
  'Bill Gates',
  'Warren Buffett',
  'Bernard Arnault',
  'Carlos Slim Helu',
  'Amancio Ortega',
  'Larry Ellison',
  'Mark Zuckerberg',
  'Michael Bloomberg',
  'Larry Page'
];

async function swapItemToIndex(textIndex, listIndex) {
  const correctItem = `div.draggable:has-text('${correctOrder[textIndex]}')`;
  const targetItem = `li[data-index="${listIndex}"]`;
  await page.dragAndDrop(correctItem, targetItem);
}

await swapItemToIndex(0, 0);
await swapItemToIndex(1, 1);

// the elements are not ordered as expected

• javascript
• drag-and-drop
• playwright

• How can you tell it's not working? Are you making any assertions? Are you clicking "Check order"? – Mike G Commented Apr 1 at 2:14
• @MikeG Yes, I am clicking 'Check order'. Aside from that, the first two should be 'Jeff Bezos' and 'Bill Gates' after this code is run, and they are not. I chose to omit the assertions. – Ashton Pulliam Commented Apr 1 at 2:26
• The reason I asked, assertions are essential for the code to get to the point you want it to. How does the test know you are done if all you have are a couple of actions? – Mike G Commented Apr 1 at 2:40
• @MikeG Good question. I am coding on a specific platform that is handling things like that. I am able to run line by line and see when a line has/hasn't finished. I can also see the result in the web page. The code does run successfully. – Ashton Pulliam Commented Apr 1 at 2:48
• 1 Yep, that's probably a mistake. – Mike G Commented Apr 1 at 2:59

1 Answer 1

There is a solution linked to the test, click View Test Suite (has a Playwright icon on the left).

The sample solution indicates that the main issue is that some items are not visible when the drag-drop action is taken, and it uses nested loops and calculates distances, etc.

I think it can be simplified by setting the viewport big enough to see all the elements.

This is my version of the test using your fixture array and function

test.use({
  viewport: { width: 1600, height: 1200 },
})

test.describe("Sortable List", () => {
  test("Should reorder the list to match the correct order", async ({ page }) => {
    await page.goto('https://qaplayground.dev/apps/sortable-list/');

    const correctOrder = [
      'Jeff Bezos',
      // ...truncated here for readability
    ];

    async function swapItemToIndex(text, index) {
      const currentItem = `div.draggable :has-text("${text}")`;
      const targetItem = `li[data-index="${index}"]`;
      await page.dragAndDrop(currentItem, targetItem);
      // confirm the step
      await expect(page.locator('li').nth(index)).toContainText(text)
    }

    for (const [index, name] of correctOrder.entries()) {
      await swapItemToIndex(name, index)
    }

    // confirm the list is all green
    await page.locator("#check").click(); 
    for (const li of await page.locator(".person-name").all())
      await expect(li).toHaveCSS("color", "rgb(58, 227, 116)");
    }
  });
});