How to test if an alert message is showing what I wanted it to show using Cypress?

user_14909754 0
Viewed 362

I have password reset page I'd like to perform some tests on. If my current password won't match with my typed current password area it shows a "Password don't match" alert. Here is my alert:

<p-message *ngIf="error" severity="error" id="alert-danger" class="alert alert-danger"  text="{{'password.messages.error' | translate}}" >
    <ng-template pTemplate>
         <div jhiTranslate="password.messages.error" ></div>
    </ng-template>
 </p-message>

What I've tried so far:

cy.get('[severity="error"] > .p-inline-message > .p-inline-message-text')
  .should("have.text","password.messages.error")

But I get an error in cypress saying "expected password.messages.error but the text was Passwords don't match!. Which is understandable it takes directly whatever text was inside my element. Then I've tried:

cy.get('[severity="error"] > .p-inline-message > .p-inline-message-text')
  .invoke('attr','jhiTranslate')
  .should('eq','password.messages.error')

this gives me "expected undefined to equal password.messages.error"

What I'm doing wrong and what else should I try here?

cypress
2 Answers

Just change the text Cypress is checking,

cy.get('[severity="error"] > .p-inline-message > .p-inline-message-text')
  .should("have.text", "Passwords don't match!")

The HTML you show above is the source code, but AngularJS has looked up the variable password.messages.error and output the string contained in that variable.

It then removes jhiTranslate from the element, so you cannot test it at runtime (in the browser).

You can see what the runtime HTML is by right-clicking on an element and inspecting it in the dev-tools.

user_169977070

You can do something like:

cy.get('p-message#alert-danger').within(() => {
  cy.get('div').should('have.attr', 'jhiTranslate', 'password.messages.error')
})
user_45712710
Related