Extraction et validation d’images PDF avec Playwright et Sharp

Le texte et les images peuvent être stockés dans des PDF et leur formatage est conservé sur toutes les plates-formes et appareils. Il existe des cas d’utilisation dans les tests de logiciels où il est essentiel de s’assurer que les bonnes images sont incluses dans les PDF et que leur qualité est maintenue. La vérification manuelle de ces images peut prendre un certain temps et être sujette à des erreurs humaines, en particulier lorsque vous travaillez avec de gros fichiers PDF ou de nombreux cas de test. En automatisant ce processus, vous pouvez limiter les risques de manquer des écarts et réduire les efforts manuels.

L’extraction et la validation des images à partir de PDF peuvent être automatisées à l’aide de la bibliothèque Node Sharp. Sharp est une bibliothèque de traitement d’images qui peut être couplée à Playwright, un cadre de test robuste de bout en bout, pour extraire des images de PDF et les comparer aux images attendues.

Étape 1 : configurer l’environnement

Condition préalable:

Node.js doit être installé sur le système avant d’installer les bibliothèques requises. Installez les bibliothèques suivantes et installez node.js

pdf-lib: Bibliothèque pour travailler avec des PDF
pointu: Une bibliothèque de traitement d’image utilisée pour la manipulation d’images.

Pour installer ces bibliothèques, nous pouvons utiliser les commandes suivantes dans le terminal
npm installer pdf-lib chemin Sharp FS

Étape 2 : Extraire des images du PDF

Une fois les bibliothèques installées, nous devrons peut-être utiliser pdf-lib pour analyser le pdf et travailler avec le contenu pdf. Le code ci-dessous permet d’extraire des images d’un fichier PDF.

const fs = require('fs');
const { PDFDocument } = require('pdf-lib');
const sharp = require('sharp');
const path = require('path');

async extractImageFromPdf(pdfPath){
  const pathToExtract = "./extractedImg/"; //folder in project where all the images from pdf would be extracted
  try {
    const images = await PDF.sharpsFromPdf(pdfPath);
    images.forEach(({ image, name, channels }) => {
      const ext=".png"; //can be use other extensions conditionally
      image.toFile(pathToExtract+`${name}${ext}`);
    });

    // Progress events
    await PDF.sharpsFromPdf(pdfPath, {
      handler(event, data) {
        if (event === 'loading') {
          console.log('Loading PDF:', (data.loaded / data.total) * 100);
        } else if (event === 'loaded') {
          console.log('PDF loaded');
        } else if (event === 'image' || event === 'skip' || event === 'error') {
          console.log('Parsing images:', (data.pageIndex / data.pages) * 100);
        } else if (event === 'done') {
          console.log('Done');
        }
      },
    });
    return pathToExtract;
  } catch (error) {
    console.error('Error extracting images from PDF:', error);
  }
}

Dans cette fonction :

• La fonction appelée PDF.sharpsFromPdf(pdfPath) est utilisée pour extraire les images du PDF fourni. Les images extraites sont renvoyées sous forme de tableau d’objets contenant des images, des noms et des canaux. l’image représente les données de l’image, généralement sous la forme d’un objet pointu ou similaire, qui vous permet de manipuler et d’enregistrer l’image, le nom est utilisé pour extraire le nom attribué à l’image, souvent dérivé du numéro de page ou d’un identifiant dans le PDF, des canaux indique le nombre de canaux de couleur dans l’image (bien que non utilisé dans la fonction ci-dessus)
• La boucle images.forEach parcourt les images extraites, en enregistrant chacune d’elles dans le répertoire spécifié avec une extension .png à l’aide de image.toFile.
• Un deuxième appel à PDF.sharpsFromPdf est effectué, cette fois avec une fonction de gestionnaire qui suit la progression. Le gestionnaire enregistre différentes étapes telles que le chargement, l’analyse des images et l’achèvement.
• En cas de succès, la fonction renvoie le chemin où les images sont extraites. Sinon, un message d’erreur est enregistré.

Étape 3 : Comparaison des images extraites avec les images attendues

Une fois les images extraites du pdf, nous pouvons les comparer avec les images attendues pour vérifier leur exactitude. La bibliothèque Sharp est utilisée pour effectuer une comparaison au niveau des pixels

