How to validate a error message in cypress?

Question

Am new to cypress and been trying to validate an error message that appears on UI after clicking on a button

I've tried the following 3 but neither of them worked

cy.get('pvd-system-message').should('have.text', 'SSN 123456789 not found ')

cy.contains('SSN 123456789 not found').should('be.visible')  

cy.contains('pvd-system-message', 'SSN 123456789 not found ')

Any help would be really appreciated, thank you!

Please check the screenshot here Screenshot of UI and elements

Manuel Abascal · Answer 1 · 2020-12-09T01:37:02.527

1

You can assert the error message in the UI by yielding the element & getting its textContent value like so:

cy.get('.message__bind').then($el => {
   const elText = $el.text(); // gets the text content

   // asserts element contains the right text
   cy.wrap(elText).should('have.text', 'SSN 123456789 not found ');
})

You should read more about it here.

edited Dec 09 '20 at 01:37

answered Dec 08 '20 at 23:02

Manuel Abascal

5,616
5
35
68

@RichardMatsen yes, you are totally right! I have updated my answer. I might add that we should `.trim()` the message before doing the assertion as well. What are your thougths? – Manuel Abascal Dec 09 '20 at 00:00
1

Indeed I noticed that trailing space. It's not a problem for `.contains()`, but. – Richard Matsen Dec 09 '20 at 00:05
1

Thank you for responding @ManuelAbascal - I tried your solution but it gave me "AssertionError: Timed out retrying: Expected to find element: `.message__bind`, but never found it." Richard's solution worked for me: cy.get('pvd-system-message') .shadow() .find('p.message__bind') .contains('SSN 123456789 not found '); Thank you @RichardMatsen – Praveen Dec 09 '20 at 00:20
@Praveen no worries! out of curiosity, even after my edit didn't work? – Manuel Abascal Dec 09 '20 at 00:37
1

Your code is essentially the long way of doing `.contains()` - except there's a typo or something - `elText` (not used) and `$text` (undefined). – Dec 09 '20 at 00:54
@Manuel - ya I tried it after the edit and was seeing the above mentioned error – Praveen Dec 10 '20 at 00:05

score 1 · Accepted Answer · answered Dec 08 '20 at 23:38

You have a #shadow-root in the image, take a look at the .shadow() examples.

One of these should work

cy.get('pvd-system-message')
  .shadow()
  .find('p.message__bind')
  .contains('SSN 123456789 not found ');

cy.get('pvd-system-message')
  .shadow()
  .find('p.message__bind')
  .should('have.text', 'SSN 123456789 not found ');

cy.get('pvd-system-message')
  .shadow()
  .contains('p.message__bind', 'SSN 123456789 not found ');

How to validate a error message in cypress?

2 Answers2