Puppeteerでドラッグ&ドロップ

はじめに

最近、フロントテストにPuppeteerというライブラリを用いているのですが、ドラッグ・ドロップの動作においてかなり苦戦をしたので、これ以上犠牲者を増やさないために（）、ここに解決策を共有したいと思います。

Puppeteerでドラッグ&ドロップができない！

「Puppeteer drag drop」というように検索をかけると、大体下記のようなコードが出てきます。

    await page.mouse.move(x1, y1);
    await page.mouse.down();
    await page.mouse.move(x2, y2);
    await page.mouse.up();

座標(x1, y1)にカーソルを合わせ、掴む→(x2, y2)に移動し離すという意味のコードです。

しかしこれ...

動作しません!!!!!

正確に言うと、一瞬だけ対象物が動くんですけど、(x2, y2)まで移動してくれないんですよね...
調べてみると、このことに関して困っている方が、国内外問わず結構いました。

await page.mouse.up();
この処理がうまく動作していないのが原因だと思っているが、どうなんだろう。
処理自体にエラーはなく、nodeも正常に終了しています。
しかし私の環境ではテスト終了後、エディタにカーソルをもっていくと常に何かをドラッグしている挙動が発生します。

(Puppeteerで困っていることより引用)

解決策

解決策は、「mouse.moveにoptionsとしてstepsを適切に設定してあげる」です。
公式ドキュメントには

steps <number> defaults to 1. Sends intermediate mousemove events.

と書かれています。
今回はこのstepsを20と設定します。
すなわち、先ほどのコードを

    await page.mouse.move(x1, y1);
    await page.mouse.down();
    await page.mouse.move(x2, y2,{steps: 20});//ここにoptionsとして{steps: 20}を追加した。
    await page.mouse.up();

のように書き換えると、期待通り動作します。

参考

・上記に引用として示したもの
・How to simulate Drag-Drop action in pupeteer