赛普拉斯：使用 trim() 或类似的东西测试 2 个元素是否相同

Question

我有一个测试采用 table 的元素并通过查看它们的内容是否相同来反驳它们，并且成功了：

 cy.compareInputToText(
  'app-myTable table tbody > :nth-child(1) > :nth-child(2) > input',
  'app-myTable table tbody > :nth-child(1) > :nth-child(3)'
 );

 Cypress.Commands.add('compareInputToText', (inputSelector, textSelector) => {
   cy.get(inputSelector)
     .invoke('val')
     .then(currentValue => {
       cy.get(textSelector)
         .should('have.text', currentValue);
     });
 });

问题是当我在要测试的组件中添加更长的 < td > 时，html 编译器会自动换行，因此在测试中它会给我一个错误，因为当它换行时就像添加一个 space...
我用 trim 尝试了各种解决方案，如下所示：

   Cypress.Commands.add('compareInputToText', (inputSelector, textSelector) => {
        cy.get(inputSelector)
        .invoke('val')
        .then(currentValue => {
        cy.get(textSelector)
         .should('have.text', currentValue!.toString.trim());
     });
   });

但是没用。
错误：
错误：断言错误：4000 毫秒后重试超时：预期的文本为“0.2”，但文本为“0.2”

Answer 1

根据你的错误消息，你的页面似乎有一个额外的 space，所以我认为你必须添加一个 space.

而不是修剪

Cypress.Commands.add('compareInputToText', (inputSelector, textSelector) => {
  cy.get(inputSelector)
    .invoke('val')
    .then((currentValue) => {
      cy.get(textSelector).should('have.text', currentValue + ' ')
    })
})

或者只是让文本从两者中删除 spaces 然后断言，例如：

Cypress.Commands.add('compareInputToText', (inputSelector, textSelector) => {
  cy.get(inputSelector)
    .invoke('val')
    .then((currentValue) => {
      cy.get(textSelector)
        .invoke('text')
        .then((text) => {
          expect(text.trim()).to.equal(currentValue.trim())
        })
    })
})

赛普拉斯：使用 trim() 或类似的东西测试 2 个元素是否相同

Cypress: test if 2 elements are the same using trim() or something similar

testing

unit-testing

e2e-testing

cypress

cypress-component-test-runner