Puppeteer headless:falseの時にマウスカーソルの位置を表示する

こんにちは。レモンティーです。

今回はpuppeteerでheadless:falseの時にマウスカーソルの位置を表示させます。
内容はまんまこれです
github.com

page.mouse.move()とか使ったときにちゃんと思った通りになっているのか確かめたくてもデフォルトだとマウスカーソルは表示されません。そこでリンク先のコードを使うと便利です。

リンク先は即時関数になっているのでちょっと本来の使い方と違うのかもしれませんが

index.js

function mouseHelper(){
    const box = document.createElement('div');
   ...
}

としておいて、puppeteerでカーソルを出したいページで

await page.evaluate(mouseHelper);

とすると以降マウスの位置にDevToolと同じ半透明な黒っぽい丸が表示されます。

モジュールにするなら

mousehelper.js

module.exports = () => {
    const box = document.createElement('div');
    ...
}

index.js

const puppeteer = require('puppeteer');
const mouseHelper = require('./mousehelper');

(async () => {
    const browser = await puppeteer.launch({
        headless:false
    });
    const page = await browser.newPage();
    const url = "https://github.com/GoogleChrome/puppeteer/blob/master/test/assets/input/mouse-helper.js";
    await page.goto(url,{waitUntil:'domcontentloaded'});
    await page.evaluate(mouseHelper);
    await page.waitFor(2000);
    for(let i=0; i<4; i++){
      await page.mouse.move(300,100,{steps:30});
      await page.mouse.move(500,200,{steps:30});
      await page.mouse.move(500,400,{steps:30});
      await page.mouse.move(300,500,{steps:30});
      await page.mouse.move(100,400,{steps:30});
      await page.mouse.move(100,200,{steps:30});
    }
    await page.waitFor(2000);
    await browser.close();
})();

とかでしょうか

今回はこれでおしまいです。
www.sawalemontea.com