feat: added auth as pre-requisite for the other tests (#4031)

* feat: added auth as pre-requisite for the other tests

* feat: added navigation checks

* feat: added navigation checks

.gitignore

@@ -61,3 +61,4 @@ e2e/test-results/
 e2e/playwright-report/
 e2e/blob-report/
 e2e/playwright/.cache/
+e2e/.auth

e2e/playwright.config.ts

@@ -30,4 +30,17 @@ export default defineConfig({
     baseURL:
       process.env.PLAYWRIGHT_TEST_BASE_URL || "https://stagingapp.signoz.io/",
   },
+
+  projects: [
+    { name: "setup", testMatch: /.*\.setup\.ts/ },
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+        // Use prepared auth state.
+        storageState: ".auth/user.json",
+      },
+      dependencies: ["setup"],
+    },
+  ],
 });

e2e/tests/auth.setup.ts

@@ -4,6 +4,8 @@ import dotenv from "dotenv";
 
 dotenv.config();
 
+const authFile = ".auth/user.json";
+
 test("E2E Login Test", async ({ page }) => {
   await Promise.all([page.goto("/"), page.waitForRequest("**/version")]);
 
@@ -30,4 +32,6 @@ test("E2E Login Test", async ({ page }) => {
   await page.locator('button[data-attr="signup"]').click();
 
   await expect(page).toHaveURL(ROUTES.APPLICATION);
+
+  await page.context().storageState({ path: authFile });
 });

e2e/tests/contants.ts

@@ -0,0 +1,10 @@
+export const SERVICE_TABLE_HEADERS = {
+  APPLICATION: "Applicaton",
+  P99LATENCY: "P99 latency (in ms)",
+  ERROR_RATE: "Error Rate (% of total)",
+  OPS_PER_SECOND: "Operations Per Second",
+};
+
+export const DATA_TEST_IDS = {
+  NEW_DASHBOARD_BTN: "create-new-dashboard",
+};

e2e/tests/navigation.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from "@playwright/test";
+import ROUTES from "../../frontend/src/constants/routes";
+import { DATA_TEST_IDS, SERVICE_TABLE_HEADERS } from "./contants";
+
+test("Basic Navigation Check across different resources", async ({ page }) => {
+  // route to services page and check if the page renders fine with BE contract
+  await Promise.all([
+    page.goto(ROUTES.APPLICATION),
+    page.waitForRequest("**/v1/services"),
+  ]);
+
+  const p99Latency = page.locator(
+    `th:has-text("${SERVICE_TABLE_HEADERS.P99LATENCY}")`
+  );
+
+  await expect(p99Latency).toBeVisible();
+
+  // route to the new trace explorer page and check if the page renders fine
+  await page.goto(ROUTES.TRACES_EXPLORER);
+
+  await page.waitForLoadState("networkidle");
+
+  const listViewTable = await page
+    .locator('div[role="presentation"]')
+    .isVisible();
+
+  expect(listViewTable).toBeTruthy();
+
+  // route to the dashboards page and check if the page renders fine
+  await Promise.all([
+    page.goto(ROUTES.ALL_DASHBOARD),
+    page.waitForRequest("**/v1/dashboards"),
+  ]);
+
+  const newDashboardBtn = await page
+    .locator(`data-testid=${DATA_TEST_IDS.NEW_DASHBOARD_BTN}`)
+    .isVisible();
+
+  expect(newDashboardBtn).toBeTruthy();
+});