Comment attendre jusqu'à ce que l'image de chargement de page disparaisse dans Protractor sur une page non-angulaire

Question

Sur un site non-angulaire lorsque je clique sur un bouton radio, le chargement de page gif apparaît. Dans le test Protractor, je veux attendre jusqu'à ce que ce chargeur disparaisse, puis vérifier un autre élément.

HTML du chargeur (qui est toujours présent):

<div class="loader" style="display: none;"> 
    <div id="loader"> 
     <img src="/img/loading.gif"> 
    </div> 
    <div class="totalMaskForLoader"></div> 
</div> 

Qu'est-ce que je l'ai fait dans le test:

 ... 
     // click on balance dropdown 
     page.sortByBalanceSelector.click(); 

     browser.wait(function() { 
        // return a boolean here. Wait for spinner to be gone. 
        return !browser.isElementPresent(by.css(".loader")); 
       }, 20000); 

     // compare to the starting player's username 
     expect(page.hasText(page.usernameCellButton)).not.toContain(startingUsername); 

Le problème est que je reçois toujours

Wait expiré après 20009ms

Comment puis-je attendre que le chargeur gif disparaisse?

Answer 1

Il y a un invisibilityOf intégré dans la condition prévue spécifiquement pour ce cas d'utilisation:

page.sortByBalanceSelector.click(); 

var loader = element(by.id("loader")); 
var EC = protractor.ExpectedConditions; 

browser.wait(EC.invisibilityOf(loader), 5000); 

Vous pouvez également utiliser stalenessOf ce qui signifie essentiellement « non présent ».

---

Le problème avec votre approche actuelle est que vous appliquez le « non » à la promesse retournée par isElementPresent() et, depuis une promesse est toujours truthy, vous obtenez toujours « faux » à la suite d'une condition d'attente, d'où l'erreur de timeout.