文本

puppeteer拦截请求

当我们浏览web时，一系列HTTP请求和响应将在浏览器和所访问的页面之间进行交换。在一些场景中，监视或操作此通信流是有用的，而不是让它按原样发生。

请求拦截

请求拦截请求拦截使我们能够观察在脚本执行过程中交换了哪些请求和响应。例如，这是我们在加载测试网站时打印它们的方法

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  await page.setViewport({ width: 1200, height: 800 })

  await page.setRequestInterception(true)

  page.on('request', (request) => {
    console.log('>>', request.method(), request.url())
    request.continue()
  })

  page.on('response', (response) => {
    console.log('<<', response.status(), response.url())
  })

  await page.goto('https://danube-webshop.herokuapp.com/')

  await page.screenshot({ path: 'screenshot.png' })

  await browser.close()
})()

我们可能想要干预并过滤发出的请求。例如，在抓取web页面时，我们可能希望阻止不必要的元素加载，以加快过程并降低带宽的使用。在下面的代码片段中，我们将中止测试网站上的所有图像请求。我们将根据它们的resourceType来识别它们，同时允许所有其他请求不经过修改通过。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  await page.setViewport({ width: 1200, height: 800 })

  await page.setRequestInterception(true)

  page.on('request', (request) => {
    if (request.resourceType() === 'image') request.abort()
    else request.continue()
  })

  await page.goto('https://danube-webshop.herokuapp.com/')

  await page.screenshot({ path: 'screenshot.png' })

  await browser.close()
})()

因此，您将看到网站徽标没有加载。

类似地，将resourceType切换到样式表将导致目标网站加载时没有任何CSS样式。

响应拦截

将一个或多个软件组件与它们的依赖项隔离开来，使它们更易于测试。我们可以通过将具有这种依赖性的交互替换为模拟的，简化的交互来实现。这也称为存根。

Puppeteer对我们来说很容易，因为对于我们可以拦截的每个请求，我们都可以添加响应。 Playwright尚不提供此功能。

每次加载时，我们的测试网站都会向其后端发送请求，以获取最畅销书的列表。对于我们的示例，我们将截取此响应并对其进行修改以返回我们即时定义的一本书。

const puppeteer = require('puppeteer')

const mockResponseObject = [
  {
    id: 1,
    title: 'How to Mock a Response',
    author: 'A. Friend',
    genre: 'business',
    price: '0.00',
    rating: '★★★★★',
    stock: 65535
  }
];

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  await page.setRequestInterception(true)

  page.on('request', (request) => {
    if (request.url() === 'https://danube-webshop.herokuapp.com/api/books') {
      request.respond({
        content: 'application/json',
        body: JSON.stringify(mockResponseObject)
      })
    } else request.continue()
  })

  await page.setViewport({ width: 1200, height: 800 })

  await page.goto('https://danube-webshop.herokuapp.com/')

  await page.screenshot({ path: 'screenshot.png' })

  await browser.close()
})()

下面是使用stub响应后的主页的样子

运行上面的示例，如下所示

node request-interception.js

总结 Puppeteer和Playwright使我们可以控制传出的HTTP请求。

使用Puppeteer，我们可以轻松地对HTTP响应进行存根。

author

石头磊哥 seven 随便叫

company

thoughtworks

大家好，本人不才，目前依旧混迹于thoughtworks，做着一名看起来像全栈的QA，兴趣爱好前端，目前是thoughtworks 西安QA社区的leader，如果有兴趣分享话题，或者想加入tw，可以找我

roles

QA（营生） dev（front-end dev 兴趣爱好）

联系方式

如果想转载或者高薪挖我请直接联系我哈哈

wechat:

qileiwangnan

email:

qileilove@gmail.com

文本

# puppeteer拦截请求

# 请求拦截

# author

# company

# roles

# 联系方式

# wechat:

# email: