diff --git a/test/integration/annotation_spec.mjs b/test/integration/annotation_spec.mjs
index 1ab1ee5ac..16a4a0299 100644
--- a/test/integration/annotation_spec.mjs
+++ b/test/integration/annotation_spec.mjs
@@ -15,6 +15,7 @@
 
 import {
   closePages,
+  getAnnotationSelector,
   getQuerySelector,
   getRect,
   getSelector,
@@ -28,7 +29,7 @@ describe("Annotation highlight", () => {
     beforeEach(async () => {
       pages = await loadAndWait(
         "annotation-highlight.pdf",
-        "[data-annotation-id='19R']"
+        getAnnotationSelector("19R")
       );
     });
 
@@ -39,13 +40,17 @@ describe("Annotation highlight", () => {
     it("must check the popup position in the DOM", async () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {
-          const areSiblings = await page.evaluate(() => {
-            const highlight = document.querySelector(
-              "[data-annotation-id='19R']"
-            );
-            const popup = document.querySelector("[data-annotation-id='21R']");
-            return highlight.nextElementSibling === popup;
-          });
+          const highlightSelector = getAnnotationSelector("19R");
+          const popupSelector = getAnnotationSelector("21R");
+          const areSiblings = await page.evaluate(
+            (highlightSel, popupSel) => {
+              const highlight = document.querySelector(highlightSel);
+              const popup = document.querySelector(popupSel);
+              return highlight.nextElementSibling === popup;
+            },
+            highlightSelector,
+            popupSelector
+          );
           expect(areSiblings).withContext(`In ${browserName}`).toEqual(true);
         })
       );
@@ -55,17 +60,17 @@ describe("Annotation highlight", () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {
           let hidden = await page.$eval(
-            "[data-annotation-id='21R']",
+            getAnnotationSelector("21R"),
             el => el.hidden
           );
           expect(hidden).withContext(`In ${browserName}`).toEqual(true);
-          await page.hover("[data-annotation-id='19R']");
-          await page.waitForSelector("[data-annotation-id='21R']", {
+          await page.hover(getAnnotationSelector("19R"));
+          await page.waitForSelector(getAnnotationSelector("21R"), {
             visible: true,
             timeout: 0,
           });
           hidden = await page.$eval(
-            "[data-annotation-id='21R']",
+            getAnnotationSelector("21R"),
             el => el.hidden
           );
           expect(hidden).withContext(`In ${browserName}`).toEqual(false);
@@ -78,7 +83,7 @@ describe("Annotation highlight", () => {
     let pages;
 
     beforeEach(async () => {
-      pages = await loadAndWait("bug1883609.pdf", "[data-annotation-id='23R']");
+      pages = await loadAndWait("bug1883609.pdf", getAnnotationSelector("23R"));
     });
 
     afterEach(async () => {
@@ -89,7 +94,7 @@ describe("Annotation highlight", () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {
           for (const i of [23, 22, 14]) {
-            await page.click(`[data-annotation-id='${i}R']`);
+            await page.click(getAnnotationSelector(`${i}R`));
             await page.waitForSelector(`#pdfjs_internal_id_${i}R:focus`);
           }
         })
@@ -103,7 +108,7 @@ describe("Checkbox annotation", () => {
     let pages;
 
     beforeEach(async () => {
-      pages = await loadAndWait("issue12706.pdf", "[data-annotation-id='63R']");
+      pages = await loadAndWait("issue12706.pdf", getAnnotationSelector("63R"));
     });
 
     afterEach(async () => {
@@ -111,13 +116,13 @@ describe("Checkbox annotation", () => {
     });
 
     it("must let checkboxes with the same name behave like radio buttons", async () => {
-      const selectors = [63, 70, 79].map(n => `[data-annotation-id='${n}R']`);
+      const selectors = [63, 70, 79].map(n => getAnnotationSelector(`${n}R`));
       await Promise.all(
         pages.map(async ([browserName, page]) => {
           for (const selector of selectors) {
             await page.click(selector);
             await page.waitForFunction(
-              `document.querySelector("${selector} > :first-child").checked`
+              `document.querySelector('${selector} > :first-child').checked`
             );
 
             for (const otherSelector of selectors) {
@@ -139,7 +144,7 @@ describe("Checkbox annotation", () => {
     let pages;
 
     beforeEach(async () => {
-      pages = await loadAndWait("issue15597.pdf", "[data-annotation-id='7R']");
+      pages = await loadAndWait("issue15597.pdf", getAnnotationSelector("7R"));
     });
 
     afterEach(async () => {
@@ -149,10 +154,10 @@ describe("Checkbox annotation", () => {
     it("must check the checkbox", async () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {
-          const selector = "[data-annotation-id='7R']";
+          const selector = getAnnotationSelector("7R");
           await page.click(selector);
           await page.waitForFunction(
-            `document.querySelector("${selector} > :first-child").checked`
+            `document.querySelector('${selector} > :first-child').checked`
           );
           expect(true).withContext(`In ${browserName}`).toEqual(true);
         })
@@ -164,7 +169,7 @@ describe("Checkbox annotation", () => {
     let pages;
 
     beforeEach(async () => {
-      pages = await loadAndWait("bug1847733.pdf", "[data-annotation-id='18R']");
+      pages = await loadAndWait("bug1847733.pdf", getAnnotationSelector("18R"));
     });
 
     afterEach(async () => {
@@ -174,13 +179,13 @@ describe("Checkbox annotation", () => {
     it("must check the checkbox", async () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {
-          const selectors = [18, 30, 42, 54].map(
-            id => `[data-annotation-id='${id}R']`
+          const selectors = [18, 30, 42, 54].map(id =>
+            getAnnotationSelector(`${id}R`)
           );
           for (const selector of selectors) {
             await page.click(selector);
             await page.waitForFunction(
-              `document.querySelector("${selector} > :first-child").checked`
+              `document.querySelector('${selector} > :first-child').checked`
             );
           }
         })
@@ -194,7 +199,7 @@ describe("Text widget", () => {
     let pages;
 
     beforeEach(async () => {
-      pages = await loadAndWait("issue13271.pdf", "[data-annotation-id='24R']");
+      pages = await loadAndWait("issue13271.pdf", getAnnotationSelector("24R"));
     });
 
     afterEach(async () => {
@@ -223,7 +228,7 @@ describe("Text widget", () => {
     let pages;
 
     beforeEach(async () => {
-      pages = await loadAndWait("issue16473.pdf", "[data-annotation-id='22R']");
+      pages = await loadAndWait("issue16473.pdf", getAnnotationSelector("22R"));
     });
 
     afterEach(async () => {
@@ -297,7 +302,7 @@ describe("Annotation and storage", () => {
     let pages;
 
     beforeEach(async () => {
-      pages = await loadAndWait("issue14023.pdf", "[data-annotation-id='64R']");
+      pages = await loadAndWait("issue14023.pdf", getAnnotationSelector("64R"));
     });
 
     afterEach(async () => {
@@ -312,9 +317,9 @@ describe("Annotation and storage", () => {
           // Text field.
           await page.type(getSelector("64R"), text1);
           // Checkbox.
-          await page.click("[data-annotation-id='65R']");
+          await page.click(getAnnotationSelector("65R"));
           // Radio.
-          await page.click("[data-annotation-id='67R']");
+          await page.click(getAnnotationSelector("67R"));
 
           for (const [pageNumber, textId, checkId, radio1Id, radio2Id] of [
             [2, "18R", "19R", "21R", "20R"],
@@ -351,9 +356,9 @@ describe("Annotation and storage", () => {
           // Text field.
           await page.type(getSelector("23R"), text2);
           // Checkbox.
-          await page.click("[data-annotation-id='24R']");
+          await page.click(getAnnotationSelector("24R"));
           // Radio.
-          await page.click("[data-annotation-id='25R']");
+          await page.click(getAnnotationSelector("25R"));
 
           for (const [pageNumber, textId, checkId, radio1Id, radio2Id] of [
             [1, "64R", "65R", "67R", "68R"],
@@ -398,7 +403,7 @@ describe("ResetForm action", () => {
     let pages;
 
     beforeEach(async () => {
-      pages = await loadAndWait("resetform.pdf", "[data-annotation-id='63R']");
+      pages = await loadAndWait("resetform.pdf", getAnnotationSelector("63R"));
     });
 
     afterEach(async () => {
@@ -413,8 +418,8 @@ describe("ResetForm action", () => {
             await page.type(getSelector(`${i}R`), base);
           }
 
-          const selectors = [69, 71, 75].map(
-            n => `[data-annotation-id='${n}R']`
+          const selectors = [69, 71, 75].map(n =>
+            getAnnotationSelector(`${n}R`)
           );
           for (const selector of selectors) {
             await page.click(selector);
@@ -423,7 +428,7 @@ describe("ResetForm action", () => {
           await page.select(getSelector("78R"), "b");
           await page.select(getSelector("81R"), "f");
 
-          await page.click("[data-annotation-id='82R']");
+          await page.click(getAnnotationSelector("82R"));
           await page.waitForFunction(`${getQuerySelector("63R")}.value === ""`);
 
           for (let i = 63; i <= 68; i++) {
@@ -463,8 +468,8 @@ describe("ResetForm action", () => {
             await page.type(getSelector(`${i}R`), base);
           }
 
-          const selectors = [69, 71, 72, 73, 75].map(
-            n => `[data-annotation-id='${n}R']`
+          const selectors = [69, 71, 72, 73, 75].map(n =>
+            getAnnotationSelector(`${n}R`)
           );
           for (const selector of selectors) {
             await page.click(selector);
@@ -473,7 +478,7 @@ describe("ResetForm action", () => {
           await page.select(getSelector("78R"), "b");
           await page.select(getSelector("81R"), "f");
 
-          await page.click("[data-annotation-id='84R']");
+          await page.click(getAnnotationSelector("84R"));
           await page.waitForFunction(`${getQuerySelector("63R")}.value === ""`);
 
           for (let i = 63; i <= 68; i++) {
@@ -525,7 +530,7 @@ describe("ResetForm action", () => {
       beforeEach(async () => {
         pages = await loadAndWait(
           "issue14438.pdf",
-          "[data-annotation-id='10R']"
+          getAnnotationSelector("10R")
         );
       });
 
@@ -536,9 +541,10 @@ describe("ResetForm action", () => {
       it("must check that the FreeText annotation has a popup", async () => {
         await Promise.all(
           pages.map(async ([browserName, page]) => {
-            await page.click("[data-annotation-id='10R']");
+            const selector = getAnnotationSelector("10R");
+            await page.click(selector);
             await page.waitForFunction(
-              `document.querySelector("[data-annotation-id='10R']").hidden === false`
+              `document.querySelector('${selector}').hidden === false`
             );
           })
         );
@@ -553,7 +559,7 @@ describe("ResetForm action", () => {
       beforeEach(async () => {
         pages = await loadAndWait(
           "annotation-caret-ink.pdf",
-          "[data-annotation-id='25R']"
+          getAnnotationSelector("25R")
         );
       });
 
@@ -564,16 +570,17 @@ describe("ResetForm action", () => {
       it("must check that the Ink annotation has a popup", async () => {
         await Promise.all(
           pages.map(async ([browserName, page]) => {
+            const selector = getAnnotationSelector("25R");
             await page.waitForFunction(
-              `document.querySelector("[data-annotation-id='25R']").hidden === false`
+              `document.querySelector('${selector}').hidden === false`
             );
             await page.click("#editorFreeText");
             await page.waitForFunction(
-              `document.querySelector("[data-annotation-id='25R']").hidden === true`
+              `document.querySelector('${selector}').hidden === true`
             );
             await page.click("#editorFreeText");
             await page.waitForFunction(
-              `document.querySelector("[data-annotation-id='25R']").hidden === false`
+              `document.querySelector('${selector}').hidden === false`
             );
           })
         );
@@ -588,7 +595,7 @@ describe("ResetForm action", () => {
       beforeEach(async () => {
         pages = await loadAndWait(
           "bug1844583.pdf",
-          "[data-annotation-id='8R']"
+          getAnnotationSelector("8R")
         );
       });
 
@@ -616,7 +623,7 @@ describe("ResetForm action", () => {
       beforeEach(async () => {
         pages = await loadAndWait(
           "tagged_stamp.pdf",
-          "[data-annotation-id='20R']"
+          getAnnotationSelector("20R")
         );
       });
 
@@ -627,50 +634,37 @@ describe("ResetForm action", () => {
       it("must check that the popup has the correct visibility", async () => {
         await Promise.all(
           pages.map(async ([browserName, page]) => {
-            let hidden = await page.$eval(
-              "[data-annotation-id='21R']",
-              el => el.hidden
-            );
+            const selector = getAnnotationSelector("21R");
+            let hidden = await page.$eval(selector, el => el.hidden);
             expect(hidden).withContext(`In ${browserName}`).toEqual(true);
-            await page.focus("[data-annotation-id='20R']");
+
+            await page.focus(getAnnotationSelector("20R"));
             await page.keyboard.press("Enter");
             await page.waitForFunction(
-              `document.querySelector("[data-annotation-id='21R']").hidden !== true`
-            );
-            hidden = await page.$eval(
-              "[data-annotation-id='21R']",
-              el => el.hidden
+              `document.querySelector('${selector}').hidden !== true`
             );
+            hidden = await page.$eval(selector, el => el.hidden);
             expect(hidden).withContext(`In ${browserName}`).toEqual(false);
 
             await page.keyboard.press("Enter");
             await page.waitForFunction(
-              `document.querySelector("[data-annotation-id='21R']").hidden !== false`
-            );
-            hidden = await page.$eval(
-              "[data-annotation-id='21R']",
-              el => el.hidden
+              `document.querySelector('${selector}').hidden !== false`
             );
+            hidden = await page.$eval(selector, el => el.hidden);
             expect(hidden).withContext(`In ${browserName}`).toEqual(true);
 
             await page.keyboard.press("Enter");
             await page.waitForFunction(
-              `document.querySelector("[data-annotation-id='21R']").hidden !== true`
-            );
-            hidden = await page.$eval(
-              "[data-annotation-id='21R']",
-              el => el.hidden
+              `document.querySelector('${selector}').hidden !== true`
             );
+            hidden = await page.$eval(selector, el => el.hidden);
             expect(hidden).withContext(`In ${browserName}`).toEqual(false);
 
             await page.keyboard.press("Escape");
             await page.waitForFunction(
-              `document.querySelector("[data-annotation-id='21R']").hidden !== false`
-            );
-            hidden = await page.$eval(
-              "[data-annotation-id='21R']",
-              el => el.hidden
+              `document.querySelector('${selector}').hidden !== false`
             );
+            hidden = await page.$eval(selector, el => el.hidden);
             expect(hidden).withContext(`In ${browserName}`).toEqual(true);
           })
         );
@@ -685,7 +679,7 @@ describe("ResetForm action", () => {
       beforeEach(async () => {
         pages = await loadAndWait(
           "highlights.pdf",
-          "[data-annotation-id='693R']"
+          getAnnotationSelector("693R")
         );
       });
 
@@ -696,11 +690,13 @@ describe("ResetForm action", () => {
       it("must check that the highlight annotation has no popup and no aria-haspopup attribute", async () => {
         await Promise.all(
           pages.map(async ([browserName, page]) => {
+            const highlightSelector = getAnnotationSelector("693R");
+            const popupSelector = getAnnotationSelector("694R");
             await page.waitForFunction(
               // No aria-haspopup attribute,
-              `document.querySelector("[data-annotation-id='693R']").ariaHasPopup === null` +
+              `document.querySelector('${highlightSelector}').ariaHasPopup === null ` +
                 // and no popup.
-                `&& document.querySelector("[data-annotation-id='694R']") === null`
+                `&& document.querySelector('${popupSelector}') === null`
             );
           })
         );
@@ -715,7 +711,7 @@ describe("ResetForm action", () => {
       beforeEach(async () => {
         pages = await loadAndWait(
           "rotated_ink.pdf",
-          "[data-annotation-id='18R']"
+          getAnnotationSelector("18R")
         );
       });
 
@@ -726,9 +722,9 @@ describe("ResetForm action", () => {
       it("must check that the clickable area has been rotated", async () => {
         await Promise.all(
           pages.map(async ([browserName, page]) => {
-            const rect = await getRect(page, "[data-annotation-id='18R']");
+            const rect = await getRect(page, getAnnotationSelector("18R"));
             const promisePopup = page.waitForSelector(
-              "[data-annotation-id='19R']",
+              getAnnotationSelector("19R"),
               { visible: true }
             );
             await page.mouse.move(
@@ -751,7 +747,7 @@ describe("ResetForm action", () => {
           "bug1885505.pdf",
           ":is(" +
             [56, 58, 60, 65]
-              .map(id => `[data-annotation-id='${id}R']`)
+              .map(id => getAnnotationSelector(`${id}R`))
               .join(", ") +
             ")"
         );
@@ -765,7 +761,7 @@ describe("ResetForm action", () => {
         await Promise.all(
           pages.map(async ([browserName, page]) => {
             const text = await page.$eval(
-              "[data-annotation-id='56R'] mark",
+              `${getAnnotationSelector("56R")} mark`,
               el => el.textContent
             );
             expect(text).withContext(`In ${browserName}`).toEqual("Languages");
@@ -777,7 +773,7 @@ describe("ResetForm action", () => {
         await Promise.all(
           pages.map(async ([browserName, page]) => {
             const text = await page.$eval(
-              "[data-annotation-id='58R'] u",
+              `${getAnnotationSelector("58R")} u`,
               el => el.textContent
             );
             expect(text).withContext(`In ${browserName}`).toEqual("machine");
@@ -789,7 +785,7 @@ describe("ResetForm action", () => {
         await Promise.all(
           pages.map(async ([browserName, page]) => {
             const text = await page.$eval(
-              "[data-annotation-id='60R'] u",
+              `${getAnnotationSelector("60R")} u`,
               el => el.textContent
             );
             expect(text).withContext(`In ${browserName}`)
@@ -803,7 +799,7 @@ a dynamic compiler for JavaScript based on our`);
         await Promise.all(
           pages.map(async ([browserName, page]) => {
             const text = await page.$eval(
-              "[data-annotation-id='65R'] s",
+              `${getAnnotationSelector("65R")} s`,
               el => el.textContent
             );
             expect(text)
diff --git a/test/integration/freetext_editor_spec.mjs b/test/integration/freetext_editor_spec.mjs
index 545d7a759..f1b16dda1 100644
--- a/test/integration/freetext_editor_spec.mjs
+++ b/test/integration/freetext_editor_spec.mjs
@@ -22,6 +22,7 @@ import {
   createPromise,
   dragAndDrop,
   firstPageOnTop,
+  getAnnotationSelector,
   getEditors,
   getEditorSelector,
   getFirstSerialized,
@@ -919,7 +920,7 @@ describe("FreeText Editor", () => {
 
           // Check we've now a div containing the text.
           const newDivText = await page.$eval(
-            "[data-annotation-id='26R'] div.annotationContent",
+            `${getAnnotationSelector("26R")} div.annotationContent`,
             el => el.innerText.replaceAll("\xa0", " ")
           );
           expect(newDivText)
@@ -955,7 +956,7 @@ describe("FreeText Editor", () => {
     let pages;
 
     beforeEach(async () => {
-      pages = await loadAndWait("freetexts.pdf", "[data-annotation-id='32R']");
+      pages = await loadAndWait("freetexts.pdf", getAnnotationSelector("32R"));
     });
 
     afterEach(async () => {
@@ -966,8 +967,8 @@ describe("FreeText Editor", () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {
           // Show the popup on "Hello World from Firefox"
-          await page.click("[data-annotation-id='32R']");
-          const popupSelector = "[data-annotation-id='popup_32R']";
+          await page.click(getAnnotationSelector("32R"));
+          const popupSelector = getAnnotationSelector("popup_32R");
           await page.waitForSelector(popupSelector, { visible: true });
 
           await switchToFreeText(page);
@@ -1074,7 +1075,7 @@ describe("FreeText Editor", () => {
           editorIds = await getEditors(page, "freeText");
           expect(editorIds.length).withContext(`In ${browserName}`).toEqual(0);
           const hidden = await page.$eval(
-            "[data-annotation-id='51R']",
+            getAnnotationSelector("51R"),
             el => el.hidden
           );
           expect(hidden).withContext(`In ${browserName}`).toBeTrue();
@@ -1092,9 +1093,11 @@ describe("FreeText Editor", () => {
     it("must delete an existing annotation with a popup", async () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {
-          await page.click("[data-annotation-id='26R']");
+          const selector = getAnnotationSelector("26R");
+          await page.click(selector);
+
           // Wait for the popup to be displayed.
-          const popupSelector = "[data-annotation-id='popup_26R'] .popup";
+          const popupSelector = `${getAnnotationSelector("popup_26R")} .popup`;
           await page.waitForSelector(popupSelector, { visible: true });
 
           await switchToFreeText(page);
@@ -1122,7 +1125,7 @@ describe("FreeText Editor", () => {
           // Disable editing mode.
           await switchToFreeText(page, /* disable = */ true);
 
-          await page.waitForSelector(":not([data-annotation-id='26R'] .popup)");
+          await page.waitForSelector(`:not(${selector} .popup)`);
 
           // Re-enable editing mode.
           await switchToFreeText(page);
@@ -1134,10 +1137,10 @@ describe("FreeText Editor", () => {
           // Disable editing mode.
           await switchToFreeText(page, /* disable = */ true);
 
-          const popupAreaSelector =
-            "[data-annotation-id='26R'].popupTriggerArea";
+          const popupAreaSelector = `${selector}.popupTriggerArea`;
           await page.waitForSelector(popupAreaSelector, { visible: true });
-          await page.click("[data-annotation-id='26R']");
+          await page.click(selector);
+
           // Wait for the popup to be displayed.
           await page.waitForSelector(popupSelector, { visible: true });
         })
@@ -1188,7 +1191,7 @@ describe("FreeText Editor", () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {
           const modeChangedHandle = await waitForAnnotationModeChanged(page);
-          await page.click("[data-annotation-id='26R']", { count: 2 });
+          await page.click(getAnnotationSelector("26R"), { count: 2 });
           await awaitPromise(modeChangedHandle);
           await page.waitForSelector(`${getEditorSelector(0)}-editor`);
 
@@ -1225,7 +1228,7 @@ describe("FreeText Editor", () => {
     it("must not remove an empty annotation", async () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {
-          await page.waitForSelector("[data-annotation-id='23R']");
+          await page.waitForSelector(getAnnotationSelector("23R"));
 
           // Enter in editing mode.
           await switchToFreeText(page);
@@ -1233,7 +1236,7 @@ describe("FreeText Editor", () => {
           // Disable editing mode.
           await switchToFreeText(page, /* disable = */ true);
 
-          await page.waitForSelector("[data-annotation-id='23R']");
+          await page.waitForSelector(getAnnotationSelector("23R"));
         })
       );
     });
@@ -1241,21 +1244,20 @@ describe("FreeText Editor", () => {
     it("must hide the popup when editing", async () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {
-          await page.click("[data-annotation-id='20R']");
+          await page.click(getAnnotationSelector("20R"));
+
           // Wait for the popup to be displayed.
+          const popupSelector = getAnnotationSelector("popup_20R");
           await page.waitForFunction(
-            () =>
-              document.querySelector("[data-annotation-id='popup_20R']")
-                .hidden === false
+            `document.querySelector('${popupSelector}').hidden === false`
           );
 
           // Enter in editing mode.
           await switchToFreeText(page);
+
           // Wait for the popup to be hidden.
           await page.waitForFunction(
-            () =>
-              document.querySelector("[data-annotation-id='popup_20R']")
-                .hidden === true
+            `document.querySelector('${popupSelector}').hidden === true`
           );
 
           // Exit editing mode.
@@ -1263,9 +1265,7 @@ describe("FreeText Editor", () => {
 
           // Wait for the popup to be visible.
           await page.waitForFunction(
-            () =>
-              document.querySelector("[data-annotation-id='popup_20R']")
-                .hidden === false
+            `document.querySelector('${popupSelector}').hidden === false`
           );
         })
       );
@@ -1507,7 +1507,7 @@ describe("FreeText Editor", () => {
           // [26, 32, ...] are the annotation ids
           for (const n of [26, 32, 42, 57, 35, 1]) {
             const id = `${n}R`;
-            const rect = await getRect(page, `[data-annotation-id="${id}"]`);
+            const rect = await getRect(page, getAnnotationSelector(id));
             const editorPng = await page.screenshot({
               clip: rect,
               type: "png",
@@ -1668,7 +1668,7 @@ describe("FreeText Editor", () => {
             [20, "TL"],
           ]) {
             const id = `${n}R`;
-            const rect = await getRect(page, `[data-annotation-id="${id}"]`);
+            const rect = await getRect(page, getAnnotationSelector(id));
             const editorPng = await page.screenshot({
               clip: rect,
               type: "png",
@@ -3129,11 +3129,10 @@ describe("FreeText Editor", () => {
           }
 
           // Check we've now a div containing the text.
-          await page.waitForSelector(
-            "[data-annotation-id='998R'] div.annotationContent"
-          );
+          const selector = getAnnotationSelector("998R");
+          await page.waitForSelector(`${selector} div.annotationContent`);
           const newDivText = await page.$eval(
-            "[data-annotation-id='998R'] div.annotationContent",
+            `${selector} div.annotationContent`,
             el => el.innerText.replaceAll("\xa0", " ")
           );
           expect(newDivText)
@@ -3141,18 +3140,12 @@ describe("FreeText Editor", () => {
             .toEqual("Hello World and edited in Firefox");
 
           // Check that the canvas has nothing drawn at the annotation position.
-          await page.$eval(
-            "[data-annotation-id='998R']",
-            el => (el.hidden = true)
-          );
+          await page.$eval(selector, el => (el.hidden = true));
           let editorPng = await page.screenshot({
             clip: editorRect,
             type: "png",
           });
-          await page.$eval(
-            "[data-annotation-id='998R']",
-            el => (el.hidden = false)
-          );
+          await page.$eval(selector, el => (el.hidden = false));
           let editorImage = PNG.sync.read(Buffer.from(editorPng));
           expect(editorImage.data.every(x => x === 0xff))
             .withContext(`In ${browserName}`)
diff --git a/test/integration/highlight_editor_spec.mjs b/test/integration/highlight_editor_spec.mjs
index c23f9999a..301b4df28 100644
--- a/test/integration/highlight_editor_spec.mjs
+++ b/test/integration/highlight_editor_spec.mjs
@@ -16,6 +16,7 @@
 import {
   awaitPromise,
   closePages,
+  getAnnotationSelector,
   getEditorSelector,
   getFirstSerialized,
   getRect,
@@ -1981,7 +1982,7 @@ describe("Highlight Editor", () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {
           const modeChangedHandle = await waitForAnnotationModeChanged(page);
-          await waitAndClick(page, "[data-annotation-id='687R']", { count: 2 });
+          await waitAndClick(page, getAnnotationSelector("687R"), { count: 2 });
           await awaitPromise(modeChangedHandle);
           await page.waitForSelector("#highlightParamsToolbarContainer");
 
@@ -2022,7 +2023,7 @@ describe("Highlight Editor", () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {
           const modeChangedHandle = await waitForAnnotationModeChanged(page);
-          await waitAndClick(page, "[data-annotation-id='24R']", { count: 2 });
+          await waitAndClick(page, getAnnotationSelector("24R"), { count: 2 });
           await awaitPromise(modeChangedHandle);
           await page.waitForSelector("#highlightParamsToolbarContainer");
 
@@ -2072,7 +2073,7 @@ describe("Highlight Editor", () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {
           const modeChangedHandle = await waitForAnnotationModeChanged(page);
-          await page.click("[data-annotation-id='693R']", { count: 2 });
+          await page.click(getAnnotationSelector("693R"), { count: 2 });
           await awaitPromise(modeChangedHandle);
           await page.waitForSelector("#highlightParamsToolbarContainer");
 
diff --git a/test/integration/scripting_spec.mjs b/test/integration/scripting_spec.mjs
index ddba46151..84f5666fd 100644
--- a/test/integration/scripting_spec.mjs
+++ b/test/integration/scripting_spec.mjs
@@ -17,6 +17,7 @@ import {
   awaitPromise,
   clearInput,
   closePages,
+  getAnnotationSelector,
   getAnnotationStorage,
   getComputedStyleSelector,
   getFirstSerialized,
@@ -244,7 +245,7 @@ describe("Interaction", () => {
           await waitForScripting(page);
 
           // click on a radio button
-          await page.click("[data-annotation-id='449R']");
+          await page.click(getAnnotationSelector("449R"));
 
           // this field has no actions but it must be cleared on reset
           await page.type(getSelector("405R"), "employee");
@@ -253,7 +254,7 @@ describe("Interaction", () => {
           expect(checked).toEqual(true);
 
           // click on reset button
-          await page.click("[data-annotation-id='402R']");
+          await page.click(getAnnotationSelector("402R"));
 
           await Promise.all(
             ["416R", "422R", "419R", "405R"].map(id => {
@@ -402,7 +403,7 @@ describe("Interaction", () => {
               await page.click(getSelector(id));
             }
 
-            await page.click("[data-annotation-id='97R']");
+            await page.click(getAnnotationSelector("97R"));
             await page.waitForFunction(
               `${getQuerySelector("80R")}.value !== ""`
             );
@@ -582,7 +583,7 @@ describe("Interaction", () => {
             page,
             getSelector("25R"),
             async () => {
-              await page.click("[data-annotation-id='26R']");
+              await page.click(getAnnotationSelector("26R"));
             }
           );
           expect(text)
@@ -630,13 +631,13 @@ describe("Interaction", () => {
           await waitForScripting(page);
 
           // Click on ClearItems button.
-          await page.click("[data-annotation-id='34R']");
+          await page.click(getAnnotationSelector("34R"));
           await page.waitForFunction(
             `${getQuerySelector("30R")}.children.length === 0`
           );
 
           // Click on Restore button.
-          await page.click("[data-annotation-id='37R']");
+          await page.click(getAnnotationSelector("37R"));
           await page.waitForFunction(
             `${getQuerySelector("30R")}.children.length !== 0`
           );
@@ -672,7 +673,7 @@ describe("Interaction", () => {
             );
 
             // Click on AddItem button.
-            await page.click("[data-annotation-id='38R']");
+            await page.click(getAnnotationSelector("38R"));
 
             await page.waitForFunction(
               `${getQuerySelector("30R")}.children.length === ${len}`
@@ -701,7 +702,7 @@ describe("Interaction", () => {
           let len = 6;
           // Click on Restore button.
           await clearInput(page, getSelector("33R"));
-          await page.click("[data-annotation-id='37R']");
+          await page.click(getAnnotationSelector("37R"));
           await page.waitForFunction(
             `${getQuerySelector("30R")}.children.length === ${len}`
           );
@@ -712,7 +713,7 @@ describe("Interaction", () => {
             await page.type(getSelector("39R"), `${num}`);
 
             // Click on DeleteItem button.
-            await page.click("[data-annotation-id='36R']");
+            await page.click(getAnnotationSelector("36R"));
 
             await page.waitForFunction(
               `${getQuerySelector("30R")}.children.length === ${len}`
@@ -783,7 +784,7 @@ describe("Interaction", () => {
                 propName
               );
 
-              await page.click(`[data-annotation-id='${id}R']`);
+              await page.click(getAnnotationSelector(`${id}R`));
               await page.waitForFunction(
                 `${getComputedStyleSelector(
                   ref
@@ -893,7 +894,7 @@ describe("Interaction", () => {
           );
 
           // Click on execute button to eval the above code.
-          await page.click("[data-annotation-id='57R']");
+          await page.click(getAnnotationSelector("57R"));
           await page.waitForFunction(`${getQuerySelector("56R")}.value !== ""`);
 
           const text = await page.$eval(getSelector("56R"), el => el.value);
@@ -924,7 +925,7 @@ describe("Interaction", () => {
               `this.getField("Text2").display = display.${type};`
             );
 
-            await page.click("[data-annotation-id='57R']");
+            await page.click(getAnnotationSelector("57R"));
             await page.waitForFunction(
               `${getComputedStyleSelector(
                 "56R"
@@ -997,7 +998,7 @@ describe("Interaction", () => {
             page,
             getSelector("25R"),
             async () => {
-              await page.click("[data-annotation-id='26R']");
+              await page.click(getAnnotationSelector("26R"));
             }
           );
           expect(text).withContext(`In ${browserName}`).toEqual("Standard");
@@ -1034,13 +1035,13 @@ describe("Interaction", () => {
 
         await page.focus(getSelector("29R"));
         await typeAndWaitForSandbox(page, getSelector("29R"), "34");
-        await page.click("[data-annotation-id='30R']");
+        await page.click(getAnnotationSelector("30R"));
         await waitForSandboxTrip(page);
         await page.waitForFunction(`${getQuerySelector("29R")}.value === ""`);
 
         await page.focus(getSelector("29R"));
         await typeAndWaitForSandbox(page, getSelector("29R"), "12345");
-        await page.click("[data-annotation-id='30R']");
+        await page.click(getAnnotationSelector("30R"));
         await waitForSandboxTrip(page);
         await page.waitForFunction(
           `${getQuerySelector("29R")}.value === "12345"`
@@ -1079,13 +1080,13 @@ describe("Interaction", () => {
 
         await page.focus(getSelector("30R"));
         await typeAndWaitForSandbox(page, getSelector("30R"), "-789");
-        await page.click("[data-annotation-id='29R']");
+        await page.click(getAnnotationSelector("29R"));
         await waitForSandboxTrip(page);
         await page.waitForFunction(`${getQuerySelector("30R")}.value === ""`);
 
         await page.focus(getSelector("30R"));
         await typeAndWaitForSandbox(page, getSelector("30R"), "(123) 456-7890");
-        await page.click("[data-annotation-id='29R']");
+        await page.click(getAnnotationSelector("29R"));
         await waitForSandboxTrip(page);
         await page.waitForFunction(
           `${getQuerySelector("30R")}.value === "(123) 456-7890"`
@@ -1124,13 +1125,13 @@ describe("Interaction", () => {
 
         await page.focus(getSelector("30R"));
         await typeAndWaitForSandbox(page, getSelector("30R"), "-456");
-        await page.click("[data-annotation-id='29R']");
+        await page.click(getAnnotationSelector("29R"));
         await waitForSandboxTrip(page);
         await page.waitForFunction(`${getQuerySelector("30R")}.value === ""`);
 
         await page.focus(getSelector("30R"));
         await typeAndWaitForSandbox(page, getSelector("30R"), "123-4567");
-        await page.click("[data-annotation-id='29R']");
+        await page.click(getAnnotationSelector("29R"));
         await waitForSandboxTrip(page);
         await page.waitForFunction(
           `${getQuerySelector("30R")}.value === "123-4567"`
@@ -1218,7 +1219,7 @@ describe("Interaction", () => {
           // The action triggers a `calculateNow` which in turn triggers a
           // `resetForm (inducing a `calculateNow`) and a `calculateNow`.
           // Without infinite loop prevention the field would be empty.
-          await page.click("[data-annotation-id='31R']");
+          await page.click(getAnnotationSelector("31R"));
           await page.waitForFunction(
             `${getQuerySelector("28R")}.value === "123"`
           );
@@ -1319,8 +1320,11 @@ describe("Interaction", () => {
         pages.map(async ([browserName, page]) => {
           await waitForScripting(page);
 
+          const textWidgetSelector = getAnnotationSelector("35R");
+          const pushButtonSelector = getAnnotationSelector("51R");
+
           let visibility = await page.$eval(
-            "[data-annotation-id='35R']",
+            textWidgetSelector,
             el => getComputedStyle(el).visibility
           );
           expect(visibility)
@@ -1328,7 +1332,7 @@ describe("Interaction", () => {
             .toEqual("visible");
 
           visibility = await page.$eval(
-            "[data-annotation-id='51R']",
+            pushButtonSelector,
             el => getComputedStyle(el).visibility
           );
           expect(visibility)
@@ -1337,17 +1341,17 @@ describe("Interaction", () => {
 
           await page.click(getSelector("44R"));
           await page.waitForFunction(
-            `document.querySelector("[data-annotation-id='35R']").style.visibility === "hidden"`
+            `document.querySelector('${textWidgetSelector}').style.visibility === "hidden"`
           );
 
           visibility = await page.$eval(
-            "[data-annotation-id='35R']",
+            textWidgetSelector,
             el => getComputedStyle(el).visibility
           );
           expect(visibility).withContext(`In ${browserName}`).toEqual("hidden");
 
           visibility = await page.$eval(
-            "[data-annotation-id='51R']",
+            pushButtonSelector,
             el => getComputedStyle(el).visibility
           );
           expect(visibility).withContext(`In ${browserName}`).toEqual("hidden");
@@ -1389,7 +1393,7 @@ describe("Interaction", () => {
                   return rotation === (360 + ((360 - (b + a)) % 360)) % 360;
                 },
                 {},
-                `[data-annotation-id='${ref}R']`,
+                getAnnotationSelector(`${ref}R`),
                 base,
                 angle
               );
@@ -1594,7 +1598,7 @@ describe("Interaction", () => {
           for (const exportValue of ["x3", "x2", "x1"]) {
             await clearInput(page, getSelector("27R"));
             await page.type(getSelector("27R"), exportValue);
-            await page.click("[data-annotation-id='28R']");
+            await page.click(getAnnotationSelector("28R"));
             await page.waitForFunction(
               `${getQuerySelector("24R")}.value === "${exportValue}"`
             );
@@ -1879,27 +1883,25 @@ describe("Interaction", () => {
         pages.map(async ([browserName, page]) => {
           await waitForScripting(page);
 
+          const selector = getAnnotationSelector("9R");
           const hasVisibleCanvas = await page.$eval(
-            `[data-annotation-id="9R"] > canvas`,
+            `${selector} > canvas`,
             elem => elem && !elem.hasAttribute("hidden")
           );
           expect(hasVisibleCanvas)
             .withContext(`In ${browserName}`)
             .toEqual(true);
 
-          const hasHiddenInput = await page.$eval(
-            `[data-annotation-id="9R"] > input`,
-            elem => elem?.hasAttribute("hidden")
+          const hasHiddenInput = await page.$eval(`${selector} > input`, elem =>
+            elem?.hasAttribute("hidden")
           );
           expect(hasHiddenInput).withContext(`In ${browserName}`).toEqual(true);
 
           await page.click(getSelector("12R"));
-          await page.waitForSelector(
-            `[data-annotation-id="9R"] > canvas[hidden]`
-          );
+          await page.waitForSelector(`${selector} > canvas[hidden]`);
 
           const hasHiddenCanvas = await page.$eval(
-            `[data-annotation-id="9R"] > canvas`,
+            `${selector} > canvas`,
             elem => elem?.hasAttribute("hidden")
           );
           expect(hasHiddenCanvas)
@@ -1907,7 +1909,7 @@ describe("Interaction", () => {
             .toEqual(true);
 
           const hasVisibleInput = await page.$eval(
-            `[data-annotation-id="9R"] > input`,
+            `${selector} > input`,
             elem => elem && !elem.hasAttribute("hidden")
           );
           expect(hasVisibleInput)
@@ -2284,7 +2286,7 @@ describe("Interaction", () => {
         pages.map(async ([browserName, page], i) => {
           await waitForScripting(page);
 
-          const buttonSelector = `[data-annotation-id="25R"`;
+          const buttonSelector = getAnnotationSelector("25R");
           await page.waitForSelector(buttonSelector, {
             timeout: 0,
           });
@@ -2408,7 +2410,7 @@ describe("Interaction", () => {
     let pages;
 
     beforeEach(async () => {
-      pages = await loadAndWait("bug1922766.pdf", "[data-annotation-id='44R']");
+      pages = await loadAndWait("bug1922766.pdf", getAnnotationSelector("44R"));
     });
 
     afterEach(async () => {
@@ -2433,14 +2435,14 @@ describe("Interaction", () => {
             }
           };
           await checkColor([255, 0, 0]);
-          await page.click("[data-annotation-id='44R']");
+          await page.click(getAnnotationSelector("44R"));
           await checkColor([0, 0, 255]);
-          await page.click("[data-annotation-id='44R']");
+          await page.click(getAnnotationSelector("44R"));
           await checkColor([255, 0, 0]);
 
-          await page.click("[data-annotation-id='43R']");
+          await page.click(getAnnotationSelector("43R"));
           await waitForSandboxTrip(page);
-          await page.click("[data-annotation-id='44R']");
+          await page.click(getAnnotationSelector("44R"));
           await checkColor([0, 0, 255]);
         })
       );
@@ -2451,7 +2453,7 @@ describe("Interaction", () => {
     let pages;
 
     beforeEach(async () => {
-      pages = await loadAndWait("bug1934157.pdf", "[data-annotation-id='24R']");
+      pages = await loadAndWait("bug1934157.pdf", getAnnotationSelector("24R"));
     });
 
     afterEach(async () => {
@@ -2488,7 +2490,7 @@ describe("Interaction", () => {
     let pages;
 
     beforeEach(async () => {
-      pages = await loadAndWait("issue19505.pdf", "[data-annotation-id='24R']");
+      pages = await loadAndWait("issue19505.pdf", getAnnotationSelector("24R"));
     });
 
     afterEach(async () => {
@@ -2517,7 +2519,7 @@ describe("Interaction", () => {
     let pages;
 
     beforeEach(async () => {
-      pages = await loadAndWait("dates.pdf", "[data-annotation-id='26R']");
+      pages = await loadAndWait("dates.pdf", getAnnotationSelector("26R"));
     });
 
     afterEach(async () => {
@@ -2530,7 +2532,7 @@ describe("Interaction", () => {
           await waitForScripting(page);
           await waitForSandboxTrip(page);
 
-          const firstInputSelector = "[data-annotation-id='26R'] > input";
+          const firstInputSelector = `${getAnnotationSelector("26R")} > input`;
           await page.waitForSelector(`${firstInputSelector}[type="text"]`);
           await page.click(firstInputSelector);
           await waitForSandboxTrip(page);
@@ -2539,7 +2541,7 @@ describe("Interaction", () => {
             el.value = "1975-03-16";
           });
 
-          const secondInputSelector = "[data-annotation-id='27R'] > input";
+          const secondInputSelector = `${getAnnotationSelector("27R")} > input`;
           await page.waitForSelector(`${secondInputSelector}[type="text"]`);
           await page.click(secondInputSelector);
           await waitForSandboxTrip(page);
@@ -2548,7 +2550,7 @@ describe("Interaction", () => {
             el.value = "01:23:45";
           });
 
-          const thirdInputSelector = "[data-annotation-id='28R'] > input";
+          const thirdInputSelector = `${getAnnotationSelector("28R")} > input`;
           await page.waitForSelector(`${thirdInputSelector}[type="text"]`);
           await page.click(thirdInputSelector);
           await waitForSandboxTrip(page);
@@ -2594,7 +2596,7 @@ describe("Interaction", () => {
     let pages;
 
     beforeEach(async () => {
-      pages = await loadAndWait("dates_save.pdf", "[data-annotation-id='26R']");
+      pages = await loadAndWait("dates_save.pdf", getAnnotationSelector("26R"));
     });
 
     afterEach(async () => {
@@ -2607,7 +2609,7 @@ describe("Interaction", () => {
           await waitForScripting(page);
           await waitForSandboxTrip(page);
 
-          const firstInputSelector = "[data-annotation-id='26R'] > input";
+          const firstInputSelector = `${getAnnotationSelector("26R")} > input`;
           await page.waitForSelector(`${firstInputSelector}[type="text"]`);
           await page.click(firstInputSelector);
           await waitForSandboxTrip(page);
@@ -2620,7 +2622,7 @@ describe("Interaction", () => {
             .withContext(`In ${browserName}`)
             .toEqual("2025-07-01");
 
-          const secondInputSelector = "[data-annotation-id='27R'] > input";
+          const secondInputSelector = `${getAnnotationSelector("27R")} > input`;
           await page.waitForSelector(`${secondInputSelector}[type="text"]`);
           await page.click(secondInputSelector);
           await waitForSandboxTrip(page);
@@ -2633,7 +2635,7 @@ describe("Interaction", () => {
             .withContext(`In ${browserName}`)
             .toEqual("00:34:56");
 
-          const thirdInputSelector = "[data-annotation-id='28R'] > input";
+          const thirdInputSelector = `${getAnnotationSelector("28R")} > input`;
           await page.waitForSelector(`${thirdInputSelector}[type="text"]`);
           await page.click(thirdInputSelector);
           await waitForSandboxTrip(page);