# 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 ``` Error: expect(received).toContain(expected) // indexOf Expected value: 502 Received array: [200] ``` # 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=e116]: - generic [ref=e117]: - paragraph [ref=e118]: component — service - heading "e2e-tests-go-gtdyxkto Add to favorites" [level=1] [ref=e119]: - generic [ref=e120]: - generic "component:default/e2e-tests-go-gtdyxkto | service | Secure Supply Chain Example for Go Runtime http based application with advanced continuous integration pipeline covering building, CVE scanning, security scanning, signatures, attestations, SLSA provenance and SBOM along with Gitops-based continuous deployment." [ref=e122]: e2e-tests-go-gtdyxkto - button "Add to favorites" [ref=e123] [cursor=pointer]: - img [ref=e126] - generic [ref=e128]: - generic [ref=e130]: - paragraph [ref=e131]: Owner - paragraph [ref=e132]: - link "user:guest" [ref=e133] [cursor=pointer]: - /url: /catalog/default/user/guest - generic "user:default/guest" [ref=e134]: - img [ref=e136] - text: user:guest - generic [ref=e139]: - paragraph [ref=e140]: Lifecycle - paragraph [ref=e141]: experimental - button "more" [ref=e142] [cursor=pointer]: - img [ref=e144] - tablist "tabs" [ref=e150]: - tab "Overview" [ref=e151] [cursor=pointer] - tab "Topology" [ref=e152] [cursor=pointer] - tab "CI" [ref=e153] [cursor=pointer] - tab "CD" [ref=e154] [cursor=pointer] - tab "Kubernetes" [ref=e155] [cursor=pointer] - tab "Image Registry" [ref=e156] [cursor=pointer] - tab "API" [ref=e157] [cursor=pointer] - tab "Dependencies" [ref=e158] [cursor=pointer] - tab "Docs" [selected] [ref=e159] [cursor=pointer] - article [ref=e161]: - main [ref=e164]: - article [ref=e165]: - generic [ref=e166]: - combobox [ref=e169]: - generic [ref=e171]: - generic [ref=e172]: - button "Query" [disabled]: - generic: - img - textbox "Search" [ref=e173]: - /placeholder: Search e2e-tests-go-gtdyxkto docs - button "Open" [ref=e175] [cursor=pointer]: - img [ref=e177] - group - document [ref=e181]: - generic [ref=e182]: - link "Skip to content" [ref=e183] [cursor=pointer]: - /url: https://backstage-developer-hub-tssc-dh.apps.rosa.kx-6f925118cd.zkng.p3.openshiftapps.com/catalog/default/component/e2e-tests-go-gtdyxkto/docs/#trusted-application-pipeline-software-template - generic [ref=e184]: - main [ref=e185]: - generic [ref=e186]: - navigation "Navigation" [ref=e190]: - generic [ref=e191]: Documentation - list [ref=e192]: - listitem [ref=e193]: - link "Home" [ref=e194] [cursor=pointer]: - /url: https://backstage-developer-hub-tssc-dh.apps.rosa.kx-6f925118cd.zkng.p3.openshiftapps.com/catalog/default/component/e2e-tests-go-gtdyxkto/docs/ - generic [ref=e195]: Home - listitem [ref=e196]: - link "Source Component" [ref=e197] [cursor=pointer]: - /url: https://backstage-developer-hub-tssc-dh.apps.rosa.kx-6f925118cd.zkng.p3.openshiftapps.com/catalog/default/component/e2e-tests-go-gtdyxkto/docs/source-component/ - generic [ref=e198]: Source Component - listitem [ref=e199]: - link "Pipelines" [ref=e200] [cursor=pointer]: - /url: https://backstage-developer-hub-tssc-dh.apps.rosa.kx-6f925118cd.zkng.p3.openshiftapps.com/catalog/default/component/e2e-tests-go-gtdyxkto/docs/pipelines/ - generic [ref=e201]: Pipelines - listitem [ref=e202]: - link "GitOps Application" [ref=e203] [cursor=pointer]: - /url: https://backstage-developer-hub-tssc-dh.apps.rosa.kx-6f925118cd.zkng.p3.openshiftapps.com/catalog/default/component/e2e-tests-go-gtdyxkto/docs/gitops-application/ - generic [ref=e204]: GitOps Application - navigation "Table of contents" [ref=e208]: - generic [ref=e209]: Table of contents - list [ref=e210]: - listitem [ref=e211]: - link "Repositories" [ref=e212] [cursor=pointer]: - /url: https://backstage-developer-hub-tssc-dh.apps.rosa.kx-6f925118cd.zkng.p3.openshiftapps.com/catalog/default/component/e2e-tests-go-gtdyxkto/docs/#repositories - generic [ref=e213]: Repositories - listitem [ref=e214]: - link "Application namespaces" [ref=e215] [cursor=pointer]: - /url: https://backstage-developer-hub-tssc-dh.apps.rosa.kx-6f925118cd.zkng.p3.openshiftapps.com/catalog/default/component/e2e-tests-go-gtdyxkto/docs/#application-namespaces - generic [ref=e216]: Application namespaces - article [ref=e218]: - link "Edit this page" [ref=e219] [cursor=pointer]: - /url: https://github.com/rhtap-rhdh-qe/e2e-tests-go-gtdyxkto/edit/main/docs/index.md - img [ref=e220] - heading "Trusted Application Pipeline Software Template ¶" [level=1] [ref=e222]: - text: Trusted Application Pipeline Software Template - link "¶" [ref=e223] [cursor=pointer]: - /url: https://backstage-developer-hub-tssc-dh.apps.rosa.kx-6f925118cd.zkng.p3.openshiftapps.com/catalog/default/component/e2e-tests-go-gtdyxkto/docs/#trusted-application-pipeline-software-template - paragraph [ref=e224]: - text: This application, - strong [ref=e225]: e2e-tests-go-gtdyxkto - text: ", was created from a Trusted Application Pipeline Software Template." - paragraph [ref=e226]: The software templates create a new source and gitops deployment repositories with a sample source application. - heading "Repositories ¶" [level=2] [ref=e227]: - text: Repositories - link "¶" [ref=e228] [cursor=pointer]: - /url: https://backstage-developer-hub-tssc-dh.apps.rosa.kx-6f925118cd.zkng.p3.openshiftapps.com/catalog/default/component/e2e-tests-go-gtdyxkto/docs/#repositories - paragraph [ref=e229]: - text: The source code for your application can be found in - link "https://github.com/rhtap-rhdh-qe/e2e-tests-go-gtdyxkto" [ref=e230] [cursor=pointer]: - /url: https://github.com/rhtap-rhdh-qe/e2e-tests-go-gtdyxkto - text: . - paragraph [ref=e231]: - text: The gitops repository, which contains the kubernetes manifests for the application can be found in - link "https://github.com/rhtap-rhdh-qe/e2e-tests-go-gtdyxkto-gitops" [ref=e232] [cursor=pointer]: - /url: https://github.com/rhtap-rhdh-qe/e2e-tests-go-gtdyxkto-gitops - heading "Application namespaces ¶" [level=2] [ref=e233]: - text: Application namespaces - link "¶" [ref=e234] [cursor=pointer]: - /url: https://backstage-developer-hub-tssc-dh.apps.rosa.kx-6f925118cd.zkng.p3.openshiftapps.com/catalog/default/component/e2e-tests-go-gtdyxkto/docs/#application-namespaces - paragraph [ref=e235]: The default application will be found in the following namespaces. Applications can be deployed into unique namespaces or multiple software templates can also bet generated into the same group namespaces. - table [ref=e236]: - rowgroup [ref=e237]: - row "Namespace Description" [ref=e238]: - columnheader "Namespace" [ref=e239] - columnheader "Description" [ref=e240] - rowgroup [ref=e241]: - row "tssc-app-ci The namespace used for CI workloads" [ref=e242]: - cell "tssc-app-ci" [ref=e243]: - strong [ref=e244]: tssc-app-ci - cell "The namespace used for CI workloads" [ref=e245] - row "tssc-app-development The default application during development. Every build will be deployed to this namespace for testing." [ref=e246]: - cell "tssc-app-development" [ref=e247]: - strong [ref=e248]: tssc-app-development - cell "The default application during development. Every build will be deployed to this namespace for testing." [ref=e249] - row "tssc-app-stage The staging namespace for this application. Promotion from development to stage is manual via an update to the gitops repository in the components/e2e-tests-go-gtdyxkto/overlays/stage directory" [ref=e250]: - cell "tssc-app-stage" [ref=e251]: - strong [ref=e252]: tssc-app-stage - cell "The staging namespace for this application. Promotion from development to stage is manual via an update to the gitops repository in the components/e2e-tests-go-gtdyxkto/overlays/stage directory" [ref=e253]: - text: The staging namespace for this application. Promotion from development to stage is manual via an update to the - link "gitops repository" [ref=e254] [cursor=pointer]: - /url: https://github.com/rhtap-rhdh-qe/e2e-tests-go-gtdyxkto-gitops - text: in the components/e2e-tests-go-gtdyxkto/overlays/stage directory - row "tssc-app-prod The production namespace for this application. Promotion from stage to production is manual via an update to the gitops repository in the components/e2e-tests-go-gtdyxkto/overlays/prod directory" [ref=e255]: - cell "tssc-app-prod" [ref=e256]: - strong [ref=e257]: tssc-app-prod - cell "The production namespace for this application. Promotion from stage to production is manual via an update to the gitops repository in the components/e2e-tests-go-gtdyxkto/overlays/prod directory" [ref=e258]: - text: The production namespace for this application. Promotion from stage to production is manual via an update to the - link "gitops repository" [ref=e259] [cursor=pointer]: - /url: https://github.com/rhtap-rhdh-qe/e2e-tests-go-gtdyxkto-gitops - text: in the components/e2e-tests-go-gtdyxkto/overlays/prod directory - generic: - navigation "Footer": - 'link "Next: Source Component" [ref=e260] [cursor=pointer]': - /url: https://backstage-developer-hub-tssc-dh.apps.rosa.kx-6f925118cd.zkng.p3.openshiftapps.com/catalog/default/component/e2e-tests-go-gtdyxkto/docs/source-component/ - generic [ref=e261]: - text: Next - generic [ref=e262]: Source Component - img [ref=e264] ``` # Test source ```ts 1 | import { expect, Page, Locator } from '@playwright/test'; 2 | import { LoggerFactory } from '../logger/logger'; 3 | import type { Logger } from '../logger/logger'; 4 | 5 | const logger: Logger = LoggerFactory.getLogger('ui.common'); 6 | 7 | /** 8 | * Checks if a website URL returns an expected status code 9 | * @param page - The Playwright page object 10 | * @param href - The URL to check 11 | * @param expectedStatus - The expected HTTP status code (defaults to 200) 12 | */ 13 | export async function checkWebsiteStatus( 14 | page: Page, 15 | href: string, 16 | okStatuses: number[] = [200, 204, 301, 302, 307, 308] 17 | ): Promise { 18 | const response = await page.request.head(href); > 19 | expect(okStatuses).toContain(response.status()); | ^ Error: expect(received).toContain(expected) // indexOf 20 | } 21 | 22 | /** 23 | * Hides the Quick start side panel if it is visible 24 | * @param page - The Playwright page object 25 | */ 26 | export async function hideQuickStartIfVisible(page: Page): Promise { 27 | // Wait for the page to be loaded by checking the self service icon 28 | const selfServiceIcon = page.getByTestId('AddCircleOutlineIcon'); 29 | await selfServiceIcon.waitFor({ state: 'visible', timeout: 20000 }); 30 | 31 | // Wait for welcome paragraph to be visible 32 | const welcomeParagraph = page.getByText("Let's get you started with Developer Hub", { exact: true }); 33 | const hideButton = page.getByRole('button', { name: 'Hide' }); 34 | try { 35 | await welcomeParagraph.waitFor({ state: 'visible', timeout: 2000 }); 36 | await hideButton.click({ timeout: 2000 }); 37 | logger.debug('Paragraph visible; hiding Quick start side panel'); 38 | } catch { 39 | logger.debug('Paragraph not visible; skipping hide'); 40 | } 41 | 42 | await expect(welcomeParagraph).toBeHidden({ timeout: 10000 }); 43 | } 44 | 45 | export async function waitForPageLoad(page: Page, name: string) { 46 | const progressBars = page.getByRole('main').getByRole('progressbar'); 47 | // Get all progressbar elements and wait until all are hidden 48 | const bars = await progressBars.all(); 49 | await Promise.all( 50 | bars.map(bar => expect(bar).toBeHidden({ timeout: 90000 })) 51 | ); 52 | 53 | await expect(page.getByTestId('sidebar-root')).toBeAttached({ timeout: 30000 }); 54 | 55 | await expect(page.getByRole('heading', { name: name }).first()).toBeVisible({ timeout: 20000 }); 56 | await page.waitForLoadState(); 57 | } 58 | 59 | export async function openTab(page: Page, tabName: string) { 60 | const tab = page.getByRole('tablist').getByText(tabName); 61 | await tab.click(); 62 | } 63 | 64 | /** 65 | * Applies a blur filter to the locator element 66 | * @param locator - Locator to blur 67 | */ 68 | export async function blurLocator(locator: Locator): Promise { 69 | await locator.evaluate(el => { (el as HTMLElement).style.filter = 'blur(5px)'; }); 70 | } 71 | ```