柏树中的应用程序重定向，外部没有答案

【问题标题】：App in cypress redirects, outside does not柏树中的应用程序重定向，外部没有
【发布时间】：2021-06-11 07:06:10
【问题描述】：

我正在尝试使用 Cypress 为这个应用程序编写端到端测试：https://app.gotphoto.com/admin/auth/login

当我从浏览器访问上述网址时，会按预期显示登录表单。

当我通过 Cypress 访问上述网址时：

cypress 首先导航到https://app.gotphoto.com/admin/auth/login
之后我立即被重定向到https://app.gotphoto.com/__/ 并且登录表单没有显示

这是赛普拉斯内部的两张截图：

我的问题是：为什么它在我的浏览器中的运行方式与在 Cypress/Cypress 的浏览器中的运行方式之间存在差异？

我使用的浏览器是 Chrome 89，无论是否使用 Cypress。

我正在运行的整个测试是这样的：

describe('login screen', () => {
  it('logs in', () => {
    cy.visit('/admin/auth/login');
  });
});

带有 cypress.json：

{
  "baseUrl": "https://app.gotphoto.com"
}

我使用上述配置创建了一个repo，因此很容易复制。

【问题讨论】：

在我的机器上重现了同样的行为，发现相关问题仅供参考github.com/cypress-io/cypress/issues/4131
@EvgeniiBazhanov 感谢您链接问题，不幸的是我没有找到解决我的问题的方法

标签： javascript redirect cypress e2e-testing e2e

【解决方案1】：

An example of logging in。最终，这是一个有点笨拙的解决方案，因为它在第一次尝试时就失败了；但是，它适用于任何后续尝试。

将以下内容添加到您的 command.js

// -- Visit multiple domains in one test
Cypress.Commands.add('forceVisit', url => {
  cy.window().then(win => {
    return win.open(url, '_self');
  });
});

login.spec.js

describe('login screen', () => {
  it('logs in', {
    retries: {
      runMode: 1,
      openMode: 1
    }
  }, () => {
    cy.forceVisit('https://app.gotphoto.com/admin/auth/login');
    cy.get('#username').should('exist');
  });
});

截图：

【讨论】：

能否请您查看赏金？

【解决方案2】：

https://app.gotphoto.com/__/ 的 /__/ 部分称为 clientRoute，是 Cypress 的内部配置项。

您可以在cypress.json 配置文件中将其关闭

{
  ...
  "clientRoute": "/"
}

这有效地保留了您的原始网址并允许页面正确加载。

cy.visit('https://app.gotphoto.com/admin/auth/login')
cy.get('input#username', { timeout: 10000 }).type('admin') // long timeout
                                                           // wait for page to load
cy.get('input#password').type('password')

cy.intercept('POST', 'api.getphoto.io/v4/auth/login/user').as('user')
cy.contains('button', 'Submit').click()

cy.wait('@user').then(interception => {
  // incorrect credentials
  expect(interception.response.body.detail).to.eq('Login failed!')
})

我不确定更改 clientRoute 是否有任何不良副作用，如果我发现会发布更多信息。

【讨论】：

【解决方案3】：

为什么它在我的浏览器中的运行方式与在 Cypress/Cypress 的浏览器中的运行方式存在差异？

您的普通浏览器等待 XHR 请求完成并呈现由您在其中编写的任何 js 魔法创建的最终输出，但 cy.visit 不应该等待内部的那些 XHR / AJAX 请求。它得到 200 作为响应并继续前进。如果你在cy.visit 旁边添加一个cypress 命令，比如cy.get('h1')，你会注意到这个命令在cy.visit 之后立即运行，然后你的XHR 请求就被解析了。

这里的一种解决方法是使用cy.intercept，例如（Cypress 6.8.0，Chrome 89）：

describe("login screen", () => {
  it("logs in", () => {
    cy.intercept({
      method: "GET",
      url: "admin/version/master/index.html"
    }).as("indexHTML"); // Similarly add other internal xhr requests

    cy.visit("/admin/auth/login");

    cy.wait("@indexHTML").then(interception => {
      expect(interception.response.statusCode).to.be.eq(200);
    });
  });
});

输出：它基本上会等待您的内部 XHR 请求完成，并允许您在请求和响应解决后进行处理。

此问题将帮助您进一步调试：https://github.com/cypress-io/cypress/issues/4383

另外，这个/__/ 没有参与渲染空白页 IMO。

【讨论】：

通常你可以通过cy.get()加载页面上的一个元素来达到同样的效果，如果页面加载很慢，可以设置一个合适的超时时间。不幸的是，没有多少等待可以解决这个问题。
我试过等待，没有解决问题。我猜他们将不得不使用特定于他们正在使用的框架的东西。例如，对于 react cypress 有 github.com/cypress-io/cypress/tree/master/npm/react
确实，cy.wait("@indexHTML") 正在等待，但不起作用。

【解决方案4】：

重定向到__/ 听起来很熟悉我前段时间偶然发现的一个问题。我在 Cypress 的 issues 中发现这条评论很有帮助。

那么您是否已经尝试使用配置选项experimentalSourceRewriting？在您的cypress.json 中，它可能如下所示：

{
    "baseUrl": "https://app.gotphoto.com"
    "experimentalSourceRewriting": true
}

因为它被标记为experimental，我建议仔细测试它，但也许它会有所帮助。我希望是最好的！ ?

【讨论】：