trouble shooting

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

-trouble shooting
-, ,

執筆者:

関連記事

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 Tweets 4 Users …

Tomcatのcatalina.outが「java.util.zip.ZipException: error in opening zip file」で溢れかえった原因はAppleDouble

目次1 事象2 原因3 対処4 まとめ 事象 ある日、共有development環境として使っているCentOSのディスク使用率がどんどん増えていってることに気づきました。 増加原因になっていたTom …

Angular11から12にアップデートしたらng serveがproductionモードで起動するようになってしまう

既存のAngular11のプロジェクトを12に上げた際に発生。 目次1 環境2 事象3 原因4 対処5 根本原因6 まとめ 環境 Windows 11Node.js 14.15.1Angular13リ …

Metabaseの登録データベース削除時に入力を求められて消せない

分析対象として登録したデータベースを一覧から削除する際に入力値を求められ、何を入れていいか分からずプチはまりました。 結論から述べると入力する文字は「delete」でした。 事象 Metabase(v …

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

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

 

shingo.nakanishi
 

東京在勤、1977年生まれ、IT職歴2n年、生涯技術者として楽しく生きることを目指しています。デスマに負けず健康第一。