title: How to test programatically chosen external URL with Cypress for Bootstrap4 page
body: <p>I am getting to grips with Cypress. Loving it so far, however, I have got stuck with the following.</p>
  <p>I want to test that when a button is clicked, the user is directed to the correct external site. This works fine (at the moment) using the following code:</p>
  <pre><code>$(&quot;#my-button&quot;).click(function() {
    var external_url = 'https://www.somesite.com/';
    if($(&quot;#my-checkbox&quot;).prop(&quot;checked&quot;)) {
      external_url += 'foo';
    } else {
      external_url += 'bar';
    }
    window.location.href = external_url;
  
    return false;
  });
  </code></pre>
  <p>Starting small within a Cypress spec:</p>
  <pre><code>it('Should direct to external site depending on checkbox state', () =&gt; {
    cy.get('#my-button').click()
  })
  </code></pre>
  <p>Receives Cypress Error:
  Cypress detected a cross origin error happened on page load:</p>
  <blockquote>
  <p>Blocked a frame with origin &quot;http://localhost:8888&quot; from accessing a cross-origin frame.</p>
  </blockquote>
  <p>This is fair enough, and I understand why I get the error. I don't want to disable Chrome Web Security to get around it.</p>
  <p>Can someone show me how I should test this use case?</p>
  <p>I think I should be trapping the location change with <code>cy.stub()</code> and/or <code>cy.on()</code> but so far I have not had success:</p>
  <pre><code>it('Should direct to external site depending on checkbox state', () =&gt; {
    cy.stub(Cypress.$(&quot;#my-button&quot;), &quot;click&quot;, () =&gt; {
      console.log('stub')
    })
  
    cy.on(&quot;window.location.href&quot;, win =&gt; {
      console.log('on')
    })
  
    cy.get('#my-button').click()
  })
  </code></pre>
  <p>The button click still results in the error being thrown as the script still attempts to set the location to an external site.</p>