playwright: Play button cannot be found on VS code

Good Morning Playwright Team. I face an issue on Playwright where my green arrow button cannot be found. Could you assist me on this matter? (Shown in the photo below this sentence) Thank you so much for your assistance. I really appreciate it.

System info

• Playwright Version: [v1.XX]
• Operating System: [All, Windows 11, Ubuntu 20, macOS 13.2, etc.]
• Browser: [All, Chromium, Firefox, WebKit]
• Other info:

Source code

• I provided exact source code that allows reproducing the issue locally.

Link to the GitHub repository with the repro

[https://github.com/your_profile/playwright_issue_title]

or

Config file

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], },
    },
});

Test file (self-contained)

it('should check the box using setChecked', async ({ page }) => {
  await page.setContent(`<input id='checkbox' type='checkbox'></input>`);
  await page.getByRole('checkbox').check();
  await expect(page.getByRole('checkbox')).toBeChecked();
});

Steps

• [Run the test]
• […]

Expected

[Describe expected behavior]

Actual

[Describe actual behavior]