ReactJS + Cypress E2E 测试

Posted 2023-03-23

【中文标题】ReactJS + Cypress E2E 测试

【英文标题】：ReactJS + Cypress E2E testing

【发布时间】：2019-08-22 12:54:42

【问题描述】：

对于任何有 React + Cypress 经验的人的快速问题 - 编写我的第一组 E2E 测试，这是困扰我的问题：

cy.visit('http://movinito.docker.localhost:3000/company/subcontractors');

有效，但是

cy.visit('/company/subcontractors');

没有按预期工作（登录后将我重定向到仪表板，并在我尝试断言包含“分包商”的路径名时停留在那里）。

我在 cypress.json 中的 baseUrl 是

"baseUrl": "http://react_frontend.movinito.docker.localhost:3000"

而且它通常有效（如果您怀疑是这样）。

我想使用更短、更好的版本 cy.visit('/company/subcontractors'); 而不是 baseUrl 的冗长的重新输入...

在我使用的 .visit 之前添加它可能很重要

cy.request('POST', 'http://movinito.docker.localhost/user/login?_format=json', name,pass);

[成功]登录...正如我所说，整个事情都有效，但我无法使用 baseUrl，必须使用 .visit 命令和完整的基于环境的 url...

这是 [工作] 完整测试代码

   describe('Subcontractors section', ()=> 
        it('renders properly', ()=> 
            const  name, pass  = name: '[e-mail]', pass: '123#456'

            cy.request('POST', 'http://movinito.docker.localhost/user/login?_format=json', 
                name,
                pass
            );

            cy.visit('http://movinito.docker.localhost:3000/company/subcontractors');
//    
// I want to replace the above line with cy.visit('/company/subcontractors')
//
            cy.location('pathname').should('include', '/company/subcontractors');
            cy.get('[data-cy=page-title]').should('have.text', 'Subcontractors');
        )
    );

【问题讨论】：

如果我错了，请纠正我：您提到这个有效：'http://movinito.docker.localhost:3000/company/subcontractors' 但这个无效：'http://react_frontend.movinito.docker.localhost:3000' 您正在使用两个不同的 URL。如果将第二个更改为：'http://movinito.docker.localhost:3000'

会发生什么

让我重新表达我的意思：我希望 baseUrl 与我传递给 cy.visit 函数的字符串连接。仅使用 cy.visit('/company/subcontractors') 会使我的测试卡在 dasbhoard 上，因为像这样传递完整的 url -> cy.visit('movinito.docker.localhost:3000/company/subcontractors') 按预期工作....我登录在并被重定向到我的分包商页面。为什么这里的行为有所不同？我想使用 cy.visit('/company/subcontractors') 所以我可以根据环境切换 baseUrl - 我不想每次都输入完整的 url。

【参考方案1】：

嗯，我阅读了有关 visit() 和 request() 的文档，这应该可以：

describe('Subcontractors section', ()=> 
  it('renders properly', ()=> 
    cy.visit(
      url: 'http://movinito.docker.localhost/user/login?_format=json',
      method: 'POST',
      body 
        name,
        pass
      
    )

    cy.visit('/company/subcontractors')
    cy.location('pathname').should('include', '/company/subcontractors')
  )
);

// cypress.json

  "baseUrl": "http://react_frontend.movinito.docker.localhost:3000"

【讨论】：

谢谢，但问题出在服务器和重定向上...react_frontend.movinito.docker.localhost:3000 和 movinito.docker.localhost:3000 在我的机器上是同义词，但 cypress 不这么认为，所以我只是删除了“react_frontend " 有点，它开始工作了......不过我已经接受了你的回答 - 谢谢你的意见！

检查，所以我们基本上回到了我昨天评论的重点:)。至少解决了。