ci/e2e tests against mobile (#55347)

Co-authored-by: sembauke <semboot699@gmail.com>

e2e/output.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect, type Page } from '@playwright/test';
 
 import translations from '../client/i18n/locales/english/translations.json';
-import { clearEditor, getEditors } from './utils/editor';
+import { clearEditor, focusEditor, getEditors } from './utils/editor';
 
 const outputTexts = {
   default: `
@@ -25,29 +25,14 @@ interface InsertTextParameters {
   text: string;
 }
 
-const insertTextInCodeEditor = async ({
-  page,
-  isMobile,
-  text
-}: InsertTextParameters) => {
-  if (isMobile) {
-    await page
-      .getByRole('tab', { name: translations.learn['editor-tabs'].code })
-      .click();
-  }
+const insertTextInCodeEditor = async ({ page, text }: InsertTextParameters) => {
   await getEditors(page).fill(text);
-  if (isMobile) {
-    await page
-      .getByRole('tab', { name: translations.learn['editor-tabs'].console })
-      .click();
-  }
 };
 
 const runChallengeTest = async (page: Page, isMobile: boolean) => {
   if (isMobile) {
-    await page.getByRole('tab', { name: 'Code' }).click();
-    await page.getByText('Run').click();
     await page.getByRole('tab', { name: 'Console' }).click();
+    await page.getByText('Run').click();
   } else {
     await page.getByText('Run the Tests (Ctrl + Enter)').click();
   }
@@ -60,7 +45,11 @@ test.describe('For classic challenges', () => {
     );
   });
 
-  test('it renders the default output', async ({ page }) => {
+  test('it renders the default output', async ({ page, isMobile }) => {
+    if (isMobile) {
+      await page.getByRole('tab', { name: 'Console' }).click();
+    }
+
     await expect(
       page.getByRole('region', {
         name: translations.learn['editor-tabs'].console
@@ -77,8 +66,8 @@ test.describe('For classic challenges', () => {
     await expect(page).toHaveTitle(
       'Basic HTML and HTML5: Say Hello to HTML Elements |' + ' freeCodeCamp.org'
     );
-
-    await clearEditor({ browserName, page });
+    await focusEditor({ page, isMobile });
+    await clearEditor({ browserName, page, isMobile });
     await insertTextInCodeEditor({
       page,
       isMobile,
@@ -86,6 +75,7 @@ test.describe('For classic challenges', () => {
     });
     await runChallengeTest(page, isMobile);
     await closeButton.click();
+
     await expect(
       page.getByRole('region', {
         name: translations.learn['editor-tabs'].console
@@ -95,11 +85,11 @@ test.describe('For classic challenges', () => {
 
   test('shows test output when the tests are triggered by the keyboard', async ({
     page,
-    isMobile,
-    browserName
+    isMobile
   }) => {
+    test.skip(isMobile);
     const closeButton = page.getByRole('button', { name: 'Close' });
-    await clearEditor({ browserName, page });
+
     await insertTextInCodeEditor({
       page,
       isMobile,
@@ -107,6 +97,7 @@ test.describe('For classic challenges', () => {
     });
     await page.keyboard.press('Control+Enter');
     await closeButton.click();
+
     await expect(
       page.getByRole('region', {
         name: translations.learn['editor-tabs'].console
@@ -126,9 +117,11 @@ test.describe('Challenge Output Component Tests', () => {
     if (isMobile) {
       await page.getByRole('tab', { name: 'Console' }).click();
     }
+
     const outputConsole = page.getByRole('region', {
       name: translations.learn['editor-tabs'].console
     });
+
     await expect(outputConsole).toBeVisible();
     await expect(outputConsole).toHaveText(outputTexts.default);
   });
@@ -137,7 +130,13 @@ test.describe('Challenge Output Component Tests', () => {
     page,
     isMobile
   }) => {
+    await focusEditor({ page, isMobile });
     await insertTextInCodeEditor({ page, isMobile, text: 'var' });
+
+    if (isMobile) {
+      await page.getByRole('tab', { name: 'Console' }).click();
+    }
+
     await expect(
       page.getByRole('region', {
         name: translations.learn['editor-tabs'].console
@@ -151,7 +150,13 @@ test.describe('Challenge Output Component Tests', () => {
   }) => {
     const referenceErrorRegex =
       /ReferenceError: (myName is not defined|Can't find variable: myName)/;
+    await focusEditor({ page, isMobile });
     await insertTextInCodeEditor({ page, isMobile, text: 'myName' });
+
+    if (isMobile) {
+      await page.getByRole('tab', { name: 'Console' }).click();
+    }
+
     await expect(
       page.getByRole('region', {
         name: translations.learn['editor-tabs'].console
@@ -164,6 +169,7 @@ test.describe('Challenge Output Component Tests', () => {
     isMobile
   }) => {
     await runChallengeTest(page, isMobile);
+
     await expect(
       page.getByRole('region', {
         name: translations.learn['editor-tabs'].console
@@ -176,10 +182,11 @@ test.describe('Challenge Output Component Tests', () => {
     isMobile
   }) => {
     const closeButton = page.getByRole('button', { name: 'Close' });
-
+    await focusEditor({ page, isMobile });
     await insertTextInCodeEditor({ page, isMobile, text: 'var myName;' });
     await runChallengeTest(page, isMobile);
     await closeButton.click();
+
     await expect(
       page.getByRole('region', {
         name: translations.learn['editor-tabs'].console
@@ -190,11 +197,17 @@ test.describe('Challenge Output Component Tests', () => {
 
 test.describe('Jquery challenges', () => {
   test('Jquery challenge should render with default output', async ({
-    page
+    page,
+    isMobile
   }) => {
     await page.goto(
       '/learn/front-end-development-libraries/jquery/target-html-elements-with-selectors-using-jquery'
     );
+
+    if (isMobile) {
+      await page.getByRole('tab', { name: 'Console' }).click();
+    }
+
     await expect(
       page.getByRole('region', {
         name: translations.learn['editor-tabs'].console
@@ -218,17 +231,26 @@ test.describe('Custom output for Set and Map', () => {
     await page.goto(
       '/learn/javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code'
     );
+
+    await focusEditor({ page, isMobile });
+
     await insertTextInCodeEditor({
       page,
       isMobile,
       text: 'const set = new Set(); set.add(1); set.add("set"); set.add(10); console.log(set);'
     });
+
+    if (isMobile) {
+      await page.getByRole('tab', { name: 'Console' }).click();
+    }
+
     await expect(
       page.getByRole('region', {
         name: translations.learn['editor-tabs'].console
       })
     ).toContainText('Set(3) {1, set, 10}');
 
+    await focusEditor({ page, isMobile });
     await clearEditor({ browserName, page });
 
     await insertTextInCodeEditor({
@@ -237,6 +259,10 @@ test.describe('Custom output for Set and Map', () => {
       text: 'const map = new Map(); map.set(1, "one"); map.set("two", 2); console.log(map);'
     });
 
+    if (isMobile) {
+      await page.getByRole('tab', { name: 'Console' }).click();
+    }
+
     await expect(
       page.getByRole('region', {
         name: translations.learn['editor-tabs'].console