refactor e2e : encapsulate image dialog selector in page object

Author: f2cmb

js/modules/TipTap/SlashCommandsExtension.js

@@ -50,7 +50,6 @@ function showImageDialog(editor, existing_attrs = null) {
 
     const dialog = document.createElement('div');
     dialog.className = 'image-dialog';
-    dialog.dataset.testid = 'image-dialog';
 
     const title = document.createElement('div');
     title.className = 'image-dialog-header';

tests/e2e/pages/KnowbaseItemPage.ts

@@ -72,6 +72,12 @@ export class KnowbaseItemPage extends GlpiPage
         return this._bubbleMenuHelper;
     }
 
+    public get imageDialog(): Locator
+    {
+        // eslint-disable-next-line playwright/no-raw-locators -- custom TipTap dialog, no ARIA role available
+        return this.page.locator('.image-dialog');
+    }
+
     public get subject(): Locator
     {
         // eslint-disable-next-line playwright/no-raw-locators -- Semantic data attribute used by ArticleController.js, not a test ID

tests/e2e/specs/Knowbase/Editor/image-insertion.spec.ts

@@ -57,7 +57,7 @@ test.describe('Knowledge Base Editor - Image Insertion', () => {
             await kb.slashMenu.open();
             await kb.slashMenu.selectByClick('Image');
 
-            const dialog = page.getByTestId('image-dialog');
+            const dialog = kb.imageDialog;
             await expect(dialog).toBeVisible();
 
             const dataUri = `data:image/png;base64,${TEST_IMAGE_BASE64}`;
@@ -86,7 +86,7 @@ test.describe('Knowledge Base Editor - Image Insertion', () => {
             await kb.slashMenu.open();
             await kb.slashMenu.selectByClick('Image');
 
-            const dialog = page.getByTestId('image-dialog');
+            const dialog = kb.imageDialog;
             await expect(dialog).toBeVisible();
 
             await dialog.getByRole('button', { name: 'Cancel' }).click();
@@ -112,7 +112,7 @@ test.describe('Knowledge Base Editor - Image Insertion', () => {
             await kb.slashMenu.open();
             await kb.slashMenu.selectByClick('Image');
 
-            const dialog = page.getByTestId('image-dialog');
+            const dialog = kb.imageDialog;
             await expect(dialog).toBeVisible();
 
             await page.keyboard.press('Escape');
@@ -136,7 +136,7 @@ test.describe('Knowledge Base Editor - Image Insertion', () => {
             await kb.slashMenu.open();
             await kb.slashMenu.selectByClick('Image');
 
-            const dialog = page.getByTestId('image-dialog');
+            const dialog = kb.imageDialog;
             await expect(dialog).toBeVisible();
 
             await dialog.getByRole('button', { name: 'Save' }).click();