赛普拉斯 - 检查用户登录成功或失败

Question

在我的 Cypress 代码中，我想根据后端的响应来决定操作。请注意，我不是在模拟服务器，而是想点击并从 API 服务器获取响应，并根据响应创建下一个命令。

    cy.visit("http://localhost:3000/login");
    cy.get(".cookieConsent button").click();
    cy.get("#email-input").type(userLoginDetail.email);
    cy.get("#password-input").type(userLoginDetail.password);
    cy.get("form").submit();
    cy.wait(3000);
    // logic being it user is redirected to homepage, then login was successful. Not happy with this O(
    if (cy.url() === "http://localhost:3000/") {
      console.log("eeeeeeeeeee");
    } else {
      console.log(
        "aaaaaaaaaaaaaaaaaaa ");

我如何检查表单提交的响应并基于此使用 if 条件。

Answer 1

我认为问题在于，您想进行条件测试。使用 cy.wait() 是不好的做法，甚至在文档本身中也提到了。

Anti-Pattern

You almost never need to wait for an arbitrary period of time. There are always better ways to express this in Cypress.

您不应根据响应执行不同的操作。在赛普拉斯测试中，您应该事先知道您的操作结果。

如果用户输入了无效的电子邮件，您可能希望表单提交失败并显示错误。

cy.get("#email-input").type('invalid_email.com');
cy.get("#password-input").type(userLoginDetail.password);
cy.get("form").submit();
cy.get(".email-error").should('be.visible');

在这种情况下，cypress 将检查它们 DOM 直到它发现错误或命中 cypress 配置中的 defaultCommandTimeout。

另一方面，如果您想检查用户是否被正确重定向，您只需在 success/redirected 页面上检查 div。

cy.get("#email-input").type('valid@email.com');
cy.get("#password-input").type(userLoginDetail.password);
cy.get("form").submit();
cy.get(".success-page").should('be.visible');

但是，如果您仍然决定根据服务器响应执行操作，cypress 使您能够以声明方式cy.wait() 请求及其响应。

cy.server()
cy.route({
  method: 'POST',
  url: '/myApi',
}).as('apiCheck')
cy.visit('/')
cy.wait('@apiCheck').then((xhr) => {
  assert.isNotNull(xhr.response.body.data, 'api call successfull')
})

赛普拉斯 - 检查用户登录成功或失败

Cypress - Check a user logs in successfully or fails

javascript

testing

e2e-testing

cypress