reactjs - Cypress 找不到数据测试标识

Question

我是第一次进行端到端测试和使用 Cypress。我有一个使用 Nextjs 和 Material UI 制作的应用程序，我想在其中为个人资料页面编写测试。我有以下测试来检查用户名是否显示:

it("Username",()=>{
        cy.wait(10000)
        cy.get('[data-testid="username"]',{withinSubject:null}).should('exit'); // getting error on this command.
        cy.contains('@').should('exit')
      })

但 Cypress 无法找到 data-testid="username" 即使我已将 data-testid="username" 设置为将显示的组件用户名:

{loading ? (
                <Skeleton variant="text" width={100} animation="wave" />
              ) : (
                <span className="text-sm text-grey-normal" data-testid="username">
                  @{userInfo?.get("spectUsername")}
                </span>
              )}

我也尝试过这个 issue 中包含的方法来解决问题，但这对我也不起作用。我已经搜索了很多有关此问题的信息，但找不到可行的解决方案。我做错了什么？如何让它发挥作用？是否有任何模块我忘记导入以使其正常工作？

Answer 1

你必须在 should 方法中使用 exist，如下所示

cy.get('[data-testid="username"]',{withinSubject:null}).should('exist');

否则你可以使用大于函数的长度来知道是否输入了用户名。

cy.get('[data-testid="username"]').should(($lis) => {              
 expect($lis).to.have.length.greaterThan(0);
});