[BUG] Headless webkit unable to handle custom `dataTransfer` type in the `drop` event in Linux

[kevin940726]

Context:

• Playwright Version: 1.27.0
• Operating System: Linux
• Node.js version: 18.8.0
• Browser: WebKit

Code Snippet

const { webkit, expect } = require('@playwright/test');

(async () => {
  const browser = await webkit.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.setContent(`
    <button draggable="true">Draggable</button>
  `);

  const resultPromise = page.evaluate(
    () =>
      new Promise((resolve) => {
        document.addEventListener('dragstart', (event) => {
          event.dataTransfer!.setData('custom-type', 'Hello World');
        }, false);

        document.addEventListener('dragenter', (event) => {
          event.preventDefault();
        }, false);
        document.addEventListener('dragover', (event) => {
          event.preventDefault();
        }, false);

        document.addEventListener('drop', (event) => {
          event.preventDefault();
          resolve({
            types: event.dataTransfer!.types,
            data: event.dataTransfer!.getData('custom-type'),
          });
        }, false);
      })
  );

  await page.hover('[draggable="true"]');
  await page.mouse.down();
  await page.mouse.move(100, 100);
  await page.mouse.up();

  await expect(resultPromise).resolves.toEqual({
    types: ['custom-type'],
    data: 'Hello World',
  });  
})();

Describe the bug

Headless WebKit cannot handle custom dataTransfer types in the drop event in Linux. Setting data types other than the defaults such as text/plain or text/html has no effect.

I've put up a reproduction repo and github actions so that it's easier to see the issue.

In the example run you can see that it's happening on Linux and Windows server, while Linux just returns an empty list of types, and Windows server returns the default types.

There's a workaround though, if the test is run in headed mode then the issue disappears. I'm currently using xvfb-run to workaround this issue on CI.

I have no idea if this is a browser bug or a Playwright one? Either way, it's probably worth noting in the docs somewhere though.

c.c. @dgozman since it's another drag-and-drop related issue 😅 .

[erikroe]

I have just run into the very same issue. Been searching for hours where the problem comes from but eventually I could find no such bug reports or anything else of recent times about this. So I also must suspect it is a Playwright issue. Unfortunately I have also no means to test it on an actual Webkit based program or different test runner to verify my suspicion.