chore(e2e): use ControlOrMeta and remove browserName (#55326)

e2e/challenge-reset-modal.spec.ts

@@ -43,7 +43,7 @@ test('should render the modal content correctly', async ({ page }) => {
   await expectToRenderResetModal(page);
 });
 
-test('User can reset challenge', async ({ page, isMobile, browserName }) => {
+test('User can reset challenge', async ({ page, isMobile }) => {
   const initialText = 'CatPhotoApp';
   const initialFrame = page
     .frameLocator('iframe[title="challenge preview"]')
@@ -64,7 +64,7 @@ test('User can reset challenge', async ({ page, isMobile, browserName }) => {
   // Modify the text in the editor pane, clearing first, otherwise the existing
   // text will be selected before typing
   await focusEditor({ page, isMobile });
-  await clearEditor({ page, browserName });
+  await clearEditor({ page });
   await getEditors(page).fill(updatedText);
   await expect(updatedFrame).toBeVisible({ timeout: 10000 });
 
@@ -160,11 +160,7 @@ test('should close when the user clicks the close button', async ({ page }) => {
   ).toBeHidden();
 });
 
-test('User can reset on a multi-file project', async ({
-  page,
-  isMobile,
-  browserName
-}) => {
+test('User can reset on a multi-file project', async ({ page, isMobile }) => {
   const sampleText = 'function palindrome() { return true; }';
 
   await page.goto(
@@ -172,7 +168,7 @@ test('User can reset on a multi-file project', async ({
   );
 
   await focusEditor({ page, isMobile });
-  await clearEditor({ page, browserName });
+  await clearEditor({ page });
   await getEditors(page).fill(sampleText);
   await expect(page.getByText(sampleText)).toBeVisible();
 
@@ -202,8 +198,7 @@ test.describe('Signed in user', () => {
 
   test('User can reset on a multi-file project after reloading and saving', async ({
     page,
-    isMobile,
-    browserName
+    isMobile
   }) => {
     test.setTimeout(60000);
     const savedText = 'function palindrome() { return true; }';
@@ -215,7 +210,7 @@ test.describe('Signed in user', () => {
 
     // This first edit should reappear after the reset
     await focusEditor({ page, isMobile });
-    await clearEditor({ page, browserName });
+    await clearEditor({ page });
     await getEditors(page).fill(savedText);
     await page.keyboard.press('Control+S');
 
@@ -223,7 +218,7 @@ test.describe('Signed in user', () => {
 
     // This second edit should be reset
     await focusEditor({ page, isMobile });
-    await clearEditor({ page, browserName });
+    await clearEditor({ page });
     await getEditors(page).fill(updatedText);
 
     await page
@@ -242,8 +237,7 @@ test.describe('Signed in user', () => {
 
   test('User can reset on a multi-file project without reloading', async ({
     page,
-    isMobile,
-    browserName
+    isMobile
   }) => {
     test.setTimeout(60000);
     const savedText = 'function palindrome() { return true; }';
@@ -255,13 +249,13 @@ test.describe('Signed in user', () => {
 
     // This first edit should reappear after the reset
     await focusEditor({ page, isMobile });
-    await clearEditor({ page, browserName });
+    await clearEditor({ page });
     await getEditors(page).fill(savedText);
     await page.keyboard.press('Control+S');
 
     // This second edit should be reset
     await focusEditor({ page, isMobile });
-    await clearEditor({ page, browserName });
+    await clearEditor({ page });
     await getEditors(page).fill(updatedText);
 
     await page

e2e/donation-modal.spec.ts

@@ -36,11 +36,9 @@ const completeFrontEndCert = async (page: Page) => {
 
 const completeThreeChallenges = async ({
   page,
-  browserName,
   isMobile
 }: {
   page: Page;
-  browserName: string;
   isMobile: boolean;
 }) => {
   await page.goto(
@@ -66,7 +64,7 @@ const completeThreeChallenges = async ({
     await page.waitForURL(challenge.url);
 
     await focusEditor({ page, isMobile });
-    await clearEditor({ page, browserName });
+    await clearEditor({ page });
 
     await page.evaluate(
       async contents => await navigator.clipboard.writeText(contents),
@@ -82,11 +80,9 @@ const completeThreeChallenges = async ({
 
 const completeTenChallenges = async ({
   page,
-  browserName,
   isMobile
 }: {
   page: Page;
-  browserName: string;
   isMobile: boolean;
 }) => {
   await page.goto(
@@ -140,7 +136,7 @@ const completeTenChallenges = async ({
     await page.waitForURL(challenge.url);
 
     await focusEditor({ page, isMobile });
-    await clearEditor({ page, browserName });
+    await clearEditor({ page });
 
     await page.evaluate(
       async contents => await navigator.clipboard.writeText(contents),

e2e/editor.spec.ts

@@ -33,15 +33,14 @@ test.describe('Editor Component', () => {
 test.describe('Python Terminal', () => {
   test('should display error message when the user enters invalid code', async ({
     page,
-    isMobile,
-    browserName
+    isMobile
   }) => {
     await page.goto(
       'learn/scientific-computing-with-python/learn-string-manipulation-by-building-a-cipher/step-2'
     );
 
     await focusEditor({ page, isMobile });
-    await clearEditor({ page, browserName });
+    await clearEditor({ page });
     // Then enter invalid code
     await page.keyboard.insertText('def');
     const preview = page.getByTestId('preview-pane');

e2e/lower-jaw.spec.ts

@@ -79,7 +79,6 @@ test('Checks hotkeys when instruction is focused', async ({
 
 test('Focuses on the submit button after tests passed', async ({
   page,
-  browserName,
   isMobile
 }) => {
   const editor = getEditors(page);
@@ -88,7 +87,7 @@ test('Focuses on the submit button after tests passed', async ({
     name: 'Submit and go to next challenge'
   });
   await focusEditor({ page, isMobile });
-  await clearEditor({ page, browserName });
+  await clearEditor({ page });
 
   await editor.fill(
     '<h2>Cat Photos</h2>\n<p>See more cat photos in our gallery.</p>'
@@ -100,7 +99,6 @@ test('Focuses on the submit button after tests passed', async ({
 
 test('Prompts unauthenticated user to sign in to save progress', async ({
   page,
-  browserName,
   isMobile
 }) => {
   await signout(page);
@@ -111,7 +109,7 @@ test('Prompts unauthenticated user to sign in to save progress', async ({
     name: 'Sign in to save your progress'
   });
   await focusEditor({ page, isMobile });
-  await clearEditor({ page, browserName });
+  await clearEditor({ page });
 
   await editor.fill(
     '<h2>Cat Photos</h2>\n<p>See more cat photos in our gallery.</p>'

e2e/navigation-from-last-challenge.spec.ts

@@ -61,13 +61,12 @@ test.describe('Should take you to the next superblock (with editor solution)', (
   test('at the end of a superblock should take you to the superblock page with the current block hash', async ({
     page,
     isMobile,
-    browserName,
     context
   }) => {
     await context.grantPermissions(['clipboard-read', 'clipboard-write']);
     await page.goto(rwdChallenge.url);
     await focusEditor({ page, isMobile });
-    await clearEditor({ page, browserName });
+    await clearEditor({ page });
 
     await page.evaluate(
       async solution => await navigator.clipboard.writeText(solution.content),

e2e/output.spec.ts

@@ -70,15 +70,14 @@ test.describe('For classic challenges', () => {
 
   test('shows test output when the tests are run', async ({
     page,
-    isMobile,
-    browserName
+    isMobile
   }) => {
     const closeButton = page.getByRole('button', { name: 'Close' });
     await expect(page).toHaveTitle(
       'Basic HTML and HTML5: Say Hello to HTML Elements |' + ' freeCodeCamp.org'
     );
 
-    await clearEditor({ browserName, page });
+    await clearEditor({ page });
     await insertTextInCodeEditor({
       page,
       isMobile,
@@ -95,11 +94,10 @@ test.describe('For classic challenges', () => {
 
   test('shows test output when the tests are triggered by the keyboard', async ({
     page,
-    isMobile,
-    browserName
+    isMobile
   }) => {
     const closeButton = page.getByRole('button', { name: 'Close' });
-    await clearEditor({ browserName, page });
+    await clearEditor({ page });
     await insertTextInCodeEditor({
       page,
       isMobile,

e2e/progress-bar.spec.ts

@@ -6,8 +6,7 @@ test.use({ storageState: 'playwright/.auth/certified-user.json' });
 test.describe('Progress bar component', () => {
   test('Should appear with the correct content after the user has submitted their code', async ({
     page,
-    isMobile,
-    browserName
+    isMobile
   }) => {
     await page.goto(
       '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
@@ -16,7 +15,7 @@ test.describe('Progress bar component', () => {
     // large. There's a bug that means `scrollIntoView` does not work in the
     // editor and so we have to pick less verbose challenges until that's fixed.
     await focusEditor({ page, isMobile });
-    await clearEditor({ page, browserName });
+    await clearEditor({ page });
 
     await page.keyboard.insertText(
       '<html><body><h1>CatPhotoApp</h1><h2>Cat Photos</h2><p>See more cat photos in our gallery.</p></body></html>'
@@ -36,14 +35,13 @@ test.describe('Progress bar component', () => {
 
   test('should appear in the completion modal after user has submitted their code', async ({
     page,
-    isMobile,
-    browserName
+    isMobile
   }) => {
     await page.goto(
       '/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables'
     );
     await focusEditor({ page, isMobile });
-    await clearEditor({ page, browserName });
+    await clearEditor({ page });
 
     await page.keyboard.insertText('var myName;');
 

e2e/projects.spec.ts

@@ -110,7 +110,6 @@ test.describe('JavaScript projects can be submitted and then viewed in /settings
 
   test('projects are submitted and viewed correctly', async ({
     page,
-    browserName,
     isMobile,
     request,
     context
@@ -149,7 +148,7 @@ test.describe('JavaScript projects can be submitted and then viewed in /settings
     );
 
     await focusEditor({ page, isMobile });
-    await clearEditor({ page, browserName });
+    await clearEditor({ page });
 
     await page.evaluate(
       async contents => await navigator.clipboard.writeText(contents),

e2e/utils/editor.ts

@@ -24,18 +24,7 @@ export const focusEditor = async ({
   await getEditors(page).focus();
 };
 
-export async function clearEditor({
-  page,
-  browserName
-}: {
-  page: Page;
-  browserName: string;
-}) {
-  // TODO: replace with ControlOrMeta when it's supported
-  if (browserName === 'webkit') {
-    await page.keyboard.press('Meta+a');
-  } else {
-    await page.keyboard.press('Control+a');
-  }
+export async function clearEditor({ page }: { page: Page }) {
+  await page.keyboard.press('ControlOrMeta+a');
   await page.keyboard.press('Backspace');
 }