通过 RequestHook 添加响应头答案

【问题标题】：Add response headers via RequestHook通过 RequestHook 添加响应头
【发布时间】：2021-03-05 16:48:03
【问题描述】：

如何在 Testcafe 的响应中添加标头？到目前为止，我已经尝试使用 RequestHook 类的 onResponse 函数。使用RequestLogger，我可以验证是否添加了标头，但它们实际上并没有进入浏览器（在 Chrome 的网络选项卡的响应标头列表中不可见）。

这是我正在使用的：

import { RequestLogger, RequestHook } from 'testcafe';

class HeadersHook extends RequestHook {
  constructor(requestFilterRules) {
    super(requestFilterRules, { includeBody: false, includeHeaders: true });
  }

  async onRequest(event) { }

  async onResponse(event) {
    event.headers['bar'] = 'foo';
    event.headers.foo = 'bar';
    console.log('hook: ', event.headers);
  }
}

fixture('My Fixture');

test('Example internal-sdk usage', async (t) => {
  const headerLogger = RequestLogger(process.env.TEST_URL, {
    logResponseHeaders: true
  });

  // This order is significant: adding the logger first causes it to miss the additional headers.
  // Not sure why.
  await t.addRequestHooks(new HeadersHook(process.env.TEST_URL));
  await t.addRequestHooks(headerLogger);

  await t.navigateTo(process.env.TEST_URL);
  console.log('logger: ', headerLogger.requests.length, headerLogger.requests[0].response.headers);

  t.debug();
});

这给出了以下控制台输出，这似乎表明标头已成功添加：

hook:  {
  'content-type': 'text/html;charset=utf-8',
  vary: 'origin,accept-encoding',
  'access-control-allow-credentials': 'true',
  'access-control-expose-headers': 'WWW-Authenticate,Server-Authorization',
  'cache-control': 'no-cache',
  'content-encoding': 'gzip',
  date: 'Fri, 05 Mar 2021 16:43:06 GMT',
  connection: 'keep-alive',
  'keep-alive': 'timeout=5',
  'transfer-encoding': 'chunked',
  bar: 'foo',
  foo: 'bar'
}
logger:  1 {
  'content-type': 'text/html;charset=utf-8',
  vary: 'origin,accept-encoding',
  'access-control-allow-credentials': 'true',
  'access-control-expose-headers': 'WWW-Authenticate,Server-Authorization',
  'cache-control': 'no-cache',
  'content-encoding': 'gzip',
  date: 'Fri, 05 Mar 2021 16:43:06 GMT',
  connection: 'keep-alive',
  'keep-alive': 'timeout=5',
  'transfer-encoding': 'chunked',
  bar: 'foo',
  foo: 'bar'
}

但在浏览器网络选项卡中，我看到的只是这个（缺少额外的标题）：

access-control-allow-credentials: true
access-control-expose-headers: WWW-Authenticate,Server-Authorization
cache-control: no-cache
connection: keep-alive
content-encoding: gzip
content-type: text/html;charset=utf-8
date: Fri, 05 Mar 2021 16:45:51 GMT
keep-alive: timeout=5
transfer-encoding: chunked
vary: origin,accept-encoding

【问题讨论】：

标签： javascript testing automated-tests e2e-testing testcafe

【解决方案1】：

这种行为看起来像一个错误，因为修改挂钩内的headers 对象不会影响真正的响应。我在 GitHub 上重新打开了作者的 issue：https://github.com/DevExpress/testcafe/issues/6021。

目前，将标头添加到响应中的唯一方法是使用 RequestHook 类的私有 _onConfigureResponse 方法：

class HeadersHook extends RequestHook {
  constructor(requestFilterRules) {
    super(requestFilterRules, { includeBody: false, includeHeaders: true });
  }

  async onRequest () { }

  async onResponse () { }

  _onConfigureResponse (event) {
    super._onConfigureResponse(event);

    event.setHeader('foo', 'bar');
    event.setHeader('bar', 'foo');
  }
}

请注意，此 API 是私有的，将来可能会更改。请参阅上面的 GitHub 问题以跟踪其状态。

【讨论】：