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

Code before:
      name: translations.settings.email.heading
    });
    await expect(saveEmailButton).toBeVisible();
    await saveEmailButton.click();
    const noWeeklyBtn = page.getByText(translations.buttons['no-thanks']);
    await expect(noWeeklyBtn).toBeVisible();
    await noWeeklyBtn.click();
    await expect(
      page
        .getByRole('group', { name: "Send me Quincy's weekly email" })
        .locator('p')
    ).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
        .locator('p')
        .filter({ hasText: translations.settings.labels['my-profile'] })
    ).toBeVisible();
    await expect(
      page
        .locator('p')
        .filter({ hasText: translations.settings.labels['my-name'] })
    ).toBeVisible();
    await expect(
      page
        .locator('p')
        .filter({ hasText: translations.settings.labels['my-about'] })
    ).toBeVisible();
    await expect(
      page
        .locator('p')
        .filter({ hasText: translations.settings.labels['my-points'] })
    ).toBeVisible();
    await expect(
      page
        .locator('p')
        .filter({ hasText: translations.settings.labels['my-certs'] })
    ).toBeVisible();
    await expect(
      page
        .locator('p')
        .filter({ hasText: translations.settings.labels['my-donations'] })

Review comment (suggestion):
Could we use `getByRole('group')` to query the item first, then locate its `p`? That would ensure the page is accessible (with the `getByRole` usage), and I assume it also speeds up the test a little since it doesn't have to query all the `p` elements then perform a filtering.

Code after:
      page
        .getByRole('group', {
          name: translations.settings.labels['my-donations']
        })
        .locator('p')
        .filter({ hasText: translations.settings.labels['my-donations'] })
    ).toBeVisible();
    await expect(
      page
        .getByRole('group', {
          name: translations.settings.labels['my-heatmap']
        })
        .locator('p')
        .filter({ hasText: translations.settings.labels['my-heatmap'] })
    ).toBeVisible();
    await expect(
      page
        .getByRole('group', {
          name: translations.settings.labels['my-location']
        })
        .locator('p')
        .filter({ hasText: translations.settings.labels['my-location'] })
    ).toBeVisible();
    await expect(
      page
        .getByRole('group', {
          name: translations.settings.labels['my-timeline']
        })
        .locator('p')
        .filter({ hasText: translations.settings.labels['my-timeline'] })
    ).toBeVisible();
    await expect(
      page
        .getByRole('group', {
          name: translations.settings.labels['my-portfolio']
        })
        .locator('p')
        .filter({ hasText: translations.settings.labels['my-portfolio'] })
    ).toBeVisible();
    await expect(
      page.getByText(settingsObject.private, { exact: true })
    ).toHaveCount(10);
    await expect(
      page.getByText(settingsObject.public, { exact: true })
    ).toHaveCount(10);
    const saveButton = page.getByRole('button', {
      name: translations.settings.headings.privacy
    });
    await expect(saveButton).toBeVisible();
    await saveButton.press('Enter');
    await expect(page.getByText(translations.settings.data)).toBeVisible();