Verifica se l'immagine è valida e caricata con il rapportatore

Question

Sto scrivendo i test usando Protractor (con Cucumber.js, Chai e Chai As Promised, anche se penso che questi dettagli non contengano). Vorrei scrivere un test che controlla se un elemento immagine è valido e caricato, cioè che ha un attributo src e non ha errato durante il caricamento.

Ci sono alcuni nice-looking answers altrove alla domanda di come verificare se un'immagine viene caricata da un browser, tramite l'API DOM. Ma come posso eseguire questo controllo usando l'API di Protractor?

mi aspetto il mio test avrà un aspetto simile:

this.Then(/^I should see the "([^"]*)" image$/, function (imageId, callback) { 
    expect(
     element(by.id(imageId)) 
    ).to.eventually.satisfy(isImageOk).notify(callback); 
}); 

ma non so come implementare la funzione isImageOk tramite l'API goniometro.

Answer 1

È necessario valutare un'espressione JavaScript nel contesto del browser, utilizzando la funzione executeAsyncScript di Protractor.

Ecco il codice da my answer to a similar question:

it('should find all images', function() { 
    browser.executeAsyncScript(function (callback) { 
     var imgs = document.getElementsByTagName('img'), 
      loaded = 0; 
     for (var i = 0; i < imgs.length; i++) { 
      if (imgs[i].naturalWidth > 0) { 
       loaded = loaded + 1; 
      }; 
     }; 
     callback(imgs.length - loaded); 
    }).then(function (brokenImagesCount) { 
     expect(brokenImagesCount).toBe(0); 
    }); 
}); 

La funzione eseguita all'interno del browser restituisce il numero di immagini non caricate.