Cypress: cy.visit('url', {headers: {}}) doesnt work per documentation

[bpskishore]

Current behavior:

cy.visit(options); in options if we pass headers like these it doesnt work with headless browser as well as --headed browser

options = {
  url: 'www.localhost.com',
  headers: {'a': 'b'}
};

Desired behavior:

above code should work as specified

Steps to reproduce:

try above code

Versions

OS: Mac
Browsers Tried: Chrome 72/74, Electron (headless/headed) comes with cypress installation

[flotwig]

@bpskishore Try specifying the URL with the correct protocol:

options = {
  url: 'https://www.localhost.com',
  headers: {'a': 'b'}
}
cy.visit(options)

Works for me.

[bpskishore]

Yes, I used with protocol only both of these but no luck.

cy.visit(url, options);
cy.visit(options);

Please let me know if there are any workarounds

On Thu, May 16, 2019, 16:46 Zach Bloomquist [e-mail]
wrote:

@bpskishore https://github.com/bpskishore Try specifying the URL with
the correct protocol:

options = {
url: 'https://www.localhost.com',
headers: {'a': 'b'}
}cy.visit(options)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/cypress-io/cypress/issues/4216?email_source=notifications&email_token=AFPH4LTN4GPAGLHENKXT5GTPVXB2NA5CNFSM4HNPWYI2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVTAOMI#issuecomment-493225777,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFPH4LQ4YXC2GM3YKVDHT43PVXB2NANCNFSM4HNPWYIQ
.

[flotwig]

@bpskishore can you share what is happening that you don't expect? What is Cypress doing instead of navigating to the page?

[bpskishore]

Cypress is ignoring headers and continuing with opening page like without request headers.

Is there a way I can enable stacktrace or debug logs and verify?

[flotwig]

@bpskishore It looks like Cypress is sending the correct headers to the server. I changed your test to open https://www.whatismybrowser.com/detect/what-http-headers-is-my-browser-sending instead:

    options = {
      url: 'https://www.whatismybrowser.com/detect/what-http-headers-is-my-browser-sending',
      headers: {'a': 'b'}
    }

It seems to show the headers being set:

How did you determine that it did not set the request headers? If you checked using the Chrome Network Dev Tools, it won't show up in there because of how Cypress loads the page, but rest assured that the headers are being sent.

EDIT: Check out this page for information on how to turn on debug logging, which will show all requests: https://on.cypress.io/debugging#Print-DEBUG-logs

[bpskishore]

Thank you I will try again and keep posted. Many thanks for your support

[bpskishore]

Also forget to ask pleease share version of Cypress used. That might help , I will share my version in this post if it doesn't work again

[flotwig]

I'm running 3.2.0 (latest). cy.visit with headers was added in this version: https://on.cypress.io/changelog#3-2-0

[bpskishore]

OK, Cypress indeed sending headers but here is my issue, when I add header extension in chrome and try accessing my url, it works fine. Also when i open chrome using cypress open for the first time i get error because headers not set but i can add headers in chrome browser, re run works well.

When i send headers using options with Election Headed/Headless it doesn't work but like you mentioned it is sending headers. question is are they applied to browser request headers? not sure.

I am using latest version of cypress as well 3.2.0.
please suggest

Version:
Cypress package version: 3.2.0
Cypress binary version: 3.2.0

[flotwig]

Sending headers with Cypress should work regardless of which browser you are using. Electron and Chrome should both work.

Cypress's tests for sending headers are written for Electron and they pass:

https://github.com/cypress-io/cypress/blob/f679ced981f40d56af12982596a25efdf5b028c0/packages/driver/test/cypress/integration/commands/navigation_spec.coffee#L590-L597

From what I understand, you're saying that cy.visit() doesn't send headers with the request in Electron. Can you share your code where you're setting these headers?

[bpskishore]

