From de316c95bb20e33c418953f215d3e72ae36c079a Mon Sep 17 00:00:00 2001
From: Rahul Suresh <22114682+rahulsuresh-git@users.noreply.github.com>
Date: Thu, 28 Dec 2023 10:34:51 -0600
Subject: [PATCH] fix(e2e, playwright): resolved mobile test failures
 preview.spec.ts (#52519)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
---
 e2e/preview.spec.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/e2e/preview.spec.ts b/e2e/preview.spec.ts
index 9590eca7c2b..de1e8033691 100644
--- a/e2e/preview.spec.ts
+++ b/e2e/preview.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 import translations from '../client/i18n/locales/english/translations.json';
 
 test.beforeEach(async ({ page }) => {
@@ -27,9 +27,19 @@ test.describe('Challenge Preview Component', () => {
 
   test('should render correct output of changed code', async ({
     page,
+    browserName,
     isMobile
   }) => {
-    await page.getByLabel('Editor content').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 page.getByLabel('Editor content').focus();
+    } else {
+      await page.getByLabel('Editor content').click();
+    }
+
     await page.keyboard.insertText('<h1>FreeCodeCamp</h1>');
     if (isMobile) {
       await page