PuppeteerのページでXHRリクエストを傍受し、モックレスポンスを返すための最良の方法

Question

PuppeteerがロードされたページでXHRリクエストを傍受し、モックレスポンスを返すことができるようにする必要があります。これを行う最善の方法は何ですか？

Answer 1

最新の人形では、この状況に対処する方法はrequest.respond()です。

Answer 2

誰かが興味があれば、テストのニーズに合わせて特別なアプリケーションビルドを作成しました。これはPretenderをページに追加します。そして、Puppeteerのevaluateメソッドを使用してPretenderサーバーと通信します。

これは理想的ではありませんが、私はPuppeteerだけで必要なものを達成する方法を見つけることができませんでした。 Puppeteerでリクエストをインターセプトする方法はありますが、リクエストに対して偽のレスポンスを返す方法はありません。

UPDATE：Xルネmentionedとして

request.respond()方法を使用して、人形遣いのv0.13.0で、このためのネイティブサポートは、今そこにあります。 Pretenderの代わりに使用するようにテストを書き直すつもりです。これは私にとって多くのことを単純化するためです。

Answer 3

実際に行く方法はrequest.respond()だと思いますが、Webで具体的な例を見つけられませんでした。私がやったやり方は次のようなものでした：

// Intercept API response and pass mock data for Puppeteer 
await page.setRequestInterception(true); 
page.on('request', request => { 
    if (request.url === constants.API) { 
     request.respond({ 
      content: 'application/json', 
      headers: {"Access-Control-Allow-Origin": "*"}, 
      body: JSON.stringify(constants.biddersMock) 
     }); 
    } 
    else { 
     request.continue(); 
    } 
}); 

正確にはどうなりますか？

1. まず、すべての要求が、私はconstants.APIは私が一致する必要があるだけのエンドポイントであるif (request.url === constants.API)とURLでそれを照合することによって、私が興味を持って1を探して、各要求のために、そして、page.setRequestInterception()
2. で傍受されています。
3. が見つかった場合、私はそう私はちょうど要求がrequest.continue()

つ以上のポイントを継続させ、request.respond()と私自身の応答を渡す：上記

• constants.biddersMockがCORSヘッダがある配列
• ですあなたのモックデータへの重要なアクセスやアクセスは許可されません。

コメントしてくださいより良い例を持つリソース。