One IT Thing

IT業界を楽しむ為の学習系雑記

プチハマリ解決日記

PuppeteerでGoogle検索すると「UnhandledPromiseRejectionWarning: Error: Node is either not visible or not an HTMLElement」

投稿日:2019年7月20日 更新日:

Puppeteerを新規インストールしてGoogle検索すると大概失敗、稀に成功します。

公式サンプルのGoogle Developers検索は動くのにGoogle検索は何でしっかり動かんの?となりました。

原因はGoogle検索画面のデザインでした。

事象

puppeteerを新規にnpmインストール。

C:\src\js\puppeteer-smpl>npm install puppeteer

> puppeteer@1.18.1 install C:\src\js\puppeteer-smpl\node_modules\puppeteer
> node install.js

Downloading Chromium r672088 - 141 Mb [====================] 100% 0.0s
Chromium downloaded to C:\src\js\puppeteer-smpl\node_modules\puppeteer\.local-chromium\win64-672088
npm notice created a lockfile as package-lock.json. You should commit this file.

+ puppeteer@1.18.1
added 43 packages from 22 contributors and audited 50 packages in 29.133s
found 0 vulnerabilities

動作確認の為にGoogle検索する以下のコードを実行すると「Google 検索」ボタンを押す行でエラーが発生。

const puppeteer = require("puppeteer");

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: { width: 1024, height: 1024 }
    });
    const page = await browser.newPage();

    await page.goto("https://www.google.co.jp/");
    await page.type('input[title="検索"]', "ほげ");
    await page.click('input[value^="Google"]');

    await page.waitForNavigation();
    const title = await page.title();
    console.log(title);

    await browser.close();
})();

発生したエラー。

C:\src\js\puppeteer-smpl>node index.js
(node:23092) UnhandledPromiseRejectionWarning: Error: Node is either not visible or not an HTMLElement
    at ElementHandle._clickablePoint (C:\src\js\puppeteer-smpl\node_modules\puppeteer\lib\JSHandle.js:199:13)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at ElementHandle.<anonymous> (C:\src\js\puppeteer-smpl\node_modules\puppeteer\lib\helper.js:111:15)
    at DOMWorld.click (C:\src\js\puppeteer-smpl\node_modules\puppeteer\lib\DOMWorld.js:367:18)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at Frame.<anonymous> (C:\src\js\puppeteer-smpl\node_modules\puppeteer\lib\helper.js:111:15)
    at Page.click (C:\src\js\puppeteer-smpl\node_modules\puppeteer\lib\Page.js:986:29)
    at C:\src\js\puppeteer-smpl\index.js:12:16
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:23092) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:23092) [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.

原因

検索窓に文字を打つと「Google 検索」ボタンがページ本体から候補ウィンドウへ移動する。

この間隙を縫ってpuppeteerがアクセスしてしまい、エレメントが見つからない状態になる。

この為まれに検索ボタンが押せるが大抵のケースで失敗する。

対処

検索窓にキーワードを打つ際、delayを入れてあげることで候補ウィンドウに「Google 検索」ボタンエレメントが移動するのを待ってば良い。

    await page.type('input[title="検索"]', "ほげ", { delay: 100 });

その他の対処法

ボタン押下をevaluateで囲む。
https://github.com/GoogleChrome/puppeteer/issues/2977

    // await page.click('input[value^="Google"]');
    await page.evaluate(() => {
        document.querySelector('input[value^="Google"]').click();
    });

-プチハマリ解決日記
-, ,

執筆者:

関連記事

adb devicesコマンドでAndroid端末を認識しない

目次1 事象2 原因3 解決 事象 USB接続するAndroidによって以下のエラーが出たりします。 C:\src\ionic\awsomeapp>adb devices List of dev …

Angularのテンプレート評価式にビット演算を使うとTemplate parse errorが発生する

AngularのテンプレートHTMLでビット演算をすることは禁じられているので代替手段を考えます。 目次1 事象2 原因3 対処 事象 CSSクラスをビット演算で切り替えるテンプレートを書きました。c …

Angular4.4のHTTP通信処理にタイムアウトを設定をすると「timeout is not a function」エラーが発生する

目次1 事象2 原因3 対処4 まとめ 事象 Angular4.3で追加されたHttpClientModuleに移行せず、HttpModuleを使い続けているアプリで、とある理由からpackage-l …

ローカルネットワーク内のHTTP通信が2回に1回交互にタイムアウトするようになった原因

目次1 事象2 調査3 解決4 その後 事象 ある日突然、オフィスのローカル開発環境でHTTP通信が異常なほど遅くなり、タイムアウトするようになりました。 その後F5でリロードすると普通にレスポンスが …

Android用ionic cordovaアプリのビルド時に「Unable to merge dex」エラー

目次1 事象2 原因3 解決4 まとめ 事象 「cordova-plugin-admob-free」を追加した次のビルドで発生。他のケースでも発生する可能性があります。 C:\src\ionic\aw …


shingo nakanishi。東京で消耗中の職歴20年越え中年ITエンジニアです。「生涯現役プログラマを楽しむ」ことができる働き方探しをライフワークにしています。

19歳(1996年)から書き始めた個人日記が5,000日を超え、残りの人生は発信をして行きたいと思い、令和元日からこのサイトを開始しました。勉強と試行錯誤をしながら、自分が経験したIT関連情報を投稿しています。