feat: convert backend test to Playwright (#54641)

.github/workflows/temporary-container-checks.yml

@@ -158,4 +158,4 @@ jobs:
           config: baseUrl=http://localhost:8000
           browser: ${{ matrix.browsers }}
           # Only run one test to keep the run time down.
-          spec: 'cypress/e2e/default/learn/challenges/backend.ts'
+          spec: 'cypress/e2e/default/learn/challenges/codeally.ts'

cypress/e2e/default/learn/challenges/backend.ts

@@ -1,36 +0,0 @@
-import { selectors } from '../../../../support/selectors';
-
-const locations = {
-  index:
-    'learn/back-end-development-and-apis/managing-packages-with-npm/' +
-    'how-to-use-package-json-the-core-of-any-node-js-project-or-npm-package'
-};
-
-const unhandledErrorMessage = 'Something is not quite right';
-const runningOutput = '// running tests';
-const finishedOutput = '// tests completed';
-
-describe('Backend challenge', function () {
-  it('renders', () => {
-    cy.visit(locations.index);
-
-    cy.title().should(
-      'eq',
-      'Managing Packages with NPM - How to Use package.json, the Core of Any' +
-        ' Node.js Project or npm Package | Learn | freeCodeCamp.org'
-    );
-  });
-
-  it('does not generate unhandled errors on submission', () => {
-    cy.visit(locations.index);
-    cy.get(selectors.tag.inputSolution)
-      .type('https://example.com')
-      .type('{enter}')
-      .then(() => {
-        cy.get(selectors.dataCy.outputText)
-          .contains(runningOutput)
-          .contains(finishedOutput);
-        cy.contains(unhandledErrorMessage).should('not.exist');
-      });
-  });
-});

e2e/backend.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from '@playwright/test';
+
+const locations = {
+  index:
+    'learn/back-end-development-and-apis/managing-packages-with-npm/' +
+    'how-to-use-package-json-the-core-of-any-node-js-project-or-npm-package'
+};
+
+const unhandledErrorMessage = 'Something is not quite right';
+const runningOutput = '// running tests';
+const finishedOutput = '// tests completed';
+
+test.describe('Backend challenge', () => {
+  test('renders', async ({ page }) => {
+    await page.goto(locations.index);
+    await expect(page).toHaveTitle(
+      'Managing Packages with NPM - How to Use package.json, the Core of Any Node.js Project or npm Package | Learn | freeCodeCamp.org'
+    );
+  });
+
+  test('does not generate unhandled errors on submission', async ({ page }) => {
+    await page.goto(locations.index);
+    await page.fill('input[name="solution"]', 'https://example.com');
+    await page.keyboard.press('Enter');
+
+    await expect(page.getByText(runningOutput)).toContainText(finishedOutput);
+
+    await expect(page.getByText(unhandledErrorMessage)).not.toBeVisible();
+  });
+});