Repository: freeCodeCamp/freeCodeCamp
File: e2e/settings.spec.ts (TypeScript)

Code before:
      page.getByText(
        translations.settings.username['contains invalid characters'].replace(
          settingsObject.userNamePlaceholder,
          settingsObject.invalidUserName
        )
      )
    ).toBeVisible();
    await page
      .getByTestId(settingsTestIds.usernameSettings)
      .fill(settingsObject.tooShortUserName);
    await expect(
      page.getByText(
        translations.settings.username['is too short'].replace(
          settingsObject.userNamePlaceholder,
          settingsObject.tooShortUserName
        )
      )
    ).toBeVisible();
    await page
      .getByTestId(settingsTestIds.usernameSettings)
      .fill(settingsObject.certifiedUsername);
    const saveButton = page.getByRole('button', {
      name: translations.settings.labels.username
    });
    await expect(saveButton).toBeVisible();
    await saveButton.press('Enter');
  });

  test('Should validate Email Settings', async ({ page, browserName }) => {
    test.skip(browserName === 'webkit', 'csrf_token cookie is being deleted');
    await expect(
      page.getByRole('heading', { name: translations.settings.email.heading })
    ).toBeVisible();
    await expect(page.getByText(`${settingsObject.email}`)).toBeVisible();
    await expect(
      page.getByText(translations.settings.email.new, { exact: true })
    ).toBeVisible();
    await expect(
      page.getByText(translations.settings.email.confirm, { exact: true })
    ).toBeVisible();
    await expect(
      page
        .getByRole('group', { name: translations.settings.email.weekly })
        .locator('p')
    ).toBeVisible();
    await expect(
      page.getByText(translations.buttons['yes-please'])
    ).toBeVisible();
    await page
      .getByTestId(settingsTestIds.newEmail)
      .fill(settingsObject.testEmail);

Review comment (suggestion):
Let's remove the button press action here as the purpose of the test is only to ensure the form has proper validation. 

```suggestion
```

If we want to check if the button is enabled when the form is valid, we can have the following assertion instead:

```ts
await expect(saveButton).toBeEnabled();
```

If we want to test the form submission workflow, I think it should be moved to a separate test case, and there should be an assertion for the appearance of a flash message.

Code after:
    const saveButton = page.getByRole('button', {
      name: translations.settings.labels.username
    });
    await expect(saveButton).toBeVisible();
  });

  test('Should validate Privacy Settings', async ({ page, browserName }) => {
    test.skip(browserName === 'webkit', 'csrf_token cookie is being deleted');
    await expect(
      page.getByRole('heading', {
        name: translations.settings.headings.privacy
      })
    ).toBeVisible();
    await expect(page.getByText(translations.settings.privacy)).toBeVisible();
    await expect(
      page
        .getByRole('group', {
          name: translations.settings.labels['my-profile']
        })
        .locator('p')
        .filter({ hasText: translations.settings.labels['my-profile'] })
    ).toBeVisible();
    await expect(
      page
        .getByRole('group', {
          name: translations.settings.labels['my-name']
        })
        .locator('p')
        .filter({ hasText: translations.settings.labels['my-name'] })
    ).toBeVisible();
    await expect(
      page
        .getByRole('group', {
          name: translations.settings.labels['my-about']
        })
        .locator('p')
        .filter({ hasText: translations.settings.labels['my-about'] })
    ).toBeVisible();
    await expect(
      page
        .getByRole('group', {
          name: translations.settings.labels['my-points']
        })
        .locator('p')
        .filter({ hasText: translations.settings.labels['my-points'] })
    ).toBeVisible();
    await expect(
      page
        .getByRole('group', {
          name: translations.settings.labels['my-certs']
        })