運行非常基本的賽普拉斯測試時出現跨源錯誤。將 cromeWebSecurity 設置為 false 無效

Question

曾經與 Cypress.io 合作過，但完全忘記了如何解決他們的交叉原點錯誤。 基本上這段代碼給我錯誤：

context('searching example',() => {
    beforeEach('open google',() => {
    //  Cypress.config('chromeWebSecurity', true);
        cy.visit('https://google.com');
    })
    describe('google test example', ()=>{
            it('search for death star',() => {
        
        cy.get("button[role='link']").click()
        
        
    })
    })

})

我得到的錯誤是：

CypressError
Cypress detected a cross origin error happened on page load:

  > Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame.

Before the page load, you were bound to the origin policy:

  > https://google.com

A cross origin error happens when your application navigates to a new URL which does not match the origin policy above.

A new URL does not match the origin policy if the 'protocol', 'port' (if specified), and/or 'host' (unless of the same superdomain) are different.

Cypress does not allow you to navigate to a different origin URL within a single test.

You may need to restructure some of your test code to avoid this problem.

Alternatively you can also disable Chrome Web Security in Chromium-based browsers which will turn off this restriction by setting { chromeWebSecurity: false } in cypress.json.Learn more

我試過將它添加到 cypress.json 無濟於事


{"chromeWebSecurity": false}

Answer 1

永久性的，它不是： feat: Multi-domain Support #18075

安裝為預發布使用

npm install https://cdn.cypress.io/beta/npm/9.6.0/win32-x64/feature-multidomain-8f7cc74ba942ead88ab09d632630c1d14679abfb/cypress.tgz

來自 Gleb Bahmutov 的視頻Visit Two Domains In the Same Cypress Spec

這是該版本的一些示例代碼。

它看起來像你描述的相同場景。

示例頁面

<body>
  <div>
    Go to different domain:
    <a data-cy="multi_domain_secondary_link"
        href="http://www.foobar.com:4466/multi_domain_secondary.html">http://www.foobar.com:4466/multi_domain_secondary.html</a>
  </div>
</body>

測試

// @ts-ignore / session support is needed for visiting about:blank between tests
describe('multi-domain', () => {
  beforeEach(() => {
    cy.visit('/multi_domain.html')
    cy.get('a[data-cy="multi_domain_secondary_link"]').click()
  })

  it('tries to find an element that doesn\'t exist and fails', () => {
    cy.switchToDomain('http://foobar.com:4466', () => {
      cy.get('#doesnotexist', {
        timeout: 1000,
      })
    })
  })
})

Answer 2

您得到的錯誤是 cypress 的永久權衡，您可以從cypress docs中閱讀更多相關信息。 簡而言之，您不能在同一測試中使用來自不同來源的 url。

給定以下 URL，與https://www.cypress.io相比，它們都具有相同的來源

https://cypress.io
https://docs.cypress.io
https://example.cypress.io/commands/querying

但是，與https://www.cypress.io相比，以下 URL 的來源不同。

http://www.cypress.io (Different protocol)
https://docs.cypress.io:81 (Different port)
https://www.auth0.com/ (Different host of different superdomain)

解決方案：嘗試將您的測試分成兩個不同的測試，如下所示：

it('navigates', () => {
  cy.visit('https://apple.com')
})

// split visiting different origin in another test
it('navigates to new origin', () => {
  cy.visit('https://google.com') // yup all good
})

運行非常基本的賽普拉斯測試時出現跨源錯誤。將 cromeWebSecurity 設置為 false 無效

問題描述

2 個解決方案

解決方案1
2 2022-03-26 20:25:27

解決方案2
0 2022-03-25 12:43:07

運行非常基本的賽普拉斯測試時出現跨源錯誤。 將 cromeWebSecurity 設置為 false 無效

問題描述

2 個解決方案

解決方案1 2 2022-03-26 20:25:27

解決方案2 0 2022-03-25 12:43:07

運行非常基本的賽普拉斯測試時出現跨源錯誤。將 cromeWebSecurity 設置為 false 無效

解決方案1
2 2022-03-26 20:25:27

解決方案2
0 2022-03-25 12:43:07