title: testCafe How to add headers to the home page url
body: <p>I have an application which is launched successfully by adding or modifying request headers ( something like single sign on). When we have to test it we use a chrome plugin like this one :<a href="https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj?hl=en" rel="nofollow noreferrer">https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj?hl=en</a>   to add custom headers and paste the home page url say: "<a href="https://student.com" rel="nofollow noreferrer">https://student.com</a>" in the browser url and request picks the modified headers and once validated internally by the app, the home page is rendered on browser. If a user does not have access, a error page is rendered. </p>
  
  <p>I am trying to test this application using testCafe and looking to see if there is a way to add headers to the "navigateTo('url')"  function in testcafe. I thought I could accomplish this with customer hook explained here: <a href="https://devexpress.github.io/testcafe/documentation/test-api/intercepting-http-requests/creating-a-custom-http-request-hook.html" rel="nofollow noreferrer">https://devexpress.github.io/testcafe/documentation/test-api/intercepting-http-requests/creating-a-custom-http-request-hook.html</a></p>
  
  <p>This is what I have so far
  <strong>hook declaration</strong></p>
  
  <pre><code>    class myRequestHook extends RequestHook {
          constructor () {
              super();
          }
  
          async onRequest (e) {
              e.requestOptions.headers['UserName'] = 'User';
              e.requestOptions.headers['pwd'] = 'User';        
          }
  
          async onResponse (e) {
  
          }
      }
  
  const customHook = new myRequestHook('https://student.com/app/home', {
      includeHeaders: true,
      includeBody: true
  });
  </code></pre>
  
  <p>And this how my test uses it</p>
  
  <pre><code>fixture`Getting Started`
        .page('http://student.com')
        .requestHooks(customHook);    
  
  test.only('My first test', async t =&gt; {
      await t.navigateTo('https://student.com/app/home');
      await page_student.click_studentLink();
      await t
          .expect(await page_student.getText_title_student()).eql('John Smith')
  });
  </code></pre>
  
  <p>The home page still displays an error which means the headers appendage wasn't successful. Could someone point me where I am going wrong</p>
  
  <p>Also, is there a way I can check that my request is actually carrying my custom header - username and password along with the URL. It will be helpful if I can actually debug to see if the request is being carried out with the custom headers. </p>
  
  <p>Any pointers will be appreciated. Thanks</p>