【Puppeteer実用講座】Puppeteer操作だけでreCAPTCHA v2は突破したときの話〜マウスクリック編

            
            import puppeteer from 'puppeteer';
const browser: puppeteer.Browser = await puppeteer.launch({headless: true});
const page: puppeteer.Page = await browser.newPage();

try {
    //👇reCAPTCHA式のログインページに移動
    await page.goto('https://某D●M証券/login');

    //👇ユーザー名＆パスワードを打ち込む先のフォーム要素
    const form = await page.$("form.c-form");
    if (form) {
        //👇各inputにユーザー名とパスワードを入力
        const user = await form.$("input[name='email']");
        await user?.type('ユーザーID・Email');
        const password = await form.$("input[name='password']");
        await password?.type('パスワード');
        await page.waitForTimeout(500);

        //👇reCAPTCHAのiframeをラップしている親要素を選択
        const targetElementSelector = "div.g-recaptcha";
        await page.waitForSelector(targetElementSelector);

        //👇先程の親要素のHTMLページ中の座標系情報を取得
        const recaptchaPosition = await page.evaluate((selector) => {
            const el = document.querySelector(selector);
            const rect = el.getBoundingClientRect();
            return {
                height: rect.height,
                width: rect.width,
                x: rect.left,
                y: rect.top
            };
        }, targetElementSelector);

        //👇先程取得した座標からiframeが描画されている分少しずらした位置でマウスクリック!
        const margin = 3;
        if (recaptchaPosition) {
            await page.mouse.move(recaptchaPosition.x + margin, recaptchaPosition.y + margin, { steps: 1 });
            await page.mouse.click(recaptchaPosition.x + margin, recaptchaPosition.y + margin);
            await page.waitForTimeout(1000);
        }

        //👇入力操作が終わったらフォーム送信
        const submit = await form.$("button[type='submit']");
        submit?.focus();
        submit?.click();
    }
}
catch (error) { console.log(error); }
finally { browser.close(); }