CONSOLE-5417: Migrate dev-console Cypress tests to Playwright (batch 4)

frontend/e2e/pages/base-page.ts

@@ -1,4 +1,6 @@
-import { type Locator, type Page, expect } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
+
+import { expect } from '../fixtures';
 
 export async function getEditorContent(page: Page): Promise<string> {
   await page.waitForFunction(
@@ -166,14 +168,14 @@ export default abstract class BasePage {
       Administrator: ['Administrator', 'Core platform'],
       Developer: ['Developer'],
     };
-    const toggle = this.page.locator('[data-test-id="perspective-switcher-toggle"]');
+    const toggle = this.page.getByTestId('perspective-switcher-toggle');
     const labels = labelMap[target] || [target];
     const currentText = (await toggle.textContent()) || '';
     if (labels.some((label) => currentText.includes(label))) {
       return;
     }
     await this.robustClick(toggle);
-    const menuOption = this.page.locator('[data-test-id="perspective-switcher-menu-option"]');
+    const menuOption = this.page.getByTestId('perspective-switcher-menu-option');
     for (const label of labels) {
       const option = menuOption.filter({ hasText: label });
       if ((await option.count()) > 0) {

frontend/e2e/pages/dev-console/vulnerability-page.ts

@@ -0,0 +1,115 @@
+import type { Locator } from '@playwright/test';
+
+import BasePage from '../base-page';
+
+export class VulnerabilityPage extends BasePage {
+  private readonly vulnerabilitiesTab = this.page.getByTestId(
+    'horizontal-link-Vulnerabilities',
+  );
+  private readonly detailsTab = this.page.getByTestId('horizontal-link-Details');
+  private readonly yamlTab = this.page.getByTestId('horizontal-link-YAML');
+  private readonly affectedPodsTab = this.page.getByTestId('horizontal-link-Affected Pods');
+  private readonly vulnerabilityTable = this.page.locator(
+    '[aria-label="Image Manifest Vulnerabilities"]',
+  );
+  private readonly filterMenuToggle = this.page.getByTestId('console-select-menu-toggle');
+  private readonly vulnPopup = this.page.getByTestId('vul popup');
+  private readonly vulnAlertLink = this.page.getByTestId('Image Vulnerabilities');
+  private readonly viewAllLink = this.page.getByTestId('view-all');
+  private readonly vulnerabilityTypeSection = this.page.getByRole('group', {
+    name: 'Vulnerability type',
+  });
+
+  async navigateToProjectOverview(namespace: string): Promise<void> {
+    await this.goTo(`/project-details/ns/${namespace}`);
+  }
+
+  getVulnerabilitiesTab(): Locator {
+    return this.vulnerabilitiesTab;
+  }
+
+  getDetailsTab(): Locator {
+    return this.detailsTab;
+  }
+
+  getYamlTab(): Locator {
+    return this.yamlTab;
+  }
+
+  getAffectedPodsTab(): Locator {
+    return this.affectedPodsTab;
+  }
+
+  async clickVulnerabilitiesTab(): Promise<void> {
+    await this.robustClick(this.vulnerabilitiesTab);
+  }
+
+  getVulnerabilityTable(): Locator {
+    return this.vulnerabilityTable;
+  }
+
+  getFilterMenuToggle(): Locator {
+    return this.filterMenuToggle;
+  }
+
+  async clickFilterMenuToggle(): Promise<void> {
+    await this.robustClick(this.filterMenuToggle);
+  }
+
+  getVulnPopup(): Locator {
+    return this.vulnPopup;
+  }
+
+  getVulnAlertLink(): Locator {
+    return this.vulnAlertLink;
+  }
+
+  async clickVulnAlert(): Promise<void> {
+    await this.robustClick(this.vulnAlertLink);
+  }
+
+  async clickViewAll(): Promise<void> {
+    await this.robustClick(this.viewAllLink);
+  }
+
+  getVulnLink(index: number): Locator {
+    return this.page.getByTestId(`vuln-${index}`);
+  }
+
+  async clickVulnLink(index: number): Promise<void> {
+    await this.robustClick(this.getVulnLink(index));
+  }
+
+  getVulnImageLink(imageName: string): Locator {
+    return this.page.getByRole('link', { name: imageName });
+  }
+
+  async clickVulnImageLink(imageName: string): Promise<void> {
+    await this.robustClick(this.getVulnImageLink(imageName));
+  }
+
+  getVulnerabilityTypeSection(): Locator {
+    return this.vulnerabilityTypeSection;
+  }
+
+  getVulnerabilityTypeButton(typeName: string): Locator {
+    return this.page.getByRole('button', { name: typeName, exact: true });
+  }
+
+  async clickVulnerabilityType(typeName: string): Promise<void> {
+    await this.robustClick(this.getVulnerabilityTypeButton(typeName));
+  }
+
+  getSectionHeading(text: string): Locator {
+    return this.page.locator(`[data-test-section-heading="${text}"]`);
+  }
+
+  async selectFilterOption(optionId: string): Promise<void> {
+    const option = this.page.getByTestId('console-select-item').filter({ hasText: optionId });
+    await this.robustClick(option);
+  }
+
+  getFilterOption(text: string): Locator {
+    return this.page.getByTestId('console-select-item').filter({ hasText: text });
+  }
+}

frontend/e2e/tests/dev-console/vulnerability.spec.ts

@@ -0,0 +1,233 @@
+import type KubernetesClient from '../../clients/kubernetes-client';
+import { test, expect } from '../../fixtures';
+import { warmupSPA } from '../../pages/base-page';
+import { VulnerabilityPage } from '../../pages/dev-console/vulnerability-page';
+
+import { hasOperatorSubscription } from '../../utils/operator-check';
+
+const DEPLOYMENT_NAME = 'test-vulnerability';
+const QUAY_CSO_SUBSCRIPTION = 'quay-container-security-operator';
+
+const IMV_GROUP = 'secscan.quay.redhat.com';
+const IMV_VERSION = 'v1alpha1';
+const IMV_PLURAL = 'imagemanifestvulns';
+
+async function waitForIMVData(
+  k8sClient: KubernetesClient,
+  namespace: string,
+  timeoutMs = 180_000,
+): Promise<void> {
+  const start = Date.now();
+  while (Date.now() - start < timeoutMs) {
+    try {
+      const items = await k8sClient.listCustomResources(IMV_GROUP, IMV_VERSION, namespace, IMV_PLURAL);
+      if (items.length > 0) return;
+    } catch {
+      // CRD may not be registered yet — retry
+    }
+    await new Promise((r) => setTimeout(r, 10_000));
+  }
+  throw new Error(`ImageManifestVuln data not found in ${namespace} after ${timeoutMs}ms`);
+}
+
+test.describe(
+  'Image Vulnerability in Project',
+  { tag: ['@vulnerability', '@dev-console', '@regression'] },
+  () => {
+    let testNs: string;
+
+    test.beforeAll(async ({ k8sClient }) => {
+      const hasQuay = await hasOperatorSubscription(k8sClient, QUAY_CSO_SUBSCRIPTION);
+      // eslint-disable-next-line playwright/no-skipped-test
+      test.skip(!hasQuay, 'Requires Quay Container Security Operator');
+
+      testNs = `aut-image-vulnerability-${Date.now()}`;
+      await k8sClient.createNamespace(testNs, {
+        'pod-security.kubernetes.io/enforce': 'restricted',
+      });
+      await k8sClient.createCustomResource('apps', 'v1', testNs, 'deployments', {
+        apiVersion: 'apps/v1',
+        kind: 'Deployment',
+        metadata: { name: DEPLOYMENT_NAME, namespace: testNs },
+        spec: {
+          selector: { matchLabels: { app: 'quarkus' } },
+          replicas: 1,
+          template: {
+            metadata: { labels: { app: 'quarkus' } },
+            spec: {
+              automountServiceAccountToken: false,
+              containers: [{
+                name: 'quarkus',
+                image: 'quay.io/redhat-appstudio-qe/quarkus:7dd062e2e8cb4ba599185e48d628b65a',
+                command: ['sleep', 'infinity'],
+                ports: [{ containerPort: 8080 }],
+                resources: {
+                  requests: { cpu: '10m', memory: '32Mi' },
+                  limits: { cpu: '100m', memory: '128Mi' },
+                },
+                securityContext: {
+                  allowPrivilegeEscalation: false,
+                  readOnlyRootFilesystem: true,
+                  runAsNonRoot: true,
+                  seccompProfile: { type: 'RuntimeDefault' },
+                  capabilities: { drop: ['ALL'] },
+                },
+              }],
+            },
+          },
+        },
+      });
+      await waitForIMVData(k8sClient, testNs);
+    });
+
+    test.beforeEach(async ({ page }) => {
+      await warmupSPA(page);
+      const vulnPage = new VulnerabilityPage(page);
+      await vulnPage.switchPerspective('Developer');
+    });
+
+    test.afterAll(async ({ k8sClient }) => {
+      if (testNs) {
+        await k8sClient.deleteNamespace(testNs);
+      }
+    });
+
+    test('PV-01-TC01: Vulnerability tab shows Image Manifest vulnerabilities', async ({
+      page,
+    }) => {
+      const vulnPage = new VulnerabilityPage(page);
+
+      await test.step('Navigate to project overview and click Vulnerabilities tab', async () => {
+        await vulnPage.navigateToProjectOverview(testNs);
+        await expect(vulnPage.getVulnerabilitiesTab()).toBeVisible({ timeout: 60_000 });
+        await vulnPage.clickVulnerabilitiesTab();
+      });
+
+      await test.step('Verify vulnerability table is visible with expected columns', async () => {
+        const table = vulnPage.getVulnerabilityTable();
+        await expect(table).toBeVisible({ timeout: 60_000 });
+
+        for (const column of [
+          'Image name',
+          'Highest severity',
+          'Affected Pods',
+          'Fixable',
+          'Total',
+          'Manifest',
+        ]) {
+          await expect(table).toContainText(column);
+        }
+      });
+
+      await test.step('Verify Name filter is selected by default', async () => {
+        await expect(vulnPage.getFilterMenuToggle()).toHaveText('Name');
+      });
+    });
+
+    test('PV-01-TC03: Filter in vulnerability tab', async ({ page }) => {
+      const vulnPage = new VulnerabilityPage(page);
+
+      await test.step('Navigate to project overview', async () => {
+        await vulnPage.navigateToProjectOverview(testNs);
+      });
+
+      await test.step('Click Image Vulnerabilities alert in Status section', async () => {
+        await expect(vulnPage.getVulnAlertLink()).toBeVisible({ timeout: 60_000 });
+        await vulnPage.clickVulnAlert();
+        await expect(vulnPage.getVulnPopup()).toBeVisible();
+      });
+
+      await test.step('Click View all link and change filter to Label', async () => {
+        await vulnPage.clickViewAll();
+        await expect(vulnPage.getFilterMenuToggle()).toBeVisible();
+        await vulnPage.clickFilterMenuToggle();
+        await vulnPage.selectFilterOption('Label');
+      });
+
+      await test.step('Verify Label filter is now selected', async () => {
+        await expect(vulnPage.getFilterMenuToggle()).toHaveText('Label');
+      });
+    });
+
+    test('PV-01-TC04: Image manifests vulnerability details page', async ({ page }) => {
+      const vulnPage = new VulnerabilityPage(page);
+
+      await test.step('Navigate to project overview', async () => {
+        await vulnPage.navigateToProjectOverview(testNs);
+      });
+
+      await test.step('Click Image Vulnerabilities in Status section', async () => {
+        await expect(vulnPage.getVulnAlertLink()).toBeVisible({ timeout: 60_000 });
+        await vulnPage.clickVulnAlert();
+        await expect(vulnPage.getVulnPopup()).toBeVisible();
+      });
+
+      await test.step('Click on the first vulnerability image name', async () => {
+        await vulnPage.clickVulnLink(0);
+      });
+
+      await test.step('Click on Base image vulnerability type', async () => {
+        await expect(vulnPage.getVulnerabilityTypeSection()).toBeVisible({ timeout: 30_000 });
+        await vulnPage.clickVulnerabilityType('Base image');
+      });
+
+      await test.step('Verify Details, YAML, and Affected Pods tabs are visible', async () => {
+        await expect(vulnPage.getDetailsTab()).toBeVisible();
+        await expect(vulnPage.getYamlTab()).toBeVisible();
+        await expect(vulnPage.getAffectedPodsTab()).toBeVisible();
+      });
+
+      await test.step('Verify Base image tab is selected', async () => {
+        await expect(vulnPage.getVulnerabilityTypeButton('Base image')).toHaveAttribute(
+          'aria-pressed',
+          'true',
+        );
+      });
+    });
+
+    test('PV-01-TC05: Filters of vulnerability section in Image manifests vulnerability details page', async ({
+      page,
+    }) => {
+      test.slow();
+      const vulnPage = new VulnerabilityPage(page);
+
+      await test.step('Navigate to vulnerability details via project tab', async () => {
+        await vulnPage.navigateToProjectOverview(testNs);
+        await expect(vulnPage.getVulnerabilitiesTab()).toBeVisible({ timeout: 60_000 });
+        await vulnPage.clickVulnerabilitiesTab();
+
+        const vulnLink = vulnPage.getVulnImageLink('redhat-appstudio-qe/quarkus');
+        await expect(vulnLink).toBeVisible({ timeout: 120_000 });
+        await vulnPage.clickVulnImageLink('redhat-appstudio-qe/quarkus');
+        await expect(
+          vulnPage.getSectionHeading('Image Manifest Vulnerabilities details'),
+        ).toBeVisible({ timeout: 30_000 });
+      });
+
+      await test.step('Click App dependency type filter', async () => {
+        await expect(vulnPage.getVulnerabilityTypeSection()).toBeVisible({ timeout: 30_000 });
+        await vulnPage.clickVulnerabilityType('App dependency');
+      });
+
+      await test.step('Verify App dependency filter is selected', async () => {
+        await expect(vulnPage.getVulnerabilityTypeButton('App dependency')).toHaveAttribute(
+          'aria-pressed',
+          'true',
+        );
+      });
+
+      await test.step('Verify vulnerability details section is visible', async () => {
+        await expect(
+          vulnPage.getSectionHeading('Image Manifest Vulnerabilities details'),
+        ).toBeVisible();
+      });
+
+      await test.step('Verify severity filter is available', async () => {
+        await vulnPage.clickFilterMenuToggle();
+        for (const severity of ['Critical', 'High', 'Medium', 'Low']) {
+          await expect(vulnPage.getFilterOption(severity)).toBeVisible();
+        }
+      });
+    });
+  },
+);