先日 Jest + Puppeteer の導入が完了した．その過程で Basic 認証が掛かったページに対して E2E テストを実行する必要があった．そのため，Basic 認証が掛かったページにアクセスする方法を調べ，対応したのだが，想定よりも時間が掛かったためまとめておく．

設定方法

調べた所，2つの方法を見つけた．

`page.authenticate` を利用する方法

公式ドキュメントにある page.authenticate を使って Basic 認証のユーザとパスワードをセットし， page.goto でページにアクセスする．

await page.authenticate({username: 'Basic 認証のユーザ名', password: 'Basic 認証のパスワード'});
await page.goto('Basic 認証が掛かったページのURL', {waitUntil: "domcontentloaded"});

実際は，Basic 認証のユーザとパスワードをハードコーディングするのではなく，以下のように定数を利用した．定数は dotenv をインストールし，.env ファイルで値を設定した．

require('dotenv').config();

await page.authenticate({username: process.env.USER, password: process.env.PASS});
await page.goto('Basic 認証が掛かったページのURL', {waitUntil: "domcontentloaded"});

`page.setExtraHTTPHeaders` を利用する方法

page.setExtraHTTPHeaders を利用する方法も見つけたため，試してみた．この方法でもページにアクセスすることが確認できた．

await page.setExtraHTTPHeaders({ Authorization: `Basic ${new Buffer.from(`${'Basic 認証のユーザ名'}:${'Basic 認証のパスワード'}`).toString('base64')}`});
await page.goto('ベーシック認証が掛かったページのURL', {waitUntil: "domcontentloaded"});

最初は Buffer() を使って Basic 認証の設定をしていたが，実行すると以下のように Buffer() は非推奨である旨がコンソールに表示されたため，代わりに Buffer.from() を使っている．

DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe()
, or Buffer.from() methods instead.