Testing the HTTPS links already set the cy.origin() but still show the error that recommand to add cy.origin()

[angie-wei]

Current behavior

I already set the cy.origin() command before cy.visit(), but show the error that said should add cy.origin().
Seems cy.origin() didn't work correctly.

I also tried the cy.request() since I just wanted to make sure the social media links worked, without to check the content of the website was correct. But the Facebook link will return the 400: Bad request code, since the Cypress test browser is in developer mode, so some websites will refuse to access, even if I set my own clientCertificates.

Desired behavior

cy.origin() should work correctly when I want to check if the website can be accessed.

Test code to reproduce

const socialMeadiaLinks = {
  Facebook: 'https://www.facebook.com/NZXT',
  Twitter: 'https://x.com/intent/follow?screen_name=nzxt',
  Instagram: 'https://www.instagram.com/nzxt/',
  YouTube: 'https://youtube.com/nzxtus',
  Twitch: 'https://www.twitch.tv/nzxt',
  Reddit: 'https://www.reddit.com/r/nzxt',
  TikTok: 'https://www.tiktok.com/@nzxt',
  Discord: 'https://discord.gg/NZXT',
};

describe('Verify all links load successfully', () => {
  Object.entries(socialMeadiaLinks).forEach(([name, path]) => {
    it(`should successfully visit the page for ${name}`, () => {
      const url = new URL(path);
      const domain = `${url.protocol}//${url.host}`;
      const restPath = url.pathname + url.search;
      // eslint-disable-next-line @typescript-eslint/no-shadow
      cy.origin(domain, { args: { domain, restPath } }, ({ domain, restPath }) => {
        cy.visit(restPath, { failOnStatusCode: false }).then(() => {
          cy.log(`Visited ${restPath} successfully.`);
        });
      });
    });
  });

  // Object.entries(socialMeadiaLinks).forEach(([name, path]) => {
  //   it.only(`should successfully request the page for ${name}`, () => {
  //     const url = path.startsWith('http') ? path : `${baseUrl}${path}`;
  //     cy.request({
  //       method: 'GET',
  //       url,
  //       failOnStatusCode: false,
  //     }).then(response => {
  //       expect(response.status).to.be.within(
  //         200,
  //         399,
  //         `${name} (${url}) failed`
  //       );
  //     });
  //   });
  // });
});

Cypress Version

13.6.1

Node version

v18.18.0

Operating System

Windows 11

Debug Logs

| originhttps://youtube.com
| visit/nzxtus -> 301: https://www.youtube.com/nzxtus
| Error

The following error originated from your application code, not from Cypress.

> Failed to set a named property 'ntpevasrs' on 'Window': Blocked a frame with origin "https://www.youtube.com" from accessing a cross-origin frame.

This error was thrown by a cross origin page. If you wish to suppress this error you will have to use the cy.origin command to handle the error prior to visiting the page.

cy.origin('https://www.youtube.com', () => {
  cy.on('uncaught:exception', (e) => {
    if (e.message.includes('Things went bad')) {
      // we expected this error, so let's ignore it
      // and let the test continue
      return false
    }
  })
})
cy.visit('https://www.youtube.com/nzxtus')

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the uncaught:exception event.

If I set the YouTube origin link to https://www.youtube.com

| origin https://www.youtube.com
| visit /nzxtus
| SecurityError: Failed to read a named property 'ntpevasrs' from 'Window': Blocked a frame with origin "https://www.youtube.com" from accessing a cross-origin frame.
| SecurityError
The following error originated from your application code, not from Cypress. It was caused by an unhandled promise rejection.

> Failed to read a named property 'ntpevasrs' from 'Window': Blocked a frame with origin "https://www.youtube.com" from accessing a cross-origin frame.

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the uncaught:exception event.

| originhttps://www.reddit.com
| visit/r/nzxt -> 301: https://www.reddit.com/r/nzxt/ -> 302: https://www.reddit.com/r/nzxt/?rdt=49875
| (uncaught exception)Error: ResizeObserver loop completed with undelivered notifications.
| Error
The following error originated from your application code, not from Cypress.

> ResizeObserver loop completed with undelivered notifications.

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the uncaught:exception event.

Other

No response

[jennifer-shehane]

@angie-wei I doubt these types of tests would ever be reliable, given how larger websites actively try to prevent automation from visiting their sites. I wouldn't recommend testing the behavior of other websites.

Also, check out our community chat, it can be helpful for debugging or answering questions on how to use Cypress.