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

Code before:

  test.beforeAll(async ({ browser }) => {
    page = await browser.newPage();
    await page.goto('/settings');
  });

  test.afterAll(async () => {
    await page.close();
  });

  test('Should have the correct page title', async () => {
    await expect(page).toHaveTitle(settingsObject.pageTitle);
  });

  test('Should display the correct header', async () => {
    const header = page.getByTestId(settingsTestIds.settingsHeading);
    await expect(header).toBeVisible();
    await expect(header).toContainText(
      `${translations.settings.for.replace(
        settingsObject.userNamePlaceholder,
        settingsObject.certifiedUsername
      )}`
    );
  });

  test('Should validate Username Settings', async () => {
    await expect(
      page
        .locator('strong')
        .filter({ hasText: translations.settings.labels.username })
    ).toBeVisible();
    await expect(
      page.getByTestId(settingsTestIds.usernameSettings)
    ).toBeVisible();
    await page
      .getByTestId(settingsTestIds.usernameSettings)
      .fill(settingsObject.testUser);
    await expect(
      page.getByText(translations.settings.username.validating)
    ).toBeVisible();
    await page
      .getByTestId(settingsTestIds.usernameSettings)
      .fill(settingsObject.errorCode);
    await expect(
      page.getByText(
        translations.settings.username['is a reserved error code'].replace(
          settingsObject.userNamePlaceholder,
          settingsObject.errorCode
        )
      )
    ).toBeVisible();

Review comment (suggestion):
```suggestion
  test('Should validate Username Settings', async ({ page }) => {
```

Code after:
  });

  test('Should have the correct page title', async ({ page, browserName }) => {
    test.skip(browserName === 'webkit', 'csrf_token cookie is being deleted');
    await expect(page).toHaveTitle(settingsObject.pageTitle);
  });

  test('Should display the correct header', async ({ page, browserName }) => {
    test.skip(browserName === 'webkit', 'csrf_token cookie is being deleted');
    const header = page.getByTestId(settingsTestIds.settingsHeading);
    await expect(header).toBeVisible();
    await expect(header).toContainText(
      `${translations.settings.for.replace(
        settingsObject.userNamePlaceholder,
        settingsObject.certifiedUsername
      )}`
    );
  });

  test('Should validate Username Settings', async ({ page, browserName }) => {
    test.skip(browserName === 'webkit', 'csrf_token cookie is being deleted');
    const inputLabel = page.getByLabel(translations.settings.labels.username);
    await expect(inputLabel).toBeVisible();
    await inputLabel.fill(settingsObject.testUser);
    await expect(
      page.getByText(translations.settings.username.validating)
    ).toBeVisible();
    await inputLabel.fill(settingsObject.errorCode);
    await expect(
      page.getByText(
        translations.settings.username['is a reserved error code'].replace(
          settingsObject.userNamePlaceholder,
          settingsObject.errorCode
        )
      )
    ).toBeVisible();
    await inputLabel.fill(settingsObject.invalidUserName);
    await expect(
      page.getByText(
        translations.settings.username['contains invalid characters'].replace(
          settingsObject.userNamePlaceholder,
          settingsObject.invalidUserName
        )
      )
    ).toBeVisible();
    await inputLabel.fill(settingsObject.tooShortUserName);
    await expect(
      page.getByText(
        translations.settings.username['is too short'].replace(
          settingsObject.userNamePlaceholder,
          settingsObject.tooShortUserName