Voici un exemple de fonction de comparaison :

async compareImages(expectedImgPath, extractedImgFolderPath) {
let flag = false;
try {
// Load and process the first image
const img1 = await sharp(expectedImgPath).resize(500, 500).ensureAlpha().raw().toBuffer({ resolveWithObject: true });
const { data: data1, info: info1 } = img1;

// Read the directory and filter image files
const files = fs.readdirSync(extractedImgFolderPath);

const imageFiles = files.filter(file => /^img_p3_\d+\.png$/i.test(file)); //restrict search to images starting with img_p3 

for (const file of imageFiles) {
const filePath = path.join(extractedImgFolderPath, file);

// Load and process the second image
const img2 = await sharp(filePath).resize(500, 500).ensureAlpha().raw().toBuffer({ resolveWithObject: true });
const { data: data2, info: info2 } = img2;

// Check if dimensions match
if (info1.width !== info2.width || info1.height !== info2.height) {
console.log(`Image dimensions do not match for file: ${file}`);
continue;
}

// Calculate Mean Squared Error (MSE)
let mse = 0;
for (let i = 0; i < data1.length; i++) {
mse += (data1[i] - data2[i]) ** 2;
}
mse /= data1.length;

if (mse < 550) {
flag = true;
console.log(`Image ${file} matches with the given image.`);
break;
} else {
console.log(`Image ${file} does not match.`);
}
}
} catch (error) {
console.error('Error comparing images:', error);
}
return flag;
}

Dans ce code :

• Dans la fonction ci-dessus, ces 2 paramètres sont utilisés, ExpectedImgPath : Chemin vers l’image de référence à comparer, extraitImgFolderPath : Répertoire contenant les images à comparer à l’image de référence.
• La fonction utilise la bibliothèque Sharp pour charger, redimensionner et convertir les images en tampon de pixels bruts. La fonction EnsureAlpha() garantit que les images ont un canal alpha, même si ce n’est pas le cas à l’origine.
• La fonction lit le répertoire dans FolderPath et filtre les fichiers à l’aide d’une expression régulière (/^img_p3_\d+\.png$/i). Cette expression régulière restreint la comparaison aux images nommées selon un modèle (par exemple, « img_p3_123.png ») qui indique qu’elles appartiennent à la page 3.
• Pour chaque image du dossier, la fonction vérifie si ses dimensions correspondent à l’image de référence. Si c’est le cas, il calcule l’erreur quadratique moyenne (MSE) entre les données de pixels des images.
  MSE est une mesure de la différence entre les images. Si le MSE est inférieur à un seuil (550 dans ce cas), les images sont considérées comme une correspondance. Nous pouvons modifier la valeur MSE en conséquence.
• Si une correspondance est trouvée (MSE < 550), l'indicateur est défini sur true et la boucle est interrompue. Le test affirme que l'indicateur est vrai, ce qui signifie qu'au moins une image correspond.

Étape 4 : Automatisation du processus avec Playwright

Pour aller plus loin, nous pouvons intégrer cela dans un cadre de test plus large comme Playwright. Voici comment vous pouvez utiliser Playwright pour automatiser le processus de vérification :

const { test, expect } = require('@playwright/test');
const path = require('path');

test('Verify images in PDF', async ({}) => {
const pdfPath="path/to/your/pdf/document.pdf";
const expectedImgPath="path/to/expected/images";
const extractedImagesFolder="path/to/extracted/images";

await extractImageFromPdf(pdfPath);
let imageCompareFlag = await compareImages(expectedImgPath, extractedImagesFolder);

expect(imageCompareFlag).toBeTruthy();
});

Conclusion

Une méthode efficace pour automatiser la validation du contenu visuel consiste à extraire des photos d’un PDF et à les comparer avec les images attendues. Le pipeline de test peut facilement intégrer cette procédure, garantissant que vos PDF incluent automatiquement les bonnes images. Dramaturge et des bibliothèques comme pdf-lib et Sharp rendent cette automatisation simple et fiable, vous permettant d’être assuré du calibre et de la cohérence de votre contenu visuel.

Références :

https://www.npmjs.com/package/sharp-pdf

VOUS TROUVEZ CECI UTILE ? PARTAGEZ-LE