# Instructions

- Following Playwright test failed.
- Explain why, be concise, respect Playwright best practices.
- Provide a snippet of code with the fix, if possible.

# Test info

- Name: ui/component.test.ts >> Component UI Test Suite >> Verify Docs >> test docs
- Location: tests/ui/component.test.ts:172:5

# Error details

```
TimeoutError: Step timeout of 60000ms exceeded.
```

```
Error: expect(locator).toBeVisible() failed

Locator: getByTestId('techdocs-native-shadowroot')
Expected: visible
Timeout: 60000ms
Error: element(s) not found

Call log:
  - Expect "toBeVisible" with timeout 60000ms
  - waiting for getByTestId('techdocs-native-shadowroot')

```

# Page snapshot

```yaml
- generic [ref=e3]:
  - navigation [ref=e5]:
    - generic [ref=e6]:
      - link "Home" [ref=e8] [cursor=pointer]:
        - /url: /
        - img [ref=e9]
      - generic [ref=e18]:
        - img [ref=e20]
        - combobox "Search..." [ref=e22]
      - generic "Self-service" [ref=e25]:
        - link "Self-service" [ref=e26] [cursor=pointer]:
          - /url: /create
          - img [ref=e28]
      - button "Your starred items" [ref=e31] [cursor=pointer]:
        - img [ref=e32]
      - button "Application launcher" [ref=e35] [cursor=pointer]:
        - img [ref=e36]
      - button "Help" [ref=e39] [cursor=pointer]:
        - img [ref=e40]
      - separator [ref=e42]
      - button "Admin" [ref=e44] [cursor=pointer]:
        - generic [ref=e45]:
          - img [ref=e46]
          - paragraph [ref=e49]: Admin
          - img [ref=e50]
  - generic [ref=e53]:
    - navigation "sidebar nav":
      - generic [ref=e55]:
        - generic [ref=e58]:
          - link "Home" [ref=e60] [cursor=pointer]:
            - /url: /
            - img [ref=e64]
            - generic [ref=e66]: Home
          - link "Catalog" [ref=e68] [cursor=pointer]:
            - /url: /catalog
            - img [ref=e72]
            - generic [ref=e74]: Catalog
          - link "APIs" [ref=e76] [cursor=pointer]:
            - /url: /api-docs
            - img [ref=e80]
            - generic [ref=e82]: APIs
          - link "Learning Paths" [ref=e84] [cursor=pointer]:
            - /url: /learning-paths
            - img [ref=e88]
            - generic [ref=e90]: Learning Paths
          - separator [ref=e91]
          - link "Docs" [ref=e94] [cursor=pointer]:
            - /url: /docs
            - img [ref=e98]
            - generic [ref=e100]: Docs
        - generic [ref=e101]:
          - separator [ref=e102]
          - button "Administration" [ref=e103] [cursor=pointer]:
            - generic [ref=e104]:
              - img [ref=e108]
              - generic [ref=e111]: Administration
              - img [ref=e113]
    - main [ref=e115]:
      - generic [ref=e117]:
        - paragraph [ref=e118]: component
        - heading "backend-tests-go-dbafwepq" [level=1] [ref=e119]:
          - generic [ref=e121]: backend-tests-go-dbafwepq
      - article [ref=e122]:
        - alert [ref=e123]:
          - 'button "Warning: Entity not found" [ref=e124] [cursor=pointer]':
            - generic [ref=e125]:
              - img [ref=e126]
              - 'heading "Warning: Entity not found" [level=6] [ref=e128]'
            - img [ref=e131]
```

# Test source

```ts
  1  | import { expect, Page } from '@playwright/test';
  2  | import { checkWebsiteStatus } from '../../commonUi';
  3  | 
  4  | export class DocsUiPlugin {
  5  |     private readonly componentName: string;
  6  |     private readonly sourceRepoUrl: string;
  7  |     private readonly gitOpsRepoUrl: string;
  8  | 
  9  |     constructor(
  10 |         componentName: string,
  11 |         sourceRepoUrl: string,
  12 |         gitOpsRepoUrl: string
  13 |     ) {
  14 |         this.componentName = componentName;
  15 |         this.sourceRepoUrl = sourceRepoUrl;
  16 |         this.gitOpsRepoUrl = gitOpsRepoUrl;
  17 |     }
  18 | 
  19 |     // Check article displays
  20 |     async checkArticle(page: Page): Promise<void> {
  21 |         // Check the article is visible by checking its shadow root container
> 22 |         await expect(page.getByTestId('techdocs-native-shadowroot')).toBeVisible();
     |                                                                      ^ Error: expect(locator).toBeVisible() failed
  23 |     }
  24 | 
  25 |     // Check that the component name is visible
  26 |     async checkComponentName(page: Page): Promise<void> {
  27 |         await expect(page.getByRole('strong').filter({ hasText: this.componentName })).toBeVisible();
  28 |     }
  29 |     
  30 |     // Check that the source link is visible
  31 |     async checkSourceLink(page: Page): Promise<void> {
  32 |         const sourceLink = page.getByRole('link', { name: this.sourceRepoUrl, exact: true });
  33 |         await expect(sourceLink).toBeVisible();
  34 | 
  35 |         const href = await sourceLink.getAttribute('href');
  36 |         await checkWebsiteStatus(page, href!, [200]);
  37 |     }
  38 | 
  39 |     // Check that the gitops link is visible
  40 |     async checkGitopsLink(page: Page): Promise<void> {
  41 |         const gitOpsLink = page.getByRole('link', { name: this.gitOpsRepoUrl });
  42 |         await expect(gitOpsLink).toBeVisible();
  43 | 
  44 |         const href = await gitOpsLink.getAttribute('href');
  45 |         await checkWebsiteStatus(page, href!, [200]);
  46 |     }
  47 | }
  48 | 
```