Cypress: { "chromeWebSecurity": false } seems not work as expected

[SteveBrandt]

• Operating System: Linux (ubuntu)
• Cypress Version: 0.20.3
• Browser Version: Chrome 61

Is this a Feature or Bug?

Bug

Current behavior:

test isn't successful

Desired behavior:

visit "https://www.springermedizin.de"
click "login" (https://signon.springer.com/)
title should include "Login"

test should be successful

How to reproduce:

run the test

Test code:

{
"pageLoadTimeout": 200000,
"chromeWebSecurity": false
}


describe('SpringerMedizin Spec', function(){

    it('Login and Logout should work as expected', function(){

        cy.visit('https://www.springermedizin.de');

        cy.get('a.personalisation__login').click();

        cy.title().should('include', 'Login');

    });
});

Additional Info (images, stack traces, etc)

CypressError: Timed out retrying: expected '' to include 'Login'

[jennifer-shehane]

In order to work around cross origin errors, you may want to try to approach these tests a bit differently. The question here is, what do you really want to test?

1. That the Login link will take you to the login page.
2. That, once visiting the login page, the title contains "Login".

You can test both of these things by splitting them into 2 separate tests like below to avoid this error.

describe.only('Tests', function(){
  it('Login button should link to login', function(){
    cy.visit('https://www.springermedizin.de')
    cy.get('a.personalisation__login').should('have.attr', 'href').and('eq', '/login?returnUrl=%2F')
  })

  it('Login page has title', function(){
    cy.visit('https://www.springermedizin.de/login?returnUrl=%2F')
    cy.title().should("include", "Login")
  })
})

We have a recipe that includes some best practices when it comes to testing anchor links here that you should also check out.

Also, the error itself has some best practices for workarounds.

[SteveBrandt]

Hi,
thanks for the response. I want to test real user journeys.

For example: The user is on our site, clicks login, fill his credentials, come back to our site and is logged in.

I want to be at close as possible at the real user behavior. You are right, it's possible to test it in different tests but that is not wat I want.

[brian-mann]

Cypress enables you to write a different kind of test altogether - one that isn't constrained or forces you to "act like a user" at all times.

You could easily programmatically test across the domain boundary. We have several example recipes that show you exactly how to do this.

You're wanting to test single sign on - an example of that is here: https://github.com/cypress-io/cypress-example-recipes#logging-in---single-sign-on

Instead of testing interrelated services, you should test each one in isolation from each other, and then programmatically cross that threshold. Doing it this way is orders of magnitude faster - and if you're building up any kind of test suite you'd need to solve that anyway else your tests will be slow. You will also still retain 100% coverage so there is no downside.

With that said, it is technically possible for us to remove the visit constraints with webSecurity off, and since Cypress is open source contributions are accepted :-P

With the visit constraints disabled when web security is off you would be able to cross domains and test it the way you wanted.

[SteveBrandt]

thanks for your help.
regards

[WilliamMayo11]

@SteveBrandt @jennifer-shehane

{"chromeWebSecurity": false} does not work for me either. Are there other tricks to getting this to bypass Cypress' cross-origin restriction? This is the only conversation I've found online about it.

Chrome console displays "refused to display "https://......." in a frame because it set 'X-Frame-Options' to 'sameorigin'.

I'm testing an app that does a lot of cross-origin navigation, and turning off web security in necessary for me. I can't seem to get past this error, and any help would be very appreciated!

[RileyDavidson-Evans]

Unfortunately looking through their documentation and the number of open issues this seems to be a seriously and seemingly permanent blocker to using Cyprus for legitimate testing. It's too bad that a blocker like this just stops its usability dead in its tracks...

Our app uses a Stripe payment iframe, we cannot target and change the input value because of the security issues, so now Cyprus cannot test our actual user workflows which renders it relatively useless unfortunately.

[brian-mann]

@RileyDavidson-Evans the setting { chromeWebSecurity: false } does indeed work, but in Chrome 67 they began to enable site isolation which can break it (if Google randomly selected you to be opted into that new feature). They are doing A/B tests. We've already closed that issue and fixed it and provided a current workaround today before the next patch release.

Also note that testing Stripe payment forms is extremely common and this is what many of our users do.

https://github.com/cypress-io/cypress/issues/1951
https://github.com/cypress-io/cypress/issues/2001

https://github.com/cypress-io/cypress/issues?utf8=%E2%9C%93&q=chromeWebSecurity

[RileyDavidson-Evans]

@brian-mann Just wanted to give you a big thank you, as you recommended adding

on("before:browser:launch", (browser = {}, args) => {
    // console.log(browser, args); // see what all is in here!

    // browser will look something like this
    // {
    //   name: 'chrome',
    //   displayName: 'Chrome',
    //   version: '63.0.3239.108',
    //   path: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
    //   majorVersion: '63'
    // }

    // args are different based on the browser
    // sometimes an array, sometimes an object

    if (browser.name === "chrome") {
      args.push("--disable-site-isolation-trials");

      // whatever you return here becomes the new args
      return args;
    }
  });

to my plugins index file allowed this code ( which was previously not working ) to work flawlessly.

cy.wait(2000);
      // We now grab the iframe

      cy.get(".stripe__form iframe").then($iframe => {
        // user the contents utlitiy so we can search for all the inputs we need ( while ensuring to specify which exactly we need : carnumber for ex. )

        const $doc = $iframe.contents();
        cy.wrap($doc.find('input[name="cardnumber"')[0]).type(4242);
        cy.wrap($doc.find('input[name="cardnumber"')[0]).type(4242);
        cy.wrap($doc.find('input[name="cardnumber"')[0]).type(4242);
        cy.wrap($doc.find('input[name="cardnumber"')[0]).type(4242);
        cy.wrap($doc.find('input[name="exp-date"')[0]).type(4);
        cy.wrap($doc.find('input[name="exp-date"')[0]).type(24);
        cy.wrap($doc.find('input[name="cvc"')[0]).type(242);
      });