Cypress: Page doesn't load as expected

[maximplyassunov]

Bug

I wanna test ad unit's using cypress. But when i open this url in cypress - https://www.tripsavvy.com/when-should-you-get-your-luggage-wrapped-4146609?kw=TEST4534121759 - ad unit's load broken

Current behavior:

Desired behavior:

How to reproduce:

Just open this url using cypress cy.visit("https://www.tripsavvy.com/when-should-you-get-your-luggage-wrapped-4146609?kw=TEST4534121759");

Test code:

'use strict';

describe('FIU', () => {

  it('FIU', () => {
    cy.visit("https://www.tripsavvy.com/when-should-you-get-your-luggage-wrapped-4146609?kw=TEST4534121759");
  });
});

Additional Info (images, stack traces, etc)

I was trying to set "chromeWebSecurity": false , but it didn't help

Thank you!

• Operating System:
  Mac Os Hight Sierra 10.13.3
• Cypress Version:
  2.1.0
• Browser Version:
  Chrome 65.0.3325.181, see same issue on Electron 59, and Canary 67

[jennifer-shehane]

Yeah, the iframes in this do not play nicely in Cypress. I was able to set chomeWebSecurity: false to get rid of some of the console errors, but then the ads were still not displaying correctly.

I would try setting blacklistHosts for some of the ad urls so that they do not load while testing the application. https://on.cypress.io/configuration#blacklistHosts

[maximplyassunov]

@jennifer-shehane Thanks for respond Jennifer, and for potential solution, but the only thing i want to test on that page is ad units, so i need them to be loaded

[Bkucera]

@maxim94plyasunov Testing the specific content of a 3rd party service is usually an anti-pattern, since this is something beyond the control of your application's code. I would would recommend simply asserting that the request to the ad server was made and nothing more than that. That way you are still ensuring that your app is functioning properly regardless if the ad provider's servers are up or down.

[maximplyassunov]

@Bkucera The issue is - it's not 3rd party content, this ad unit's were developed by our team also, it's just located on other server, and we need test to make sure that all elements load correctly, and don't break the page, we have the test's for the whole app already, and now we want to write a test, which checks that specific ad units interact correctly with our pages

[bahmutov]

Yeah, I don't understand what the add is doing - some of the markup for the top banner add is there, I see something loading, flashing black rectangle, then it disappears.

[jennifer-shehane]

^ @Bkucera has dug into this issue and narrowed down some of what's happening. He's still investigating.

[Bkucera]

@maxim94plyasunov It appears your ad is using "frame busting" to get access to the root document's page from the iframe and set the height/width of itself. By default Cypress blocks this from happening so the app can't mess up Cypress's Test Runner, which runs your app inside an iframe itself. There is an option to disable this by setting modifyObstructiveCode=false in cypress.json, but that still might not fix your problem.
I tried to display your webpage from an iframe in Chrome, and it didn't work, giving me this error

Refused to display 'https://www.tripsavvy.com/when-should-you-get-your-luggage-wrapped-4146609?kw=TEST4534121759' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.specless.io *.specless.tech http://*.seo.aws.about.com https://*.seo.aws.about.com www.tripsavvy.com *.qa.aws.tripsavvy.com atlas.tripsavvy.com atlas.local.tripsavvy.com".

[anuragipankaj]

i'am facing the same issue , and ADS are not showing up while running it through cypress ,any fixes yet? modifyObstructiveCode=false and 'chromeWebSecurity": false are not working .

[pxlprfct]

~I'm running into this exact issue aswell, the first page we load in is a log in form, so I can't even get around it :(~

Refused to display 'https://prepiam.toronto.ca.ibm.com/idaas/oidc/endpoint/default/authorize?response_type=code&client_id=MDc2Yzg1ZDktNmVlYS00&redirect_uri=https%3A%2F%2Flocalhost%3A6443%2Fauth%2Foidc%2Freturn&scope=openid%20openid' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://wwwstage.ibm.com/".

~Thanks everyone looking at it, you're all heroes <3~

---

This issue was solved by reading the documentation, and understanding _why_ it was happening. I ended up having an E2E runmode that turns off some security features - but not everyone will be able to do that, just thought I'd share my 'fix'.

Thanks for all the hard work you are doing - cypress is amazing, and you should all be proud. Have a great day all.

[songbo0212]

@pxlprfct I have the same issue, could you please share your security features? Which security features did you turn off? Thanks a lot

[pxlprfct]

@songbo0212 Sorry for the late response here. I am using an express server, which usually uses helmet to protect it, so I just added a E2E run mode that doesn't - and that cleared the issue up for me.