cypress:server:server resolving visit { 
  url: 'http://localhost:9090/', 
  headers: { 
    host: 'localhost:53105', 
    connection: 'Upgrade', 
    pragma: 'no-cache', 
    'cache-control': 'no-cache', 
    upgrade: 'websocket', 
    origin: 'http://localhost:53105', 
    'sec-websocket-version': '13', 
    'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Cypress/3.3.0 Chrome/61.0.3163.100 Electron/2.0.18 Safari/537.36', 
    'accept-encoding': 'gzip, deflate', 
    'accept-language': 'en-US', 
    'sec-websocket-key': '+Jn3dRoL846es8CiQUpy3Q==', 
    'sec-websocket-extensions': 'permessage-deflate; client_max_window_bits' 
  }, 
  options: { 
    auth: null, 
    failOnStatusCode: true, 
    retryOnNetworkFailure: true, 
    retryOnStatusCodeFailure: false, 
    method: 'GET', 
    body: null, 
    headers: { 
      'user': 'abcd', 
      'group': 'efgh', 
      'ac-user': 'local' 
    }, 
    timeout: 30000 
   } 
  }

looks like if we can set the options header inside original header that resolves the issue, for my understanding why is it sending headers two times one as part of browser and another in options?

[bpskishore]

Sending headers with Cypress should work regardless of which browser you are using. Electron and Chrome should both work.

Cypress's tests for sending headers are written for Electron and they pass:

https://github.com/cypress-io/cypress/blob/f679ced981f40d56af12982596a25efdf5b028c0/packages/driver/test/cypress/integration/commands/navigation_spec.coffee#L590-L597

From what I understand, you're saying that cy.visit() doesn't send headers with the request in Electron. Can you share your code where you're setting these headers?

To answer your question yes cypress is sending headers but the way it is sending is different than the way headers are set from browser or throuh api using axios.

[flotwig]

How is it different?

[bpskishore]

How is it different?

the difference i can think of application is considering only the first header: {} and ignoring the headers from options which is sending through cypress, that is only the way its not working for me.

if this route isn't working for me, if there is a way i can set chrome as headless using capabilities that would be great or create a profile for electron browser and add header extension that also works. please let me know if there is anyother way

[flotwig]

The "first header" you see in the debug logs is not the same as the header sent with cy.visit(). The headers sent with options will be the ones sent with the request.

We also send cookies that the browser would normally send. Headers like Accept, Connection, Host, and User-Agent are normally sent with the browser request, so we also send them with the cy.visit(), because cy.visit() is intended to be used to test visiting a web page.

I just tried your original example with the headers you shared:

    options = {
      url: 'https://www.whatismybrowser.com/detect/what-http-headers-is-my-browser-sending',
      headers: {'user': 'abcd', 'group': 'efgh', 'ac-user': 'local'}
    }
    cy.visit(options)

It works in Chrome:

And it works in Electron too:

Can you clarify what isn't working like you expect?

[bpskishore]

is it possible to have a webex call i can walkthrough?or any meeting of your choice

[jennifer-shehane]

Hey @bpskishore signing up for any of our paid plans gives you access to our team for support via email. If you would like something higher touch, like a webex call, we offer screen sharing with our premium support options.

[jordandlaman]

So I tried hunting this down and I think I did notice "something". Say you have a local web app built at localhost:3000/env/application and an api that gets called when visiting that url at localhost:3000/env/api/info/user. In order to display anything in the app when visiting /env/application the headers need to be passed on to calls made to the api. In my particular case the headers were being passed to the url specified in the cy.visit() which was localhost:3000/env/applicationcall but not to the api calls. Not sure what that is about but you can get around behavior doing something like this:

cy.server();
cy.route({
      url: /.*/,
      onRequest: xhr => {
        xhr.setRequestHeader('whatever', 'x');
        xhr.setRequestHeader('whatever2', 'y');
      }
    });
cy.visit('/');

This allows you add request headers to network calls without forcing cypress to modify the response. Obviously edit the url glob pattern to whatever works for your app as that is just an example.

[flotwig]

@jordandlaman This is behaving as designed, adding headers to cy.visit does not add them to every subsequent request, just like a real browser.

[jordandlaman]

I had a suspicion that it was acting as intended. After talking to OP it looks like this was his problem as he assumed the headers would be passed to subsequent requests.

[flotwig]

Ah, I see. We should probably update our docs to specifically mention this behavior. Opened an issue: cypress-io/cypress-documentation#1697

FYI, #687 will add support for adding headers to every request that goes through Cypress.

[jennifer-shehane]

The documentation has been updated here: https://github.com/cypress-io/cypress-documentation/pull/1699/commits/a8ce7299d684321b27d000b98827951f3cfadf38

Should this issue be closed?

[jordandlaman]

Not OP but yeah seems to be resolved and has the relevant info needed to help others in the future.