feat: convert code storage test to Playwright (#54662)

cypress/e2e/default/learn/challenges/code-storage.ts

@@ -1,28 +0,0 @@
-import { selectors } from '../../../../support/selectors';
-
-const location =
-  '/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements';
-
-describe('Challenge with editor', function () {
-  it('the shortcut "Ctrl + S" saves the code', () => {
-    cy.visit(location);
-
-    // reloading without saving
-    const editorContents = `<h1>Hello</h1>`;
-    cy.get(selectors.class.reactMonacoEditor, { timeout: 10000 })
-      .as('editor')
-      .contains(editorContents);
-    cy.get('@editor').click().focused().type(`{movetoend}<h1>Hello World</h1>`);
-    cy.reload();
-    cy.get('@editor').contains(editorContents);
-
-    // reloading after saving
-    cy.get('@editor')
-      .click()
-      .focused()
-      .type(`{movetoend}<h1>Hello World</h1>{ctrl+s}`);
-    cy.contains("Saved! Your code was saved to your browser's local storage.");
-    cy.reload();
-    cy.get('@editor').contains('<h1>Hello</h1><h1>Hello World</h1>');
-  });
-});

e2e/code-storage.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+test.use({ storageState: 'playwright/.auth/certified-user.json' });
+test.describe('Challenge with editor', function () {
+  test('the shortcut "Ctrl + S" saves the code', async ({ page }) => {
+    await page.goto(
+      '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
+    );
+
+    const editor = page.locator('textarea');
+
+    await editor.fill('Something funny');
+    await page.keyboard.down('Control');
+    await page.keyboard.press('S');
+
+    await expect(
+      page.getByText(
+        "Saved! Your code was saved to your browser's local storage."
+      )
+    ).toBeVisible();
+
+    await page.reload();
+
+    // check editor content
+    await expect(editor).toHaveValue(/Something funny/);
+  });
+});