赛普拉斯e2e测试-如何解决跨源错误？

Question

我正在测试一个集成了Gmail，Slack，Dropbox等的Web应用程序。我正在尝试使用Cypress.io编写端对端测试，以验证身份验证流是否正常运行。赛普拉斯（Cypress）限制了我浏览我应用程序域之外的内容，并给了我一个跨源错误。赛普拉斯（Cypress）的文档说，测试不应该涉及在应用程序外部进行导航。但是测试我的应用程序的全部目的是确保这些外部身份验证流正常运行。

文档还说您可以在cypress.json文件中添加“ chromeWebSecurity”：false来解决此限制。我已经做到了，但仍然遇到跨原点错误（这是我问题的核心。理想情况下，我会绕过此限制）。

我尝试过赛普拉斯的单点登录示例。https://github.com/cypress-io/cypress-example-recipes#logging-in---单点登录 我无法使其工作，并且它的代码比我认为的要多得多。

我已经在github中对此线程发表了评论，但是还没有任何回应。

完整的错误消息：

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

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

    Before the page load, you were bound to the origin policy:
      > https://example.com

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

This typically happens in one of three ways:

1. You clicked an <a> that routed you outside of your application
2. You submitted a form and your server redirected you outside of your 
application
3. You used a javascript redirect to a page outside of your application

Cypress does not allow you to change superdomains 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 which will turn 
off this restriction by setting { chromeWebSecurity: false } in your 
'cypress.json' file.

https://on.cypress.io/cross-origin-violation

Answer 1

我的“cypress.json”文件中的设置{ "chromeWebSecurity": false }对我有用

Answer 2

Bill Mayo 想要运行 Cypress 单点登录示例应用程序，但它抛出了原始错误。

使示例工作与命令无关cy.origin()，以下是运行此示例的步骤。

更新链接 2024 年 1 月 5 日

此示例的链接已更改，现在为https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/logging-in__single-sign-on

让它发挥作用

• 下载存储库（整个示例存储库）并在项目根目录yarn或npm i.

• package.json本节对 Node 版本有限制

  "engines": {
    "node": "^18.16.0"
  },
  

  但当前 Node 的 LTS 版本是20.10.0，所以如果像我一样你有那个版本，请删除package.json.

• 切换到logging-in__single-sign-on子文件夹并编辑其中的脚本package.json

• 该start脚本似乎不起作用，身份验证服务器未启动（可能是 Windows 问题）

• 添加新脚本以分别启动应用程序服务器和身份验证服务器：

  "scripts": {
    ...
    "start:app:server": "node app_server.js --port 7074",
    "start:auth:server": "node auth_server.js --port 7075",
  

• 每次运行时运行三个终端会话

  • yarn start:app:server
  • yarn start:auth:server
  • yarn cypress:open

• 运行该项目中的规范，它完成并通过

单点登录测试示例代码

由于链接可能会再次更改，这里是简短的测试代码

const _ = Cypress._
const url = require('url')

describe('Logging In - Single Sign on', function () {

  Cypress.Commands.add('loginBySingleSignOn', (overrides = {}) => {
    Cypress.log({name: 'loginBySingleSignOn'})
    const options = {
      method: 'POST',
      url: 'http://auth.corp.com:7075/login',
      qs: {
        redirectTo: 'http://localhost:7074/set_token',
      },
      form: true,
      body: {
        username: 'jane.lane',
        password: 'password123',
      },
    }
    _.extend(options, overrides)
    cy.request(options)
  })

  context('Use redirectTo and a session cookie to login', function () {
    it('is 403 unauthorized without a session cookie', function () {
      cy.visit('/dashboard')
      cy.get('h3').should('contain', 'You are not logged in and cannot access this page')
      cy.url().should('include', 'unauthorized')
    })

    it('can authenticate with cy.request', function () {
      cy.getCookie('cypress-session-cookie').should('not.exist')
      cy.loginBySingleSignOn().then((resp) => {
        expect(resp.status).to.eq(200)
        expect(resp.body).to.include('<h1>Welcome to the Dashboard!</h1>')
      })
      cy.getCookie('cypress-session-cookie').should('exist')
      cy.visit('/dashboard')
      cy.get('h1').should('contain', 'Welcome to the Dashboard')
    })
  })

  context('Manually parse id_token and set on local storage to login', function () {
      it('knows when there is no session token', function () {
        cy.visit('/')
        cy.get('#main').should('contain', 'No session token set!')
      })

      const responseToToken = (resp) => {
        const uri = url.parse(resp.redirectedToUrl, true)
        expect(uri.query).to.have.property('id_token')
        return uri.query.id_token
      }

      it('can parse out id_token and set on local storage', function () {
        cy.loginBySingleSignOn({ followRedirect: false })
        .then(responseToToken)
        .then((id_token) => {
          cy.intercept('/config').as('getConfig')
          cy.visit('/', {
            onBeforeLoad (win) {
              win.localStorage.setItem('id_token', id_token)
            },
          })

          cy.wait('@getConfig')
            .its('response.body')
            .should('deep.eq', {foo: 'bar', some: 'config', loggedIn: true})

          cy.get('#main')
            .invoke('text')
            .should((text) => {
              const json = JSON.parse(text)
              expect(json).to.deep.eq({foo: 'bar', some: 'config', loggedIn: true})
          })
        })
      })

      describe('Log in once for speed', () => {
        before(function () {
          cy.loginBySingleSignOn({ followRedirect: false })
            .then(responseToToken)
            .as('token') // saves under "this.token"
        })

        beforeEach(function () {
          cy.on('window:before:load', (win) => {
            win.localStorage.setItem('id_token', this.token)
          })
        })

        it('opens page as logged in user', () => {
          cy.visit('/')
          cy.contains('"loggedIn":true')
        })

        it('config returns logged in: true', function () {
          cy.intercept('/config', (req) => {
            delete req.headers['if-none-match']
          }).as('getConfig')

          cy.visit('/')

          cy.wait('@getConfig').then((xhr) => {
            expect(xhr.request.headers, 'request includes token header')
              .to.have.property('x-session-token', this.token)

            expect(xhr.response.body, 'response body')
              .to.deep.equal({foo: 'bar', loggedIn: true, some: 'config'})
          })
        })
      })
    }
  )
})

Answer 3

对于这些常见情况，有一些简单的解决方法：\nDon\xe2\x80\x99t 单击<a>测试中导航到应用程序外部的链接。无论如何，这可能不值得测试。您应该问自己：单击并转到另一个应用程序有什么意义？您可能只关心 href 属性是否符合您的期望。所以对此做出断言。您可以在我们的 \xe2\x80\x9cTab 处理和链接\xe2\x80\x9d 示例配方中查看有关测试锚链接的更多策略。

\n\n

您正在测试使用单点登录 (SSO) 的页面。在这种情况下，您的 Web 服务器可能会在超级域之间重定向您，因此您会收到此错误消息。您可以通过cy.request()自己手动处理会话来解决此重定向问题。

\n\n

如果您发现自己陷入困境并且无法\xe2\x80\x99 解决这些问题，您可以在 cypress.json 文件中进行设置。但在这样做之前，您应该真正理解并阅读这里的推理。

\n\n

// cypress.json\n\n{\n  "chromeWebSecurity": false\n}\n

\n