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();
    });

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

執筆者:

関連記事

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

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

ERROR: Several keys given – pgcrypto does not handle keyring、またはERROR: Corrupt ascii-armor

gpgキーストアに同じUIDで複数の鍵ペアを登録してしまうと、ファイルにexportした際に1ファイルに複数の鍵情報が入ってしまい、1ファイル1鍵を期待しているpgcryptoに怒られます。 目次1 …

org.apache.poi.ooxml.POIXMLException: Strict OOXML isn’t currently supported, please see bug #57699

目次1 事象2 原因3 対処4 まとめ 事象 以下のExcelファイルをApache POIで読み込んだ際に発生。  mojikiban.ipa.go.jp  5 twe …

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

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

git push時に「error: RPC failed; result=22, HTTP code = 501」エラー

目次1 事象2 原因3 対処4 まとめ 事象 オンプレGitLabへのgit push時に掲題のエラーが発生してpushに失敗します。 原因 git push時の1ファイル最大サイズは1Mbyteの為 …

 

shingo.7k24
 

東京在勤、職歴20年越え中年ITエンジニアです。まだ開発現場で頑張っています。

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

私と同じく、今後IT業界で生計を立てて行きたいと考えている方や、技術共有したいけどフリーランスで孤独、といった方と一緒に成長、知識共有して行けたら楽しいな、と思っています。