Repository: freeCodeCamp/freeCodeCamp
File: e2e/challenge-title.spec.ts (TypeScript)

Code before:
import { test, expect, type Page } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';

test.beforeEach(async ({ page }) => {
  await page.goto(
    '/learn/information-security/python-for-penetration-testing/developing-a-port-scanner'
  );
});

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

const completeChallenge = async (page: Page) => {
  await page
    .getByText(
      'If there is an error or if no host is found, .connect() raises an exception while .connect_ex() returns an error code.'
    )
    .click({ force: true });

  await page
    .getByText(translations['buttons']['check-answer'], { exact: true })
    .click({ force: true });

  await page
    .getByText(translations['buttons']['go-to-next'])
    .click({ force: true });

  await page.waitForLoadState('domcontentloaded');

  await page.goto(
    '/learn/information-security/python-for-penetration-testing/developing-a-port-scanner'
  );

  await page.waitForLoadState();
};

test.describe('Challenge Title Component (signed out)', () => {
  test('should render correctly', async ({ page }) => {
    await expect(page.getByLabel('Passed')).not.toBeVisible();

    await expect(page.getByText('Developing a Port Scanner')).toBeVisible();
  });

Review comment (suggestion):
Could we query the element using `getByRole` instead?

```tsx
getByRole('radio', { name: 'If there is an error or if no host is found, .connect() raises an exception while .connect_ex() returns an error code.' })
```

The action would then be `.check({ force: true })` instead of `click()`.

Code after:
import { test, expect } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';

test.beforeEach(async ({ page }) => {
  await page.goto(
    '/learn/information-security/python-for-penetration-testing/developing-a-port-scanner'
  );
});

test.describe('Challenge Title Component (signed out)', () => {
  test.use({ storageState: { cookies: [], origins: [] } });

  test('should render correctly', async ({ page }) => {
    await expect(page.getByLabel('Passed')).not.toBeVisible();

    await expect(
      page.getByRole('heading', { name: 'Developing a Port Scanner' })
    ).toBeVisible();
  });

  test('should not display GreenPass after challenge completion', async ({
    page
  }) => {
    // Set `force: true` to bypass Playwright's check
    // as the radio is visually hidden and the click event is intercepted by the `span` element.
    await page
      .getByRole('radio', {
        name: 'If there is an error or if no host is found, .connect() raises an exception while .connect_ex() returns an error code.'
      })
      .click({ force: true });

    await page
      .getByRole('button', { name: translations.buttons['check-answer'] })
      .click();

    await page
      .getByRole('button', { name: translations.buttons['go-to-next'] })
      .click();

    // After clicking 'go-to-next' button, page redirects to courses list.
    // We need to wait for this navigation to be completed before navigating to the next
    // or Firefox will throw a NS_BINDING_ABORTED error.
    await page.waitForURL(