feat: convert "mutlifile cert projects" spec to Playwright (#54994)

Co-authored-by: Naomi <accounts+github@nhcarrigan.com>

cypress/e2e/default/learn/challenges/multifile-cert-project.ts

@@ -1,64 +0,0 @@
-const save1text = 'save 1';
-const save2text = 'save 2';
-
-const editorElements = {
-  container: '.vertical .reflex-container',
-  editor: '.react-monaco-editor-container',
-  saveCodeBtn: '[data-cy="save-code-to-database-btn"]'
-};
-
-describe('multifileCertProjects', function () {
-  before(() => {
-    cy.task('seed');
-  });
-
-  beforeEach(() => {
-    cy.login();
-    cy.visit(
-      'learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page'
-    );
-  });
-
-  it('should save and reload user code', function () {
-    // save to database (savedChallenges) when clicking save code button
-    cy.get(editorElements.container).find(editorElements.editor).click();
-    // Firefox somehow can lose focus after the .clear()
-    cy.focused().clear().click().type(save1text);
-    cy.get(editorElements.editor).contains(save1text);
-    cy.get(editorElements.saveCodeBtn).click();
-    cy.contains('Your code was saved to the database.');
-    // load saved code on a hard refresh
-    cy.reload();
-    cy.get(editorElements.container)
-      .find(editorElements.editor)
-      .contains(save1text);
-  });
-
-  it('should save using ctrl+s hotkey and persist through navigation', function () {
-    // since rapid clicks will cause the save requests to be ignored, we have to
-    // purge the db:
-    cy.task('seed');
-    cy.get(editorElements.container).find(editorElements.editor).click();
-    cy.focused().clear().click().type(`${save2text}{ctrl+s}`);
-    cy.get(editorElements.editor).contains(save2text);
-    cy.contains('Your code was saved to the database.');
-    // close flash message
-    cy.get('button:contains("Close")').click();
-    // load saved code when navigating site (no hard refresh)'
-    cy.contains('Tribute Page').click();
-    cy.get(editorElements.container)
-      .find(editorElements.editor)
-      .contains(save2text);
-    // trigger the warning about saving too quickly
-    cy.reload();
-    cy.get(editorElements.container)
-      .find(editorElements.editor)
-      .click()
-      .focused()
-      .type(`{ctrl+s}`)
-      // wait a few ms or it's too fast
-      .wait(500)
-      .type(`{ctrl+s}`);
-    cy.contains('Your code was not saved.');
-  });
-});

e2e/multifile-cert-projects.spec.ts

@@ -0,0 +1,77 @@
+import { execSync } from 'child_process';
+import { test, expect } from '@playwright/test';
+import { focusEditor } from './utils/editor';
+import { isMacOS } from './utils/user-agent';
+test.use({ storageState: 'playwright/.auth/certified-user.json' });
+test.describe('multifileCertProjects', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(
+      'learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page'
+    );
+    execSync('node ./tools/scripts/seed/seed-demo-user certified-user');
+  });
+  test('should save and reload user code', async ({ page, isMobile }) => {
+    await focusEditor({ page, isMobile });
+
+    if (isMacOS) {
+      await page.keyboard.press('Meta+A');
+    } else {
+      await page.keyboard.press('Control+A');
+    }
+
+    await page.keyboard.press('Backspace');
+
+    await page.keyboard.type('save1text');
+    await expect(page.getByText('save1text')).toBeVisible();
+
+    await page.getByRole('button', { name: 'Save your Code' }).click();
+
+    await expect(page.getByTestId('flash-message')).toContainText(
+      /Your code was saved to the database\. It will be here when you return\./
+    );
+
+    await page.reload();
+
+    await expect(page.getByText('save1text')).toBeVisible();
+  });
+
+  test('should save using ctrl+s hotkey and persist through navigation', async ({
+    page,
+    isMobile
+  }) => {
+    await focusEditor({ page, isMobile });
+
+    if (isMacOS) {
+      await page.keyboard.press('Meta+A');
+    } else {
+      await page.keyboard.press('Control+A');
+    }
+
+    await page.keyboard.type('save2text');
+    await expect(page.getByText('save2text')).toBeVisible();
+
+    await page.keyboard.down('Control');
+    await page.keyboard.press('KeyS');
+
+    await expect(page.getByTestId('flash-message')).toContainText(
+      /Your code was saved to the database\. It will be here when you return\./
+    );
+
+    await page.getByRole('button', { name: 'Close' }).click();
+
+    await expect(page.getByText('save2text')).toBeVisible();
+
+    await page.reload();
+
+    await expect(page.getByText('save2text')).toBeVisible();
+
+    await focusEditor({ page, isMobile });
+
+    await page.keyboard.down('Control');
+    await page.keyboard.press('KeyS');
+
+    await expect(page.getByTestId('flash-message')).toContainText(
+      /Slow Down! Your code was not saved\. Try again in a few seconds\./
+    );
+  });
+});