Error: Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': The provided selector is empty.

devtoolを開いてdropdownメニューをクリックするとこのエラーが出た。

Error: Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': The provided selector is empty.

調べていると、下記のissueでも同内容のエラーが出ている。
bootstrapのdropdownが原因だった。
https://github.com/puppeteer/puppeteer/issues/1203

解決方法

1. 親要素のidを、data-targetにする。

2. 子要素のaria-labelledbyを、id にする。

修正前

<div class="global-header-menu">
  <a href="#" class="dropdown-toggle dropdown-toggle-link" role="button" data-toggle="dropdown" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false">☰</a>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-link" aria-labelledby="navbarDropdownMenuLink">
    <a class="dropdown-item" href="/howto">このアプリについて</a>
    <a class="dropdown-item" href="/about">管理人について</a>
  </div>
</div>

修正後

<div class="global-header-menu">
  <a href="#" class="dropdown-toggle dropdown-toggle-link" role="button" data-toggle="dropdown" data-target="#navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false">☰</a>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-link" id="navbarDropdownMenuLink">
    <a class="dropdown-item" href="/howto">このアプリについて</a>
    <a class="dropdown-item" href="/about">管理人について</a>
  </div>
</div>

これでエラーが解消した。