Playwright Testing : Tracing Screens and Navbar (#1632)

* Remove Unwanted UI Tests * Playwright Test - Navbar * Basic Test For Tracing Screens * Use Common Functions * Fix Import Error * Clear package.json * Removed Selenium Related Files * Testing Cluster Stats Screen * Cluster-stats.test.js update
siglens · Sep 18, 2024 · d603f31 · d603f31
1 parent 8b05e80
commit d603f31
Show file tree

Hide file tree

Showing 30 changed files with 519 additions and 4,535 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "dependencies": {
     "@eslint/js": "^9.6.0",
+    "@playwright/test": "^1.47.1",
     "chai": "^4.3.6",
     "eslint": "^8.57.0",
     "eslint-config-jquery": "^3.0.2",
@@ -13,12 +14,9 @@
     "lodash": "^4.17.21",
     "mocha": "^10.0.0",
     "prettier": "^3.3.2",
-    "puppeteer": "^22.11.2",
-    "selenium-webdriver": "^4.15.0",
     "uuid": "^9.0.0"
   },
   "scripts": {
-    "test": "mocha ui-test/specs/common.js --recursive ui-test/specs",
     "prettier:format": "prettier static/js/*.js --write ",
     "lint:js": "eslint static/js/*.js --fix"
   }

diff --git a/playwright-tests/tests/application-version.test.js b/playwright-tests/tests/application-version.test.js
@@ -0,0 +1,14 @@
+const { test, expect } = require('@playwright/test');
+const { testThemeToggle } = require('./common-functions');
+
+test('Application Version Page Test', async ({ page }) => {
+    await page.goto('http://localhost:5122/application-version.html');
+
+    await page.waitForSelector('#versionInfo:not(:empty)', { timeout: 10000 });
+    const versionInfoText = await page.locator('#versionInfo').innerText();
+    // Check if the version info contains the expected text
+    expect(versionInfoText).toContain('SigLens Version:');
+
+    // Theme Button
+    await testThemeToggle(page);
+});
diff --git a/playwright-tests/tests/cluster-stats.test.js b/playwright-tests/tests/cluster-stats.test.js
@@ -0,0 +1,49 @@
+const { test, expect } = require('@playwright/test');
+const { testThemeToggle } = require('./common-functions');
+
+test('Cluster Stats Page Test', async ({ page }) => {
+    await page.goto('http://localhost:5122/cluster-stats.html');
+
+    // Check for the presence of key elements
+    await expect(page.locator('#app-side-nav')).toBeVisible();
+    await expect(page.locator('#app-content-area')).toBeVisible();
+    await expect(page.locator('#cstats-app-footer')).toBeVisible();
+
+    // Check the time picker
+    const datePickerBtn = page.locator('#date-picker-btn');
+    await expect(datePickerBtn).toBeVisible();
+    await datePickerBtn.click();
+    await expect(page.locator('.daterangepicker')).toBeVisible();
+
+    // Check for the presence of time range options
+    const timeRanges = ['1 Hr', '3 Hrs', '6 Hrs', '12 Hrs', '24 Hrs', '7 Days', '30 Days', '90 Days', '180 Days', '1 Year'];
+    for (const range of timeRanges) {
+        await expect(page.locator(`.range-item:text("${range}")`)).toBeVisible();
+    }
+
+    // Check for the presence of stats sections
+    await expect(page.locator('text=Logs Stats')).toBeVisible();
+    await expect(page.locator('text=Metrics Stats')).toBeVisible();
+    await expect(page.locator('text=Traces Stats')).toBeVisible();
+    await expect(page.locator('text=Query Stats')).toBeVisible();
+
+    // Check for the presence of charts
+    await expect(page.locator('#EventCountChart-logs')).toBeVisible();
+    await expect(page.locator('#GBCountChart-logs')).toBeVisible();
+    await expect(page.locator('#EventCountChart-metrics')).toBeVisible();
+    await expect(page.locator('#GBCountChart-metrics')).toBeVisible();
+    await expect(page.locator('#EventCountChart-trace')).toBeVisible();
+    await expect(page.locator('#GBCountChart-trace')).toBeVisible();
+
+    // Check for the presence of data tables
+    await expect(page.locator('#index-data-table')).toBeVisible();
+    await expect(page.locator('#metrics-data-table')).toBeVisible();
+    await expect(page.locator('#trace-data-table')).toBeVisible();
+    await expect(page.locator('#query-table')).toBeVisible();
+
+
+    //Theme button
+    await testThemeToggle(page);
+});
+
+
diff --git a/playwright-tests/tests/common-functions.js b/playwright-tests/tests/common-functions.js
@@ -0,0 +1,42 @@
+const { expect } = require('@playwright/test');
+
+async function testThemeToggle(page) {
+    const themeBtn = page.locator('#theme-btn');
+    const html = page.locator('html');
+    const initialTheme = await html.getAttribute('data-theme');
+    await themeBtn.click();
+    expect(await html.getAttribute('data-theme')).not.toBe(initialTheme);
+    await themeBtn.click();
+    expect(await html.getAttribute('data-theme')).toBe(initialTheme);
+}
+
+async function testDateTimePicker(page) {
+    // Check the date picker
+    const datePickerBtn = page.locator('#date-picker-btn');
+    await expect(datePickerBtn).toBeVisible();
+    await datePickerBtn.click();
+    await expect(page.locator('.daterangepicker')).toBeVisible();
+
+    // Check custom date range inputs
+    await expect(page.locator('#date-start')).toBeVisible();
+    await expect(page.locator('#time-start')).toBeVisible();
+    await expect(page.locator('#date-end')).toBeVisible();
+    await expect(page.locator('#time-end')).toBeVisible();
+    // Apply custom date range
+    await expect(page.locator('#customrange-btn')).toBeVisible();
+
+    // Predefined date range inputs
+    await page.click('#date-picker-btn');
+    await datePickerBtn.click();
+    await expect(page.locator('.daterangepicker')).toBeVisible();
+    const timeRangeOption = page.locator('#now-5m');
+    await timeRangeOption.click();
+    await expect(timeRangeOption).toHaveClass(/active/);
+    const datePickerButtonText = page.locator('#date-picker-btn span');
+    await expect(datePickerButtonText).toHaveText('Last 5 Mins');
+}
+
+module.exports = {
+    testDateTimePicker,
+    testThemeToggle,
+};
diff --git a/playwright-tests/tests/index.test.js b/playwright-tests/tests/index.test.js
@@ -1,73 +1,72 @@
 const { test, expect } = require('@playwright/test');
+const { testDateTimePicker, testThemeToggle } = require('./common-functions');
 
 test.describe('Logs Page Tests', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('http://localhost:5122/index.html');
-  });
-
-  test('verify date picker functionality', async ({ page }) => {
-    const datePickerBtn = page.locator('#date-picker-btn');
-
-    await expect(datePickerBtn).toHaveText('Last 15 Mins');
-    await datePickerBtn.click();
-    await expect(page.locator('.daterangepicker')).toBeVisible();
-    await datePickerBtn.click();
-    await expect(page.locator('.daterangepicker')).not.toBeVisible();
-  });
-
-  test('verify search and show records functionality', async ({ page }) => {
-    const searchButton = page.locator('#query-builder-btn');
-
-    await searchButton.click();
-    await expect(page.locator('#empty-response')).toBeVisible();
-
-    const showRecordsBtn = page.locator('#show-record-intro-btn');
-    await expect(showRecordsBtn).toBeVisible();
-
-    await showRecordsBtn.click();
-    await expect(page.locator('div[aria-describedby="show-record-popup"]')).toBeVisible();
-
-    const cancelRecordsBtn = page.locator('.cancel-record-btn');
-
-    await cancelRecordsBtn.click();
-    await expect(page.locator('div[aria-describedby="show-record-popup"]')).not.toBeVisible();
-  });
-
-  test('should switch between Builder and Code tabs', async ({ page }) => {
-    await expect(page.locator('#tabs-1')).toBeVisible();
-    await expect(page.locator('#tabs-2')).not.toBeVisible();
-
-    await page.click('#tab-title2');
-    await expect(page.locator('#tabs-1')).not.toBeVisible();
-    await expect(page.locator('#tabs-2')).toBeVisible();
-
-    await page.click('#tab-title1');
-    await expect(page.locator('#tabs-1')).toBeVisible();
-    await expect(page.locator('#tabs-2')).not.toBeVisible();
-  });
-
-  test('should open and close settings', async ({ page }) => {
-    const settingsContainer = page.locator('#setting-container');
-    const settingsButton = page.locator('#logs-settings');
-
-    await expect(settingsContainer).not.toBeVisible();
-    await settingsButton.click();
-    await expect(settingsContainer).toBeVisible();
-    await settingsButton.click();
-    await expect(settingsContainer).not.toBeVisible();
-  });
-
-  test('should change query language', async ({ page }) => {
-    await page.click('#logs-settings');
-    await page.click('#query-language-btn');
-    await page.click('#option-1');
-    await expect(page.locator('#query-language-btn span')).toHaveText('SQL');
-  });
-
-  test('should change query mode', async ({ page }) => {
-    await page.click('#logs-settings');
-    await page.click('#query-mode-btn');
-    await page.click('#mode-option-2');
-    await expect(page.locator('#query-mode-btn span')).toHaveText('Code');
-  });
-});
+    test.beforeEach(async ({ page }) => {
+        await page.goto('http://localhost:5122/index.html');
+    });
+
+    test('verify date picker functionality', async ({ page }) => {
+        await testDateTimePicker(page);
+    });
+
+    test('verify search and show records functionality', async ({ page }) => {
+        const searchButton = page.locator('#query-builder-btn');
+
+        await searchButton.click();
+        await expect(page.locator('#empty-response')).toBeVisible();
+
+        const showRecordsBtn = page.locator('#show-record-intro-btn');
+        await expect(showRecordsBtn).toBeVisible();
+
+        await showRecordsBtn.click();
+        await expect(page.locator('div[aria-describedby="show-record-popup"]')).toBeVisible();
+
+        const cancelRecordsBtn = page.locator('.cancel-record-btn');
+
+        await cancelRecordsBtn.click();
+        await expect(page.locator('div[aria-describedby="show-record-popup"]')).not.toBeVisible();
+    });
+
+    test('should switch between Builder and Code tabs', async ({ page }) => {
+        await expect(page.locator('#tabs-1')).toBeVisible();
+        await expect(page.locator('#tabs-2')).not.toBeVisible();
+
+        await page.click('#tab-title2');
+        await expect(page.locator('#tabs-1')).not.toBeVisible();
+        await expect(page.locator('#tabs-2')).toBeVisible();
+
+        await page.click('#tab-title1');
+        await expect(page.locator('#tabs-1')).toBeVisible();
+        await expect(page.locator('#tabs-2')).not.toBeVisible();
+    });
+
+    test('should open and close settings', async ({ page }) => {
+        const settingsContainer = page.locator('#setting-container');
+        const settingsButton = page.locator('#logs-settings');
+
+        await expect(settingsContainer).not.toBeVisible();
+        await settingsButton.click();
+        await expect(settingsContainer).toBeVisible();
+        await settingsButton.click();
+        await expect(settingsContainer).not.toBeVisible();
+    });
+
+    test('should change query language', async ({ page }) => {
+        await page.click('#logs-settings');
+        await page.click('#query-language-btn');
+        await page.click('#option-1');
+        await expect(page.locator('#query-language-btn span')).toHaveText('SQL');
+    });
+
+    test('should change query mode', async ({ page }) => {
+        await page.click('#logs-settings');
+        await page.click('#query-mode-btn');
+        await page.click('#mode-option-2');
+        await expect(page.locator('#query-mode-btn span')).toHaveText('Code');
+    });
+
+    test('should change theme', async ({ page }) => {
+        await testThemeToggle(page);
+    });
+});
diff --git a/playwright-tests/tests/navbar.test.js b/playwright-tests/tests/navbar.test.js
@@ -0,0 +1,98 @@
+const { test, expect } = require('@playwright/test');
+const { testThemeToggle } = require('./common-functions');
+
+test('Navigation Menu Functionality Tests', async ({ page }) => {
+    await page.goto('http://localhost:5122/index.html');
+    await expect(page.locator('.nav-search')).toHaveClass(/active/);
+
+    // Test all dropdown menus
+    const dropdowns = [
+        { toggle: '.metrics-dropdown-toggle', dropdown: '.metrics-dropdown' },
+        { toggle: '.tracing-dropdown-toggle', dropdown: '.traces-dropdown' },
+        { toggle: '.ingestion-dropdown-toggle', dropdown: '.ingestion-dropdown' },
+    ];
+
+    for (const { toggle, dropdown } of dropdowns) {
+        await page.hover(toggle);
+        await expect(page.locator(dropdown)).toBeVisible();
+
+        // Check all links in the dropdown
+        const links = await page.locator(`${dropdown} a`).all();
+        for (const link of links) {
+            await expect(link).toBeVisible();
+        }
+
+        await page.click('body');
+        await expect(page.locator(dropdown)).toBeHidden();
+    }
+
+    // Test help options
+    await page.hover('.nav-help');
+    await expect(page.locator('.help-options')).toBeVisible();
+
+    const helpLinks = ['.nav-docs', '.nav-slack', '.nav-linkedin', '.nav-twitter', '.nav-feedback'];
+    for (const link of helpLinks) {
+        await expect(page.locator(link)).toBeVisible();
+    }
+    await page.click('body');
+    await expect(page.locator('.help-options')).toBeHidden();
+
+    // Test all main navigation items
+    const navItems = [
+        { selector: '.nav-search', url: 'index.html' },
+        { selector: '.nav-metrics', url: 'metrics-explorer.html' },
+        { selector: '.nav-slos', url: 'all-slos.html' },
+        { selector: '.nav-alerts', url: 'all-alerts.html' },
+        { selector: '.nav-ldb', url: 'dashboards-home.html' },
+        { selector: '.nav-minion', url: 'minion-searches.html' },
+        { selector: '.nav-usq', url: 'saved-queries.html' },
+        { selector: '.nav-myorg', url: 'cluster-stats.html' },
+        { selector: '.nav-lookups', url: 'lookups.html' },
+        { selector: '.nav-ingest', url: 'test-data.html' },
+    ];
+
+    for (const { selector, url } of navItems) {
+        await page.click(`${selector} a`);
+        expect(page.url()).toContain(url);
+        await expect(page.locator(selector)).toHaveClass(/active/);
+
+        if (url === 'all-alerts.html') {
+            await expect(page.locator('.alerts-nav-tab')).toBeVisible();
+        } else if (url === 'cluster-stats.html') {
+            await expect(page.locator('.org-nav-tab')).toBeVisible();
+        }
+
+        if (['cluster-stats.html', 'all-alerts.html', 'service-health.html'].includes(url)) {
+            const upperNavTabs = await page.locator('.subsection-navbar a').all();
+            for (const tab of upperNavTabs) {
+                await expect(tab).toBeVisible();
+            }
+        }
+    }
+
+    // Test tracing pages
+    const tracingPages = ['service-health.html', 'search-traces.html', 'dependency-graph.html'];
+    for (const url of tracingPages) {
+        await page.goto(`http://localhost:5122/${url}`);
+        await expect(page.locator('.nav-traces')).toHaveClass(/active/);
+        await expect(page.locator('.subsection-navbar')).toBeVisible();
+    }
+
+    // Test metrics pages
+    const metricsPages = ['metrics-explorer.html', 'metric-summary.html', 'metric-cardinality.html'];
+    for (const url of metricsPages) {
+        await page.goto(`http://localhost:5122/${url}`);
+        await expect(page.locator('.nav-metrics')).toHaveClass(/active/);
+    }
+
+    // Test org pages
+    const orgPages = ['cluster-stats.html', 'org-settings.html', 'application-version.html', 'pqs-settings.html'];
+    for (const url of orgPages) {
+        await page.goto(`http://localhost:5122/${url}`);
+        await expect(page.locator('.nav-myorg')).toHaveClass(/active/);
+        await expect(page.locator('.org-nav-tab')).toBeVisible();
+    }
+
+    //Theme button
+    await testThemeToggle(page);
+});