Pascal Moll

22. August 2014

3 min

Testing PDF documents using Firefox and testIT WebTester

Let´s imagine for a second your boss has a new assignment for you. He wants you to automatically test the structure of generated PDF documents. Sounds like a pain in the lower body region? Not entirely. This blog post will show you a basic concept and an example of how to test structure and content of PDFs using Firefox and testIT WebTester.

Concept

For quite a while the Firefox supports HTML 5. So if you open a PDF document in the Firefox Browser, it transforms the document into an HTML 5 Canvas element. It may look like this:

testIT PDF Tester - canvas element with Firebug in Firefox

testIT PDF Tester – example of PDF document in Firefox

As you can see, the whole document has been translated into an HTML DOM structure.

Everything starts with the “viewerContainer” element, followed by the viewer and after that, it continues with the pages.

<div id="viewerContainer" tabindex="0">
<div id="viewer">
<a name="1"> </a>
<div id="pageContainer1" class="page" style="width: 991px; height: 1403px;" data-loaded="true">

Each page has its own wrapper with properties and their own elements.

<div class="canvasWrapper" style="width: 991px; height: 1403px;">...</div>
<div class="textLayer" style="width: 1238px; height: 1753px; transform: scale(0.8, 0.8); transform-origin: 0% 0% 0px;" data-_scale-x="1.25" data-_scale-y="1.25">...</div>

1 2	<div class="canvasWrapper" style="width: 991px; height: 1403px;">...</div> <div class="textLayer" style="width: 1238px; height: 1753px; transform: scale(0.8, 0.8); transform-origin: 0% 0% 0px;" data-_scale-x="1.25" data-_scale-y="1.25">...</div>

Each element has also properties for example width and height.

<div data-canvas-width="162.03124381899835" data-font-name="Times" data-angle="0" style="font-size:
 52.0833px; font-family: serif; left: 885.417px; top: 323.958px; transform: rotate(0deg) scale(1.03728, 1); transform-origin: 0% 0% 0px;" dir="ltr">Invoice</div>

1 2	<div data-canvas-width="162.03124381899835" data-font-name="Times" data-angle="0" style="font-size: 52.0833px; font-family: serif; left: 885.417px; top: 323.958px; transform: rotate(0deg) scale(1.03728, 1); transform-origin: 0% 0% 0px;" dir="ltr">Invoice</div>

To conclude the conceptual part, you have to find the elements you want to check and test their properties, or you go ahead and test the whole document page by page.

Exactly those two usecases are part of the PDF support addon to our testIT WebTester.

1) Compare two PDF documents with testIT

To compare two documents and test them, we have to start with an entry page. The WebTester reads structure and content of this page and compares it.

Let´s test if page 1 of both documents is equal. To do so we would write a test like the following:

@BeforeClass
public static void initializePDFFiles () {
   pdfFileSource = new File("src/test/resources/invoice.pdf");
   pdfFileShouldBe = new File("src/test/resources/Copyofinvoice.pdf");
   browser = BrowserFactory.createDefaultBrowser();
}

@Before
public void initializePDFTester () throws MalformedURLException {
   pdfTester = new PDFTester(pdfFileSource);
   pdfTester.setBrowser(browser);
}

/* TESTS */
@Test
public void testExecuteOfCheckpoints_Page1ShouldBeEqual_CheckpointPasses () {
   DocumentPageCheckpoint checkpoint = new DocumentPageCheckpoint(PAGE_1,pdfFileShouldBe);
   pdfTester.addCheckpoint(checkpoint);
   PDFTesterResult result = pdfTester.executeCheckpoints();
   CheckpointResult checkPointResult = result.getCheckpointResult(0);
   assertThat(checkPointResult.getMessages(), is(empty()));
   assertThat(checkPointResult.hasPassed(), is(TRUE));
}

@BeforeClass

public static void initializePDFFiles () {

pdfFileSource = new File("src/test/resources/invoice.pdf");

pdfFileShouldBe = new File("src/test/resources/Copyofinvoice.pdf");

browser = BrowserFactory.createDefaultBrowser();

}

@Before

public void initializePDFTester () throws MalformedURLException {

pdfTester = new PDFTester(pdfFileSource);

pdfTester.setBrowser(browser);

}

/* TESTS */

@Test

