Using a tool like PlayWright, how can I interact with annotations after they're created on the pdf?

Technical Support WebViewer
, ,
1

WebViewer Version:
10.0.1

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos?
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework?
Is your issue related to annotations? yes

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

Locating an annotation left on the canvas

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

Lets say I create a note annotation using playwright, if I wanted to assert that the annotation was successfully created I would first start by making sure the note icon appears on the canvas. But when I attempt to do that, I cannot find anything related to the icon in the html. Is this even possible to do? Am I approaching this the wrong way?

If I wanted to create a test to move the note annotation or edit a highlight, how would I do that? If someone can provide an example that would be very helpful.

related to the annotations left on the canvas:
image

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

1 Like
2

Hello amirsean99,

If you want to make sure the annotation is successfully created you could listen to the annotationChanged event and the “add” action : Apryse WebViewer Class: AnnotationManager

If you want to test the intractability of the annotation on the page, you can use the mouse movement APIs in Playwright to set X and Y coordinates with clicks.

Does this work for you?

Best regards,
Tyler

1 Like
3

I can use the mouse functions to click and create something like a note, but how does one create a highlight or any other type of annotation with playwright specifically?

1 Like
4

Hi mirsean99,

We actually use Playwright to test WebViewer in our development process. For testing highlights and other annotations, we use the mouse, like so:

  const textInTheFirstPage = 'PDF Text to select';

  const rect1 = await getTextPosition(textInTheFirstPage);
  await page.mouse.move(rect1.x1, rect1.y1);
  await page.mouse.down();
  await page.mouse.move(rect1.x2, rect1.y2);
  await page.mouse.up();

This is some code for testing text selection, if you just change the tool to the Highlight tool it will work as well.

Let me know if this works for you.

Best regards,
Tyler

2 Likes
5

so I tried this out and could not find the function getTextPosition anywhere in the playwright docs, could you explain a bit more for me please?

edit nvm Text-position | Apryse Documentation

1 Like
6

Hello amirsean99,

Apologies for the confusion, the getTextPosition is on our document API:
https://docs.apryse.com/api/web/Core.Document.html#getTextPosition

Best regards,
Tyler

1 Like