断言输入元素包含赛普拉斯中的特定值

Question

我试图断言以下内容propSizeSel是我的数字输入元素的 CSS 选择器：

cy.get(propSizeSel).clear().type(100)
    .should('contain', 100);

不幸的是，尽管输入元素接受值 100，但此断言仍以下列方式失败。

如您所见，输入元素已按预期接受值 100：

为什么我似乎无法做出这个简单的断言？

Answer 1

请在单引号中尝试使用 100，并且在断言中，请使用should('have.value', '100')而不是包含；

cy.get('propSizeSel').clear().type('100').should('have.value', '100');

或尝试使用断言 promise

cy.get('propSizeSel').clear().type('100').invoke('val')
    .then(val=>{    
      const myVal = val;      
      expect(myVal).to.equal('100');
    })

Answer 2

至于 2022 年，赛普拉斯提供了多种方法来断言数字输入值、整个字符串匹配、子字符串、正则表达式或进行更复杂的自定义断言。方法如下。

// Assume we have an input with `.my-input-class` class and the value `My input value` 
// in the markup.

// Then we find it (NB: do not forget getting the single one here e.g. with `.first()`
// as there can be many of the selected elements returned by `cy.get()`)
cy.get('.my-input-class).first()
    // This gets the input value for further assertions
    .invoke('val')
    // This would succeed if we had a number input with value `100`
    .should('have.value', 100)
    // Again for number
    .should('be.equal', 100)
    // And again, now with "greater then or equal" assertion
    .should('be.at.least', 100)
    // Now for strings, this matches the entire string
    .should('contain', 'My input value')
    // This matches the substring
    .should('include', 'My input')
    // Another substring match
    .should('have.string', 'My input')
    // Regex is here
    .should('match', /My/)
    // Here you can make any complex custom assertions JavaScript allows
    .then(($valueString)=>{
        console.log($valueString)
        if (!$valueString.includes('My')) {
            throw new Error('My custom assertion fails the test')
        }
    })

您可以通过 Cypress 在家庭内部或外部做出许多字符串断言should。请参阅官方文档。