test(e2e): migrate image picture check tests to playwright (#54273)

cypress/e2e/default/settings/image-picture-check.ts

@@ -1,40 +0,0 @@
-describe('Picture input field', () => {
-  beforeEach(() => {
-    cy.login();
-    cy.visit('/settings');
-    // Setting aliases here
-    cy.get('#about-picture-input').as('pictureInput');
-  });
-
-  it('Should be possible to type', () => {
-    cy.get('@pictureInput')
-      .clear({ force: true })
-      .type('twaha', { force: true })
-      .should('have.attr', 'value', 'twaha');
-  });
-  it('Show an error message if an incorrect url was submitted', () => {
-    cy.get('@pictureInput')
-      .clear({ force: true })
-      .type('https://s3.amazonaws.com/freecodecamp/camper-image', {
-        force: true
-      })
-      .then(() => {
-        cy.contains('URL must link directly to an image file');
-      });
-  });
-  it('Can submit a correct URL', () => {
-    cy.get('@pictureInput')
-      .clear({ force: true })
-      .type(
-        'https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png',
-        {
-          force: true
-        }
-      );
-    cy.wait(500);
-    cy.get('#camper-identity')
-      .find('button')
-      .contains('Save')
-      .should('not.be.disabled');
-  });
-});

e2e/image-picture-check.spec.ts

@@ -0,0 +1,41 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Picture input field', () => {
+  test.use({ storageState: 'playwright/.auth/certified-user.json' });
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/settings');
+  });
+
+  test('Should be possible to type', async ({ page }) => {
+    const pictureInput = page.getByLabel('Picture');
+    await pictureInput.fill('');
+    await pictureInput.fill('twaha');
+    await expect(pictureInput).toHaveAttribute('value', 'twaha');
+  });
+
+  test('Show an error message if an incorrect url was submitted', async ({
+    page
+  }) => {
+    const pictureInput = page.getByLabel('Picture');
+    await pictureInput.fill('');
+    await pictureInput.fill(
+      'https://s3.amazonaws.com/freecodecamp/camper-image'
+    );
+    await expect(
+      page.getByText('URL must link directly to an image file')
+    ).toBeVisible();
+  });
+
+  test('Can submit a correct URL', async ({ page }) => {
+    const pictureInput = page.getByLabel('Picture');
+    await pictureInput.fill('');
+    await pictureInput.fill(
+      'https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png'
+    );
+
+    const form = page.getByTestId('camper-identity');
+    const saveButton = form.getByRole('button', { name: 'Save' });
+    await expect(saveButton).toBeEnabled();
+  });
+});