More than 5 years have passed since last update.

Puppeteerで困っていること

Last updated at 2018-03-29Posted at 2018-03-29

はじめに

別記事でテストツール比較としてPuppeteerとSeleniumの比較を行いました。
（Puppeteerはテストツールではないけど）
その中でPuppeteerの操作を思ったように実装できなかったので書き溜めておきます。

実装できなかった動き

フロントエンド・テストツール比較 Puppeteer #02テスト編
この記事で実装できなかったブラウザの動きは以下の三点

アサーションについてはpuppetterの機能ではできないので省略。nodeのパッケージを別途用意してください。（Seleniumのようなテストツールじゃないので仕方なしか？）

ドラッグ＆ドロップについては、puppetterのAPIであるmouse.up()の不具合（？）により実装不可。
ブラウザバックについては、page.goBack()が用意されているがこれを実装するとブラウザバックはしてくれるが、その後puppeteerが終了しなくなる。

(1については触れないでおきます。)

どのように実装しようとしたか

ドラッグ＆ドロップについて

この画面のリスト部分には、それぞれIDをlist_label1,list_label2,list_label3とふってあります。

script.js

(async () => {
    const browser = await puppeteer.launch({
        args: [
            '--no-sandbox',
            '--disable-setuid-sandbox'
        ]
    });

    // 新規ページを開く
    const page = await browser.newPage();

		(省略)

    const list3 = await page.$('#list_label3');
    const rect3 = await list3.boundingBox();

    const list1 = await page.$('#list_label1');
    const rect1 = await list1.boundingBox();

    await page.mouse.move(rect3.x + rect3.width / 2, rect3.y + rect1.height / 2);
    await page.mouse.down();
    await page.mouse.move(rect1.x + rect1.width / 2, rect1.y + rect1.height / 2);
    await page.mouse.up();

    await page.screenshot({path: 'image/sample.png'});

	// ブラウザを閉じる
    browser.close();
})();

上の処理では、一番上にある要素#list_label3を一番下に移動させようとして書いたものです。
実行し、スクリーンショットを確認してもリストの要素の入れ替えは行われていません。

await page.mouse.up();

この処理がうまく動作していないのが原因だと思っているが、どうなんだろう。
処理自体にエラーはなく、nodeも正常に終了しています。
しかし私の環境ではテスト終了後、エディタにカーソルをもっていくと常に何かをドラッグしている挙動が発生します。
OSに影響（？）がでてちょっと大変。どうすればいいんだろう。

おそらくこれが関係ある？
関連issue

ブラウザバックについて

await page.goBack();

任意のページへ遷移した後、上記の処理で元の画面に戻ろうと上記の処理を実装した。
ヘッドレスモードをオフにして画面を確認してみると、戻ってはいる。
しかしその後の処理が続行されず、タイムアウトでnodeが落ちます。
以下がエラー

(node:26682) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Navigation Timeout Exceeded: 30000ms exceeded
(node:26682) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

これ is 何。よくわからない。
とりあえずこれが課題なんだろうか？？関連issue