feat: Convert "Certifications" spec to Playwright (#54965)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

client/src/components/profile/components/certifications.tsx

@@ -51,7 +51,7 @@ function CertButton({ username, cert }: CertButtonProps): JSX.Element {
         block
         size='large'
         href={`/certification/${username}/${cert.certSlug}`}
-        data-cy='claimed-certification'
+        data-playwright-test-label='claimed-certification'
       >
         {t('buttons.view-cert-title', {
           certTitle: t(`certification.title.${cert.certSlug}`)

client/src/components/settings/username.tsx

@@ -212,7 +212,6 @@ class UsernameSettings extends Component<UsernameProps, UsernameState> {
               name='username-settings'
               onChange={this.handleChange}
               value={formValue}
-              data-cy='username-input'
               id='username-settings'
             />
           </FormGroup>

e2e/cert-username-case-navigation.spec.ts

@@ -0,0 +1,46 @@
+import { execSync } from 'child_process';
+import { expect, test } from '@playwright/test';
+
+test.describe('Public profile certifications', () => {
+  test.use({ storageState: 'playwright/.auth/certified-user.json' });
+  test('Should show claimed certifications if the username has all lowercase characters', async ({
+    page
+  }) => {
+    await page.goto('/certifieduser');
+
+    // If you build the client locally, delete the button click below.
+    if (!process.env.CI) {
+      await page
+        .getByRole('button', { name: 'Preview custom 404 page' })
+        .click();
+    }
+
+    await expect(page.getByTestId('claimed-certification')).toHaveCount(19);
+  });
+
+  test('Should show claimed certifications if the username includes uppercase characters', async ({
+    page
+  }) => {
+    await page.goto('/settings');
+    await page.getByLabel('Username').fill('CertifiedBoozer');
+    await page.getByRole('button', { name: 'Save' }).nth(0).click();
+    await expect(page.getByTestId('flash-message')).toContainText(
+      /We have updated your username to/
+    );
+    await page.goto('/certifiedboozer');
+
+    // If you build the client locally, delete the button click below.
+    if (!process.env.CI) {
+      await page
+        .getByRole('button', { name: 'Preview custom 404 page' })
+        .click();
+    }
+
+    await page.waitForURL('/certifiedboozer');
+    await expect(page.getByTestId('claimed-certification')).toHaveCount(19);
+  });
+
+  test.afterAll(() => {
+    execSync('node ./tools/scripts/seed/seed-demo-user certified-user');
+  });
+});