19 Sep 2022 09:37 PM - edited 02 Dec 2023 01:09 PM
Browser monitors allow you to handle quite complex scenarios when it comes to testing your application,. Sometimes you need to check in your test case if your application is producing PDF and validate the content. Luckily, there is an easy solution for that by utilizing Mozilla's PDF.js library for working with PDF files in JavaScript.
Browser monitors allow you to use JavaScript clickpath events. These events are simply pieces of JavaScript code to be executed in the browser running your browser monitors. Also the code is able to talk back to the synthetic engine using the JavaScript Event API.
In the following "almost self-explaining" 😁 code example below we will:
api.startAsyncSyntheticEvent();
// Insert PDFJS Library into browser window
var pdfjsTag = document.createElement('script');
pdfjsTag.setAttribute('src', '//mozilla.github.io/pdf.js/build/pdf.mjs');
pdfjsTag.setAttribute('type', 'module');
pdfjsTag.setAttribute('id', 'pdfjslib');
document.head.appendChild(pdfjsTag);
// Wait until the PDFJS library is loaded
pdfjsTag.addEventListener('load', function() {
api.info("PDFJS - Library loaded");
// Get link to PDF document from the page
var url = document.getElementById('pdflink').getAttribute('href');
api.info("PDFJS - Downloading pdf document from " + url);
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workersrc='//mozilla.github.io/pdf.js/build/pdf.worker.mjs';
var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) {
api.info('PDFJS - PDF file loaded');
// Fetch the first page
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
api.info('PDFJS - Loaded page ' + pageNumber);
page.getTextContent().then(function(textContent) {
var textItems = textContent.items;
var finalString = "";
// Concatenate the string of the item to the final string
for (var i = 0; i < textItems.length; i++) {
var item = textItems[i];
finalString += item.str + " ";
}
api.info('PDFJS - Page text:' + finalString);
// Check if text is present in the PDF page
if (finalString.includes("Hello")) {
api.finish();
} else {
api.fail("Validation error - Text not present in PDF");
}
});
});
}, function(reason) {
// PDF loading error
console.error("Could not open PDF", reason);
api.fail("Could not open PDF (" + reason + ")");
});
});
If you run the test locally, you can see the information messages easily in your browser, which is useful for further troubleshooting and fine-tuning your test scenario:
Event 4
------------------------------------------------------------------------------------
2022-09-19 10:32:56 INFO PDFJS - Library loaded
2022-09-19 10:32:56 INFO PDFJS - Downloading pdf document from https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf
2022-09-19 10:32:56 INFO PDFJS - PDF file loaded
2022-09-19 10:32:56 INFO PDFJS - Loaded page 1
2022-09-19 10:32:56 INFO PDFJS - Page text:Hello, world!
Happy PDF validation!
19 Sep 2022 11:48 PM
This is 5 stars! Thanks a lot Julius for sharing!
23 Oct 2022 04:53 PM
Great Job @Julius_Loman
01 Dec 2023 03:56 AM
Hi @Julius_Loman ,
Thank you for sharing.
We use this code to validate the content in the PDF. However, the current PDFJS Libraries below are not available. The pages return the 404 code.
//mozilla.github.io/pdf.js/build/pdf.js
//mozilla.github.io/pdf.js/build/pdf.worker.js
We find the other available PDFJS Libraries below. Can you please update them? Thank you!
pdfjsTag.setAttribute('src', '//mozilla.github.io/pdf.js/build/pdf.mjs');
pdfjsTag.setAttribute('type', 'module');
pdfjsLib.GlobalWorkerOptions.workersrc='//mozilla.github.io/pdf.js/build/pdf.worker.mjs';
02 Dec 2023 01:13 PM
Sure, corrected.