Comment faire une capture d'écran de l'élément DOM en utilisant intern js?

Question

J'utilise intern.js pour tester une application Web. Je peux exécuter des tests et créer des captures d'écran en cas d'échec. Je veux créer une capture d'écran pour un élément spécifique afin de faire des tests de régression CSS en utilisant des outils comme resemble.js. C'est possible? Comment puis-je faire? Je vous remercie!

Answer 1

Tiré de here.

Answer 2

Il n'y a pas de façon intégrée de faire cela avec Intern. La méthode takeScreenshot appelle simplement le service de capture d'écran de Selenium, qui renvoie une capture d'écran de la page entière en tant que PNG codé en base 64. Le takeScreenshot du stagiaire le convertit en tampon de nœud avant de transmettre le résultat à l'utilisateur.

Pour rogner l'image, vous devrez utiliser une bibliothèque externe ou un outil tel que png-crop (notez que je n'ai jamais utilisé ceci). Le code pourrait ressembler à ce qui suit (non testé):

var image; 
var size; 
var position; 

return this.remote 
    // ... 
    .takeScreenshot() 
    .then(function (imageBuffer) { 
     image = imageBuffer; 
    }) 
    .findById('element') 
    .getSize() 
    .then(function (elementSize) { 
     size = elementSize; 
    }) 
    .getPosition() 
    .then(function (elementPosition) { 
     position = elementPosition; 
    }) 
    .then(function() { 
     // assuming you've loaded png-crop as PNGCrop 
     var config = { 
      width: size.width, 
      height: size.height, 
      top: position.y, 
      left: position.x 
     }; 
     // need to return a Promise since PNGCrop.crop is an async method 
     return new Promise(function (resolve, reject) { 
      PNGCrop.crop(image, 'cropped.png', config, function (err) { 
       if (err) { 
        reject(err); 
       } 
       else { 
        resolve(); 
       } 
      }); 
     }); 
    })