Cypress test case for PDFTron PDF content annotation

Technical Support
1

Product:
We want to assert PDFTron annotation which are highlighted and tooltip content at cypress test side.
Could you please help us on this.

Product Version:

Please give a brief summary of your issue:
(Think of this as an email subject)

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

Please provide a link to a minimal sample where the issue is reproducible:

2

Sorry, it is unclear what you are asking.

What do you mean exactly by “assert”?
What is “cypress” exactly?
When you say “tooltip” what exact PDF viewer are you referring to? e.g. PDFTron WebViewer?

Screenshots help a lot.

3

Hello Ryan,

Thanks you for your reply.

Cypress: Cypress is the open-source and free test automation tool. It can be used for front end and application programming interface (API) test automation.

We are writing automation test cases for PDFTron WebViewer. We want to fetch PDFTron WebViewer annotations and tooltip values which are highlighted in the PDFTron WebViewer using Cypress automation. Then we want to assert annotation and tooltip value in Cypress test cases.

4

Do we have any updates?

5

Hi there,

I’m Yixiao and I will be taking over this issue now.

In general, assuming you are able to instantiate WebViewer with cypress, you can either do image snapshot testing or use the API instance.annotManager.getSelectedAnnotation/getAnnotationsList to see if the desired annotation was created / selected.

There are still a few things unclear to me from this conversation thread so I will ask:

  • Could you attach a screenshot here to demonstrate what you meant for “annotations and tooltip values which are highlighted”? The reason I’m asking is because the word highlight can have different meaning in WebViewer. It could mean the Text Highlight Annotation instantiated from this class, the currently selected annotation (which can be a Highlight Annotation as well) or the highlighted text search result.

  • We would also want to know which stage you are at for writing cypress tests so that we can help you better. Are you looking to setup WebViewer with cypress? Or you are stuck with certain test cases? Or you are unsure how you can write test cases for specific use case?

Thanks and we look forward to hearing back from you.

Yixiao

6

Hi Ychen.

I’m currently working on PlayWright/ Cypress testing. These access the page after the page has been rendered by React.

How do I access the instance of webViewer or interact with the AnnotationList?

7

Hi Dale,

You can use this method - getInstance
https://docs.apryse.com/api/web/global.html#getInstance

So I expect the test to look something like this

import { getInstance } from '@pdftron/webviewer'

// After WebViewer has already been constructed
const webviewerInstance = getInstance();
const { annotationManager, Annotations } = webviewerInstance.Core;

const annotations = annotationManager.getAnnotationsList();
const annot1 = annotations[0];
const annot2 = annotations.filter(annot => annot instanceof Annotations.TextHighlightAnnotation )[0];
expect(annot1.Width).to.equal(230.52)
expect(annot2.PageNumber).to.equal(3)
8

Edit: Made some correction to my code above