From 1c5c87774c88c6dcfc36418363d36e3eae5a09f1 Mon Sep 17 00:00:00 2001
From: Rahul Suresh <22114682+rahulsuresh-git@users.noreply.github.com>
Date: Thu, 28 Dec 2023 11:00:47 -0600
Subject: [PATCH] fix(e2e, playwright): resolved mobile test failures
 editor.spec.ts (#52518)

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

diff --git a/e2e/editor.spec.ts b/e2e/editor.spec.ts
index 4fc2864306b..6daffa92ac5 100644
--- a/e2e/editor.spec.ts
+++ b/e2e/editor.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
   await page.goto(
@@ -7,9 +7,22 @@ test.beforeEach(async ({ page }) => {
 });
 
 test.describe('Editor Component', () => {
-  test('Should be clicked and able to insert text', async ({ page }) => {
+  test('should allow the user to insert text', async ({
+    page,
+    isMobile,
+    browserName
+  }) => {
     const monacoEditor = page.getByLabel('Editor content');
-    await monacoEditor.click();
+
+    // The editor has an overlay div, which prevents the click event from bubbling up in iOS Safari.
+    // This is a quirk in this browser-OS combination, and the workaround here is to use `.focus()`
+    // in place of `.click()` to focus on the editor.
+    // Ref: https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
+    if (isMobile && browserName === 'webkit') {
+      await monacoEditor.focus();
+    } else {
+      await monacoEditor.click();
+    }
     await page.keyboard.insertText('<h2>FreeCodeCamp</h2>');
     const text = page.getByText('<h2>FreeCodeCamp</h2>');
     await expect(text).toBeVisible();