work in progress with deno

test/scripts/forms.ts

@@ -1,17 +1,52 @@
-import type { Page } from "playwright";
+import type { Locator, Page } from "playwright";
 
-async function toggleOnOff({page}:{page:Page}, label: string, on: boolean) : Promise<void>{
+/*
+  CKEditor - The WYSIWYG Editor https://ckeditor.com/wysiwyg-editor-open-source/
+*/
+async function CKEditor(
+  { page }: { page: Page },
+  inputName: string,
+  value: string,
+): Promise<void> {
+  const col = page.locator("td", {
+    has: page.locator(`textarea[name="${inputName}"]`),
+  });
+  // const htmlEditor = col.frameLocator('iframe').locator('body');
+  const rawHTMLEditor = col.locator("textarea.cke_editable");
 
-    const row = page.locator("tr").filter({
-      has: page.locator("td", { hasText: label }),
-    });
-    const hideBtn = row.locator(`[title="Désactivé"]`);
-    const showBtn = row.locator(`[title="Actif"]`);
-    if (!await hideBtn.isVisible() && !await showBtn.isVisible()) {
-      throw new Error("Show/Hide button not found");
-    }
-    if (on && await hideBtn.isVisible()) await hideBtn.click();
-    if (!on && await showBtn.isVisible()) await showBtn.click();
+  const htmlToggleBtn = col.getByRole("button").filter({ hasText: /Source/ });
+  await htmlToggleBtn.click();
+  await rawHTMLEditor.fill(value);
+  await htmlToggleBtn.click();
+}
+
+/*
+  Ace - The High Performance Code Editor for the Web https://ace.c9.io/
+*/
+async function ACE(
+  { page }: { page: Page },
+  inputName: string,
+  value: string,
+): Promise<void> {
+  const input = page.locator(`pre[id="${inputName}"]`).locator("textarea");
+  await input.focus();
+  const CtrlKey = Deno.build.os === 'darwin' ? 'Meta' : 'Control';
+  await page.keyboard.press(CtrlKey+"+A")
+  await page.keyboard.press("Backspace")
+  await input.fill(value);
+}
+
+async function toggleOnOff(
+  containerLocator: Locator,
+  on: boolean,
+): Promise<void> {
+  const hideBtn = containerLocator.locator(`[title="Désactivé"]`);
+  const showBtn = containerLocator.locator(`[title="Actif"], [title="Activé"]`);
+  if (!await hideBtn.isVisible() && !await showBtn.isVisible()) {
+    throw new Error("Show/Hide button not found");
+  }
+  if (on && await hideBtn.isVisible()) await hideBtn.click();
+  if (!on && await showBtn.isVisible()) await showBtn.click();
 }
 
 // Fonction générique `fillForm` pour remplir des formulaires
@@ -19,7 +54,7 @@ async function fillForm<T>(
   { page, imgFolderPath }: { page: Page; imgFolderPath: string },
   data: T,
   inputNames: Map<keyof T, string>,
-  submit: number = 0,
+  submit: number = 0, // submit is a number to specify which submit buttton to use, 0 means no submit
 ) {
   for (const [attr, input] of inputNames) {
     const attrValue = data[attr];
@@ -43,20 +78,19 @@ async function fillForm<T>(
         );
         break;
       }
-      case "cke": { // CKEditor https://ckeditor.com/wysiwyg-editor-open-source/
-        const col = page.locator("td", {has: page.locator(`textarea[name="${inputName}"]`)});
-        const htmlEditor = col.frameLocator('iframe').locator('body');
-        const rawHTMLEditor = col.locator('textarea.cke_editable');
-
-        const htmlToggleBtn = col.getByRole("button").filter({hasText: /Source/});
-        await htmlToggleBtn.click();
-        await rawHTMLEditor.fill(attrValue as string);
-        await htmlToggleBtn.click();
-        await htmlEditor.screenshot({path: 'save.png'});
+      case "cke":
+        CKEditor({ page }, inputName, attrValue as string);
+        break;
+      case "ace":
+        await ACE({ page }, inputName, attrValue as string);
         break;
-      }
       case "toggle":
-        await toggleOnOff({page}, inputName, Boolean(JSON.parse(attrValue as string)))
+        await toggleOnOff(
+          page.locator("tr").filter({
+            has: page.locator("td", { hasText: inputName }),
+          }),
+          Boolean(JSON.parse(attrValue as string)),
+        );
         break;
       default:
         await page.fill(
@@ -72,4 +106,7 @@ async function fillForm<T>(
 
 export default {
   fillForm,
+  toggleOnOff,
+  CKEditor,
+  ACE,
 };