赛普拉斯：如何访问不同来源的网址？

Question

我是 cypress 的新手，遇到了一个问题。我将我的基本 URL 设置为我要测试的域，问题是当我想测试在我的基本 URL 站点上登录的能力时，我需要在另一个站点上验证用户，一旦我在站点编号 2 上单击应用我的基本 url 上的页面重新加载，然后我就可以测试网站的其余部分了。

当我尝试从我的测试访问站点 2 时，我收到一个错误

cy.visit() 失败，因为您尝试访问的 URL 属于 不同的起源。

新的 URL 被认为是不同的来源，因为以下 URL 的某些部分不同：

超级域名

您只能在单个测试中使用 cy.visit() 同源 URL。

我读过这个https://docs.cypress.io/guides/guides/web-security.html#Set-chromeWebSecurity-to-false 我已经尝试在 cypress.json 中设置 "chromeWebSecurity": false 但我仍然遇到同样的问题（我在 chrome 中运行）

我有什么遗漏吗？

Answer 1

作为一个临时但可靠的解决方法，我能够在 Cypress Git 问题线程之一中找到这个脚本（我不记得我在哪里找到它，所以我无法链接回它）

将以下内容添加到您的 cypress 命令文件中

Cypress.Commands.add('forceVisit', url => {
    cy.window().then(win => {
        return win.open(url, '_self'); 
      });
});

在你的测试中你可以调用

cy.forceVisit("www.google.com")

Answer 2

你不能！

但是，也许很快就会有可能。见赛普拉斯票#944。

同时，您可以在同一个线程中参考我的lighthearted comment，我在该线程中描述了我在赛普拉斯开发人员致力于多域支持时如何处理该问题：

对于所有关注此的人，我感到你的痛苦！ #944 (comment) 确实带来了希望，所以在我们耐心等待的同时，这是我今天用来编写多域 e2e cypress 测试的一种解决方法。是的，这很可怕，但我希望你能原谅我的罪过。以下是四个简单的步骤：

1. 鉴于每个it 只能有一个cy.visit()，请写多个its。
2. 是的，您的测试现在相互依赖。添加 cypress-fail-fast 以确保在失败时您甚至不会尝试运行其他测试（您的整个 describe 现在是一个单独的测试，在这个病态的替代现实中是有意义的）。
3. 您很可能需要在its 之间传递数据。请记住，我们已经走上了这条疯狂的“错误”道路，所以没有什么可以阻止我们这些顽皮的人。只需使用cy.writeFile() 来保存您的状态（无论您可能需要什么），然后在您的下一个it 开头使用cy.readFile() 来恢复它。
4. 告我。

此时我只关心我的系统是否有测试。如果 cypress 为多个域添加了适当的支持，那就太好了！然后我将重构我的测试。在这种情况发生之前，我将不得不忍受可怕的不可重试测试。总比没有适当的 e2e 测试好，对吧？对吧？

Answer 3

您可以存根从登录站点到基本站点的重定向，并声明被调用的 URL。

基于Cypress tips and tricks，这里有一个自定义命令来执行存根。

登录页面可能使用多种方法之一进行重定向，因此除了提示中给出的replace(<new-url>) 存根之外，我还添加了href = <new-url> 和assign(<new-url>)。

存根命令

Cypress.Commands.add('stubRedirect', () => {
  cy.once('window:before:load', (win) => {
    win.__location = {                           // set up the stub
      replace: cy.stub().as('replace'),
      assign: cy.stub().as('assign'),
      href: null,
    } 
    cy.stub(win.__location, 'href').set(cy.stub().as('href'))
  })

  cy.intercept('GET', '*.html', (req) => {   // catch the page as it loads
    req.continue(res => {
      res.body = res.body
      .replaceAll('window.location.replace', 'window.__location.replace')
      .replaceAll('window.location.assign', 'window.__location.assign')
      .replaceAll('window.location.href', 'window.__location.href')
    })
  }).as('index')
})

测试

it('checks that login page redirects to baseUrl', () => {

  cy.stubRedirect()
  cy.visit(<url-for-verifying-user>)   
  cy.wait('@index')                           // waiting for the window load

  cy.('button').contains('Apply').click()     // trigger the redirect 

  const alias = '@replace'  // or '@assign' or '@href'
                            // depending on the method used to redirect
                            // if you don't know which, try each one
  cy.get(alias)
    .should('have.been.calledOnceWith', <base-url-expected-in-redirect>)
})

Answer 4

您可以手动设置触发页面加载的 window.location.href，这对我有用：

const url = 'http://localhost:8000';
cy.visit(url);

// second "visit"
cy.window().then(win => win.location.href = url);

您还需要将 "chromeWebSecurity": false 添加到您的 cypress.json 配置中。

注意：设置窗口导航不会告诉cypress等待页面加载，需要自己等待页面加载，或者get时使用超时。