public void testExecuteOfCheckpoints_Page1ShouldBeEqual_CheckpointPasses () {

DocumentPageCheckpoint checkpoint = new DocumentPageCheckpoint(PAGE_1,pdfFileShouldBe);

pdfTester.addCheckpoint(checkpoint);

PDFTesterResult result = pdfTester.executeCheckpoints();

CheckpointResult checkPointResult = result.getCheckpointResult(0);

assertThat(checkPointResult.getMessages(), is(empty()));

assertThat(checkPointResult.hasPassed(), is(TRUE));

}

The following happens:

Open browsers and load PDFs.
Advice the browser to go to page 1 and set zoom level to 100%.
Activate comparison feature.
Set checkpoint and execute.
Get test results.

If the documents would not be equal, checkpoint result would contain the exact reason why.

2) Use checkpoints to test specific attributes with testIT

Using the checkpoint technique to test several lines works like the following:

@BeforeClass
public static void initializePDFFile () {
    pdfFile = new File("src/test/resources/invoice.pdf");
    browser = BrowserFactory.createDefaultBrowser();
}

@Before
public void initializePDFTester () throws MalformedURLException {
    pdfTester = new PDFTester(pdfFile);
    pdfTester.setBrowser(browser);
}
 
@Test
public void testExecuteOfCheckpoints_SingleCheckpointOnPageInTheMiddleOfTheDocument_CheckpointPasses () {
    TextCheckpoint checkpoint = new LineCheckpoint(PAGE_1, "Invoice);
    checkpoint.setPosition(99f, 67f, 6f);
    checkpoint.setFontfamily("monospace");
    checkpoint.setFontSize(26f, 1f);
    pdfTester.addCheckpoint(checkpoint);
    PDFTesterResult result = pdfTester.executeCheckpoints();
    CheckpointResult checkPointResult = result.getCheckpointResult(0);
    assertThat(checkPointResult.getMessages(), is(empty()));
    assertThat(checkPointResult.hasPassed(), is(TRUE));
}

@BeforeClass

public static void initializePDFFile () {

pdfFile = new File("src/test/resources/invoice.pdf");

browser = BrowserFactory.createDefaultBrowser();

}

@Before

public void initializePDFTester () throws MalformedURLException {

pdfTester = new PDFTester(pdfFile);

pdfTester.setBrowser(browser);

}

@Test

public void testExecuteOfCheckpoints_SingleCheckpointOnPageInTheMiddleOfTheDocument_CheckpointPasses () {

TextCheckpoint checkpoint = new LineCheckpoint(PAGE_1, "Invoice);

checkpoint.setPosition(99f, 67f, 6f);

checkpoint.setFontfamily("monospace");

checkpoint.setFontSize(26f, 1f);

pdfTester.addCheckpoint(checkpoint);

PDFTesterResult result = pdfTester.executeCheckpoints();

CheckpointResult checkPointResult = result.getCheckpointResult(0);

assertThat(checkPointResult.getMessages(), is(empty()));

assertThat(checkPointResult.hasPassed(), is(TRUE));

}

Open browsers and load PDF.
Set zoom level to 100%.
Navigate to the page of the first checkpoint.
Search for the specific line containing “Invoice”.
Set checkpoint and execute.
Get test results.

Now in this example we check if the position of the text “Invoice” is correct, if the font family is monospace and if the font size is 26f /- 1.

Keep in mind, you can use as much checkpoints as needed.

Video of a test

Example of testing PDF documents using testIT WebTester

Download pdf addon for webtester

You can either download the WebTester distribution from our FTP server or you can use our NovaTec public maven repository:

Dependency and Repository

<dependency>
    <groupId>info.novatec</groupId>
    <artifactId>testit-webtester-pdf</artifactId>
    <version>1.4.3</version>
</dependency>

<repository>
    <id>novatec</id>
    <name>NovaTec Public Repository</name>
    <url>http://repository.novatec-gmbh.de/content/repositories/novatec/</url>
</repository>

<groupId>info.novatec</groupId>

<artifactId>testit-webtester-pdf</artifactId>

</dependency>

<id>novatec</id>

<name>NovaTec Public Repository</name>

<url>http://repository.novatec-gmbh.de/content/repositories/novatec/</url>

</repository>

Conclusion

The testIT WebTester is extremely usefull for userinterface based testing and because of the fact that it can handle HTML elements so well, the PDFTester addon is a great way to test PDF documents.

Feel free to check it out yourself.

Please let me know if you have any questions or comments.