From f10131acdb4fc77d4e4cedac711f7cda44c93bb5 Mon Sep 17 00:00:00 2001
From: Oleksandr Tkachenko <41586082+WOLFRIEND@users.noreply.github.com>
Date: Tue, 5 Mar 2024 12:17:03 +0200
Subject: [PATCH] fix(e2e, playwright): [Playwright] Flaky test in
 multifile-editor.spec.ts (#53031)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
---
 e2e/multifile-editor.spec.ts | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/e2e/multifile-editor.spec.ts b/e2e/multifile-editor.spec.ts
index ff852ae08b0..eca72f55515 100644
--- a/e2e/multifile-editor.spec.ts
+++ b/e2e/multifile-editor.spec.ts
@@ -8,7 +8,8 @@ test.beforeEach(async ({ page }) => {
 
 test.describe('MultifileEditor Component', () => {
   test('Multiple editors should be selected and able to insert text into', async ({
-    page
+    page,
+    isMobile
   }) => {
     // Spawn second editor to test MultifileEditor component
     const stylesEditor = page.getByRole('button', {
@@ -16,15 +17,23 @@ test.describe('MultifileEditor Component', () => {
     });
     await stylesEditor.click();
 
-    // Ensure two editors exist
-    const editors = await page.getByLabel('Editor content').all();
-    expect(editors.length).toBe(2);
+    // Use the `.toHaveCount()` assertion to ensure that the second editor is on the screen
+    // before moving onto other assertions.
+    // Note that using the `.all()` locator here would result a flaky test.
+    // Ref: https://github.com/freeCodeCamp/freeCodeCamp/pull/53031/files#r1500316812
+    const editors = page.getByLabel('Editor content');
+    await expect(editors).toHaveCount(2);
 
-    // Test text insertion works in both editors
     const test_string = 'TestString';
     let index = 0;
-    for (const editor of editors) {
-      await editor.click();
+    for (const editor of await editors.all()) {
+      // For some reason the click event doesn't work on mobile
+      if (isMobile) {
+        await editor.focus();
+      } else {
+        await editor.click();
+      }
+
       await page.keyboard.insertText(test_string + index.toString());
       const text = page.getByText(test_string + index.toString());
       await expect(text).toBeVisible();