material-ui / formik（反应应用程序）上的柏树类型输入文本测试失败

Question

我正在用 cypress 测试登录提交功能。

登录表单是 built with material-ui 和 formik。

当我运行测试时，我无法在 Input 上获得 'data-testid' 道具。

测试代码

describe('user', () => {
  beforeEach(() => {
    cy.visit('http://localhost:9080');
  });

  it('can visit login app', () => {
    cy.contains('login').click();
    cy.url().should('include', 'login');
    cy.get('[data-testid=username]').type('yuchung');
    cy.get('[data-testid=password]').type('yuchung1234');
    cy.get('button[type=submit]').click();

    cy.contains('logout');
  });
});

错误信息

示例代码

code sample

Answer 1

如 input docs 中所述，您必须像这样将带有 inputProps 属性的数据测试属性传递到输入字段中：inputProps={{data-testid: 'username'}}.

这将使您可以使用正在使用的 get 函数访问输入字段，并将文本实际输入到输入中。

希望这对您有所帮助。编码愉快。

Answer 2

我会尝试使用反引号代替。看看是不是这样..

cy.get(`[data-testid="username"]`).type('yuchung');

但如果我没记错的话，formik 会为 Dom 提供输入的唯一名称。您可能可以改用它们。使用 cy.log 打印 formik 输入的值。

或者你也可以，我查看了DOM，手动查看是否打印了这些值..

material-ui / formik（反应应用程序）上的柏树类型输入文本测试失败

cypress type input text test fails on material-ui / formik (react app)

reactjs

material-ui

cypress

formik

测试代码

错误信息

示例代码