Check if value in the text input is visible completely or not with Cypress

user_1775763 0
Viewed 1029

I want to write a Cypress test which checks if the inserted value in text box is completely visible or not. For example picture below passes the test because all 10 inserted characters are visible:

Image passing the test since all the 10 characters are visible

But the next picture fails the test, because only 6 of 10 inserted characters are visible:

Image failing the test since only 6 of 10 inserted characters are visible

Any idea how to implement it with Cypress?

Note that in both cases the in put has the same value (1234567890), only in the second case, it is not visible because the input does not have enough space.

e2e-testing cypress frontend javascript
1 Answers

Use regular expression to validate a ten-digit number

See the script down below:

1.For 10 digit number:

cy.get('#<class-name-of-text-input>').contains(/^\d{10}$/)

2.For 10 digit number containing all 0-9 digits

cy.get('#<class-name-of-text-input>').contains(/^(?!.*(.).*\1)\d{10}$/)

Check Regexr to validate the expression.

user_119452900
Related