dwinzo-sdet/tests/Visualization2D.spec.js

import { test, expect } from '@playwright/test';
import fs from 'fs';
import path from 'path';

const visualizationTests = [
  { name: 'pztour', viewport: { width: 1440, height: 900, name: 'laptop-hd' } },
  { name: 'Zone 2', viewport: { width: 1280, height: 1024, name: 'monitor-std' } },
  { name: 'Zone 3', viewport: { width: 1920, height: 1080, name: 'fullhd-tv' } },
];

for (const vis of visualizationTests) {
  test.describe(`Visualization-Drag&Drop Page - ${vis.name}`, () => {
    test(`Drag & Drop Widgets in ${vis.name}`, async ({ page }) => {
      test.setTimeout(120000);
      page.setDefaultTimeout(60000);

      const screenshotsDir = path.join(process.cwd(), `screenshots/visualization2D/${vis.viewport.name}`);
      if (!fs.existsSync(screenshotsDir)) {
        fs.mkdirSync(screenshotsDir, { recursive: true });
      }

      const widgets = [
        page.locator('.chart.chart-1'),
        page.locator('.chart.chart-2'),
        page.locator('.chart.chart-3'),
        page.locator('.chart.chart-4'),
        page.locator('.chart.chart-5'),
        page.getByText("Widget 7").first(),
        page.getByText("Widget 8").first(),
      ];

      const panels = {
        left: page.locator('.left-panel.panel'),
        bottom: page.locator('.bottom-panel.panel'),
        top: page.locator('.top-panel.panel'),
        right: page.locator('.right-panel.panel'),
      };

      const buttons = {
        top: {
          hide: page.locator('.side-button-container.top >> button#hide-panel-visulization'),
          lock: page.locator('.side-button-container.top >> button#lock-panel-visulization'),
          clean: page.locator('.side-button-container.top >> button#clean-panel-visulization'),
          remove: page.getByTitle('Remove all items and close top panel'),
        },
        right: {
          hide: page.locator('.side-button-container.right >> button#hide-panel-visulization'),
          lock: page.locator('.side-button-container.right >> button#lock-panel-visulization'),
          clean: page.locator('.side-button-container.right >> button#clean-panel-visulization'),
          remove: page.getByTitle('Remove all items and close right panel'),
        },
        bottom: {
          hide: page.locator('.side-button-container.bottom >> button#hide-panel-visulization'),
          lock: page.locator('.side-button-container.bottom >> button#lock-panel-visulization'),
          clean: page.locator('.side-button-container.bottom >> button#clean-panel-visulization'),
          remove: page.getByTitle('Remove all items and close bottom panel'),
        },
        left: {
          hide: page.locator('.side-button-container.left >> button#hide-panel-visulization'),
          lock: page.locator('.side-button-container.left >> button#lock-panel-visulization'),
          clean: page.locator('.side-button-container.left >> button#clean-panel-visulization'),
          remove: page.getByTitle('Remove all items and close left panel'),
        },
      };

      const activateAndCheckPanel = async (panelLocator, activateButtonTitle) => {
        await page.getByTitle(activateButtonTitle).click();
        await expect(panelLocator).toBeVisible({ timeout: 10000 });
      };

      const managePanel = async (panelName, panelActions) => {
        try {
          await panelActions.hide.click();
          await panelActions.hide.click();

          await panelActions.lock.click();
          await panelActions.lock.click();

          await panelActions.clean.click();
          await panelActions.remove.click();

          await page.screenshot({
            path: path.join(screenshotsDir, `${vis.name}-${panelName}-after-remove.png`),
          });
        } catch (error) {
          console.error(`Error managing panel ${panelName}:`, error);
          throw error;
        }
      };

      console.log(`Navigating to app for ${vis.name}...`);
      await page.goto('http://185.100.212.76:8200');
      await page.getByPlaceholder('Email').fill('ramkumar@testdomin.local');
      await page.getByPlaceholder('Password').fill('123456');
      await page.getByRole('button', { name: 'Continue', exact: true }).click();

      await expect(page.getByText('Visualization')).toBeVisible({ timeout: 20000 });

      // Set screen size based on the current vis entry
      await page.setViewportSize({
        width: vis.viewport.width,
        height: vis.viewport.height,
      });

      await page.evaluate(() => document.documentElement.requestFullscreen());

      await page.getByText('Visualization').click();
      await page.getByText(vis.name).click();

      const panelOrder = ['left', 'right', 'bottom', 'top'];
      for (const panelName of panelOrder) {
        await activateAndCheckPanel(panels[panelName], `Activate ${panelName} panel`);
        for (const widget of widgets) {
          await dragWithRetry(widget, panels[panelName]);
        }
      }

      await page.waitForFunction(() => {
        return (
          document.querySelector('.left-panel')?.children.length > 0 &&
          document.querySelector('.right-panel')?.children.length > 0 &&
          document.querySelector('.bottom-panel')?.children.length > 0 &&
          document.querySelector('.top-panel')?.children.length > 0
        );
      });

      await page.screenshot({ path: path.join(screenshotsDir, `${vis.name}-after-drag.png`) });

      for (const panelName of panelOrder) {
        await managePanel(panelName, buttons[panelName]);
      }

      console.log(`Test for ${vis.name} completed.`);
    });
  });
}

async function dragWithRetry(source, target, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      await source.dragTo(target, { force: true });
      return;
    } catch (error) {
      if (i === retries - 1) throw error;
      await new Promise(res => setTimeout(res, 1000));
    }
  }
}