Impossible de tester l'élément de message d'erreur de validation en utilisant protractor

Question

J'essaie d'écrire un test e2e pour la connexion, mais j'ai un problème avec la vérification de ce message d'erreur, essayé plusieurs localisateurs CSS, mais cela n'a jamais fonctionné.

Screenshot:

Message d'erreur:

Failed: Aucun élément trouvé avec le localisateur: Par (sélecteur de css, * [id = "validation"])

Il semble que le message d'erreur ne montrera pas quand le test e2e fonctionne en chrome.

Mon code:

//login.po.ts 
 

 
validationMessage() { 
 
     return element(by.id('validation')); 
 
    } 
 

 
//login.e2e-spec.ts 
 

 
it('should not login with wrong email and password',() => { 
 
     page.navigateTo(); 
 
     page.inputLogin().sendKeys(fakeLogin); 
 
     expect(page.buttonSubmit().isEnabled()).toBe(false); 
 
     page.inputPassword().sendKeys(fakePass); 
 
     expect(page.buttonSubmit().isEnabled()).toBe(true); 
 
     page.buttonSubmit().click().then(() => { 
 
      browser.wait(protractor.ExpectedConditions.visibilityOf(page.validationMessage()), 5000); //If the error span takes time to be visible, use wait() function 
 
      expect(page.validationMessage().getText()).toEqual('User not found'); 
 
     });

Mon code HTML:

<div *ngIf="!submitted"> 
 
    <h1 class="inner-main-title">Login</h1> 
 
    <form novalidate (ngSubmit)="login()" [formGroup]="signinForm"> 
 
     <md-input-container> 
 
      <input mdInput placeholder="E-Mail" formControlName="email" type="email" required/> 
 
     </md-input-container> 
 
     <app-control-messages [control]="signinForm.controls.email"></app-control-messages> 
 
     <md-input-container> 
 
      <input mdInput placeholder="Password" formControlName="password" type="password"/> 
 
     </md-input-container> 
 
     <div *ngIf="formErrors" class="validation-message"> 
 
      <h3 class="error-message" [innerHTML]="formErrors" id="validation"></h3> 
 
     </div> 
 
     <div class="link"><a routerLink="./account-recovery">Forgot password?</a></div> 
 
     <button id="login-button" class="cta-green" type="submit" md-raised-button [disabled]="!signinForm.valid" 
 
       color="primary">login 
 
     </button> 
 
    </form> 
 
</div> 
 
<div *ngIf="submitted"> 
 
    <h1 class="inner-main-title">Please wait...</h1> 
 
    <md-spinner></md-spinner> 
 
</div>

Answer 1

déjà résolu.

Problème était dans le rapporteur qu'il n'a pas attendu que la page soit complètement chargée.

browser.waitForAngular(); attendez que la page redirige pas complètement charger son contenu. Ajout de browser.sleep (1000) résolu le problème. Différentes situations nécessitent un temps d'attente beaucoup plus long.

Voici le code de travail:

it('should not login with wrong password',() => { 
    page.navigateTo(); 
    page.inputLogin().sendKeys(fakeLogin); 
    expect(page.buttonSubmit().isEnabled()).toBe(false); 
    page.inputPassword().sendKeys(fakePass); 
    expect(page.buttonSubmit().isEnabled()).toBe(true); 
    page.buttonSubmit().click().then(() => { 
     browser.waitForAngular(); 
     browser.sleep(1000); 
     expect(page.validationMessage().isDisplayed()).toBe(true); 
    }); 

espère que cela aide quelqu'un d'autre.