html base target _top lets cypress loose control

[joelgrimberg]

when you have in your html-head, cypress will loose control of the browser & tests. Cypress will show the whoops page when an is clicked. I would expect cypress somehow to overwrite the _top.

here is the showcase of whats going wrong:
https://github.com/joelgrimberg/cypress_base_issue

[brian-mann]

We could rewrite this in the proxy layer sure - but you also have access to the DOM elements and could manually switch the attribute before you click the <a>. Just switch from _top to _parent.

[joelgrimberg]

good point. I already made a cy command:

Cypress.Commands.add("fix_base", () => {
  cy.window().then((win) => {
    win.document.querySelector('base').setAttribute('target', '_self')
  })
})

but If I want to build Integration / E2E tests, which requires more clicks per testcase (it) , I have to invoke the new cy.fix_base() before every cy.click().

[brian-mann]

There is a much easier way documented here: https://on.cypress.io/catalog-of-events

Just listen to the window:load event and then query into your document and update the <base> tag references. This will happen automatically on all visits and navigations. Essentially you'll just set it once and then it will work permanently.

[joelgrimberg]

the thing is, that this code does not work:

cy.on('window:load', (win) => {
  win.document.querySelector('base').setAttribute('target', '_self')
})

the error I am getting is:

TypeError: cannot read property 'setAttribute' of null

what sounds kind of logic, cause the page hasn't loaded yet.

[brian-mann]

Are you rendering async?

Another option would be to use Cypress.Commands.overwrite('click') and then just synchronously update the base tag there.

cy.click() will have the current subject yielded to it, and you can use the ownerDocument from that.

[brian-mann]

Also now that I think about it - inside of window:load you could just do this...

Cypress.on('window:load', () => {
  cy.get('base').invoke('attr', 'target', '_self')
})

That will actually use Cypress to find the element (and retry automatically until it does) and then modify it. Those commands will show up enqueued in the command log which will be much more obvious.

[joelgrimberg]

sorry, that won't work:
cy.visit() will return a promise;
cy.get will invoke the promise is cy.get().

(thanx for your time, by the way!)

[jennifer-shehane]

Duplicate of #3121