6

我正在尝试使用赛普拉斯为此应用程序编写端到端测试：https://app.gotphoto.com/admin/auth/login

当我从浏览器访问上述 url 时，会显示一个登录表单，正如预期的那样。

当我通过赛普拉斯访问上述网址时：

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

这是赛普拉斯内部的两个屏幕截图：

在此处输入图像描述 在此处输入图像描述

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

我使用的浏览器是 Chrome 89，无论在有和没有赛普拉斯的情况下运行。

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

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

使用 cypress.json：

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

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

4

4 回答 4

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如果我发现它会发布更多信息。

于 2021-03-21T23:24:02.103 回答
0

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

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

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

由于它被标记为实验性的，我建议仔细测试它，但也许它会有所帮助。我希望是最好的！

于 2021-03-16T21:41:38.250 回答
0

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

将以下内容添加到您的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');
  });
});

截图： 在此处输入图像描述

于 2021-03-22T06:20:40.467 回答
0

为什么它在我的浏览器中的运行方式与在赛普拉斯/赛普拉斯的浏览器中的运行方式有区别？

您的普通浏览器等待 XHR 请求完成并呈现由您在其中编写的任何 js 魔法创建的最终输出，但cy.visit不应该等待内部的那些 XHR / AJAX 请求。它得到 200 作为响应并继续前进。如果您在 旁边添加一个 cypress 命令cy.visit，例如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 无关。

于 2021-03-20T21:19:03.257 回答