Testcafe: RequestHooks didn't works - not executed at all to add request headers

[marcinlesek]

What is your Test Scenario?

Use RequestHook in fixture or test.

What is the Current behavior?

RequestHook is not applied (or onRequest & onResponse are not executed). I added few console.log(...)s to my hook class to see if it works, unfortunately nothing was logged. After that, I checked also network in browser, but also any request didn't have my custom header.

What is the Expected behavior?

RequestHook to works properly (execution & request manipulation).

What is your web application and your TestCafe test code?

Your base test example and base RequestHook example together.

Your website URL (or attach your complete example): http://devexpress.github.io/testcafe/example

Your complete test code (or attach your test files):

 import { Selector, RequestHook } from 'testcafe';

class MyHeaderHook extends RequestHook {
  constructor(requestFilterRules, responseEventConfigureOpts) {
    super(requestFilterRules, responseEventConfigureOpts);
    console.log('Creating hook');
    console.log(`Hook filter rules: ${requestFilterRules}`);
  }

  // I also tried async onRequest(...) but still don't work properly
  onRequest(requestEvent) {
    console.log('onRequest()');
    requestEvent.requestOptions.headers['MyHeader'] = 'MyHeader value';
    console.log(requestEvent.requestOptions.headers);
  }

  // I also tried async onResponse(...) but still don't work properly
  onResponse(responseEvent) {
    console.log('onResponse()');
    console.log(responseEvent.requestOptions.headers);
  }
}

const myHeaderHook = new MyHeaderHook('http://devexpress.github.io', {
  includeHeaders: true,
  includeBody: true,
});

fixture`Getting Started`
  .page`http://devexpress.github.io/testcafe/example`
  .requestHooks(myHeaderHook);

test('My first test', async (t) => {
  await t
    .debug()
    .typeText('#developer-name', 'John Smith')
    .click('#submit-button')

    // Use the assertion to check if the actual header text is equal to the expected one
    .expect(Selector('#article-header').innerText).eql('Thank you, John Smith!');
});

Your complete test report:

$ ./node_modules/.bin/testcafe scenarios/hook-test.js
The "src" option from the configuration file will be ignored.
Creating hook
Hook filter rules: http://devexpress.github.io
 Running tests in:
 - Chrome 74.0.3729 / Mac OS X 10.14.4

 Getting Started
 ✓ My first test


 1 passed (1m 08s)

Config file:

{
  "browsers": [ "chrome" ],
  "src": "scenarios",
  "reporter": [
    {
      "name": "spec"
    }
  ],
  "screenshotPath": "screenshots",
  "takeScreenshotsOnFails": true,
  "screenshotPathPattern": "${DATE}_${TIME}/${TEST}/${USERAGENT}/${FILE_INDEX}.png"
}

Steps to Reproduce:

1. Copy whole fixture with hook class
2. Copy config file to .testcaferc.json
3. Run TestCafe via $ ./node_modules/.bin/testcafe
4. Check that Hook wasn't applied to any request

Your Environment details:

• testcafe version: 1.1.4
• node.js version: v10.14.2
• command-line arguments: -
• browser name and version: Chrome 74.0.3729
• platform and version: Mac OS X 10.14.4
• other: -

If I'm doing something wrong, please advice me, but it's copy & paste from your documentation.

Best regards,
Marcin Łesek

[Farfurix]

@marcinlesek

Hello,

Thank you for your detailed description.

const myHeaderHook = new MyHeaderHook('http://devexpress.github.io'

In the code provided above the myHeaderHook hook intercepts all requests sent to this exact URL (http://devexpress.github.io).

In your scenario you need to use the Filtering by a Regular Expression:

import { Selector, RequestHook } from 'testcafe';

class MyHeaderHook extends RequestHook {
    constructor(requestFilterRules, responseEventConfigureOpts) {
        super(requestFilterRules, responseEventConfigureOpts);
    }

    onRequest(requestEvent) {
        console.log('onRequest()');
        requestEvent.requestOptions.headers['MyHeader'] = 'MyHeader value';
        console.log(requestEvent.requestOptions.headers);
    }

    onResponse(responseEvent) {
        console.log('onResponse()');
    }
}

// const hook = new MyHeaderHook('https://devexpress.github.io', {
const hook = new MyHeaderHook(/https:\/\/devexpress.github.io/, { // it works
// const hook = new MyHeaderHook('https://devexpress.github.io/testcafe/example/thank-you.html', { // it works
    includeHeaders: true,
    includeBody: true,
});

fixture`Getting Started`
    .page`https://devexpress.github.io/testcafe/example`;

test('My first test', async (t) => {
    await t
        .typeText('#developer-name', 'John Smith')
        .addRequestHooks(hook)
        .click('#submit-button')

        // Use the assertion to check if the actual header text is equal to the expected one
        .expect(Selector('#article-header').innerText).eql('Thank you, John Smith!');
});

Result:

 Running tests in:
 - Chrome 74.0.3729 / Windows 10.0.0

 Getting Started
onRequest()
{ host: 'devexpress.github.io',
  connection: 'keep-alive',
  'user-agent':
   'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36',
  accept: 'image/webp,image/apng,image/*,*/*;q=0.8',
  referer:
   'https://devexpress.github.io/testcafe/content/jquery-ui/jquery-ui.min.css',
  'accept-encoding': 'gzip, deflate',
  'accept-language': 'en-US,en;q=0.9',
  MyHeader: 'MyHeader value' }
onResponse()
onRequest()
{ host: 'devexpress.github.io',
  connection: 'keep-alive',
  'user-agent':
   'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36',
  accept: 'image/webp,image/apng,image/*,*/*;q=0.8',
  referer: 'https://devexpress.github.io/testcafe/example/',
  'accept-encoding': 'gzip, deflate',
  'accept-language': 'en-US,en;q=0.9',
  MyHeader: 'MyHeader value' }
onResponse()
onRequest()
{ host: 'devexpress.github.io',
  connection: 'keep-alive',
  'upgrade-insecure-requests': '1',
  'user-agent':
   'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36',
  accept:
   'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3',
  referer: 'https://devexpress.github.io/testcafe/example/',
  'accept-encoding': 'gzip, deflate',
  'accept-language': 'en-US,en;q=0.9',
  MyHeader: 'MyHeader value' }
onResponse()
onRequest()
{ host: 'devexpress.github.io',
  connection: 'keep-alive',
  'user-agent':
   'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36',
  accept: 'text/css,*/*;q=0.1',
  referer:
   'https://devexpress.github.io/testcafe/example/thank-you.html',
  'accept-encoding': 'gzip, deflate',
  'accept-language': 'en-US,en;q=0.9',
  MyHeader: 'MyHeader value' }
onResponse()
 √ My first test


 1 passed (3s)

I will create a documentation issue.

[marcinlesek]

Hello @Farfurix,

firstly, thanks for your answer. In fact, yea, now I was able to handle this, but when copy & pasting your example, it's still hangs on. You need to delete

console.log(responseEvent.requestOptions.headers);

to pass this test example. The minimum working example of this case is:

class MyHeaderHook extends RequestHook {
    onRequest(requestEvent) {
        requestEvent.requestOptions.headers['MyHeader'] = 'MyHeader value';
    }

    onResponse(responseEvent) {}
}

I think TestCafe core team need to update docs about this feature for sure, it's misleading with hooks implementation.

Best,
Marcin

[Farfurix]

Thank you, I updated my comment.

We will update our docs in the context of this thread: https://github.com/DevExpress/testcafe/issues/3800.

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.