From 521bc7d06f26fa1b5808d2435f149758baef760b Mon Sep 17 00:00:00 2001
From: Sem Bauke <semboot699@gmail.com>
Date: Tue, 7 May 2024 09:02:40 +0200
Subject: [PATCH] feat: convert code storage test to Playwright (#54662)

---
 .../default/learn/challenges/code-storage.ts  | 28 -------------------
 e2e/code-storage.spec.ts                      | 26 +++++++++++++++++
 2 files changed, 26 insertions(+), 28 deletions(-)
 delete mode 100644 cypress/e2e/default/learn/challenges/code-storage.ts
 create mode 100644 e2e/code-storage.spec.ts

diff --git a/cypress/e2e/default/learn/challenges/code-storage.ts b/cypress/e2e/default/learn/challenges/code-storage.ts
deleted file mode 100644
index 57e6547ffd8..00000000000
--- a/cypress/e2e/default/learn/challenges/code-storage.ts
+++ /dev/null
@@ -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>');
-  });
-});
diff --git a/e2e/code-storage.spec.ts b/e2e/code-storage.spec.ts
new file mode 100644
index 00000000000..3b5593790ad
--- /dev/null
+++ b/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/);
+  });
+});