233 lines
9.5 KiB
TypeScript
233 lines
9.5 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
const prod = false
|
|
const LANG = 'en'
|
|
|
|
const TEST_URL = prod ? 'http://localhost:8080/' : 'http://192.168.1.250/'
|
|
|
|
// --- Screenshot Flags ---
|
|
const screenshotFullPages = true;
|
|
const screenshotSignalPlot = true;
|
|
const screenshotSequentialHeating = true;
|
|
const screenshotControllerChart = true;
|
|
const screenshotSettings = true;
|
|
const screenshotNetworkSettings = true;
|
|
const screenshotProfiles = true;
|
|
const screenshotCoils = true;
|
|
const screenshotRegisters = true;
|
|
const screenshotLogs = true;
|
|
const screenshotCharts = true;
|
|
|
|
const paths = [
|
|
'#/',
|
|
'#/advanced/settings',
|
|
'#/advanced/network',
|
|
'#/signals',
|
|
'#/profiles',
|
|
'#/advanced/coils',
|
|
'#/advanced/registers',
|
|
'#/advanced/logs',
|
|
'#/advanced/charts',
|
|
];
|
|
|
|
test('Take screenshots', async ({ page }) => {
|
|
test.setTimeout(300000); // 5 minutes
|
|
page.setDefaultNavigationTimeout(120000); // 2 minutes
|
|
console.log('TEST_URL', TEST_URL);
|
|
|
|
if (screenshotFullPages) {
|
|
console.log('--- Taking Full Page Screenshots ---');
|
|
for (const path of paths) {
|
|
const url = `${TEST_URL}${path}`;
|
|
const screenshotName = path.replace(/#\//g, '').replace('/', '') || 'root';
|
|
const screenshotPath = `./tests/screenshot-${screenshotName}.jpg`;
|
|
|
|
console.log(`Navigating to ${url} and taking screenshot ${screenshotPath}`);
|
|
|
|
await page.goto(url, { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(18000);
|
|
|
|
await page.screenshot({ path: screenshotPath, fullPage: true, quality: 100 });
|
|
}
|
|
}
|
|
|
|
// --- Component Screenshots ---
|
|
|
|
// Debug: Take a full page screenshot to see what's rendered
|
|
console.log('--- Taking debug screenshot of home page ---');
|
|
await page.goto(TEST_URL, { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(8000);
|
|
await page.screenshot({ path: './tests/debug-home-page.jpg', fullPage: true, quality: 100 });
|
|
|
|
// Start a profile before taking screenshots
|
|
console.log('--- Starting profile for testing ---');
|
|
await page.goto(TEST_URL, { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(8000);
|
|
|
|
// Look for the play button in the playback controls
|
|
const playButton = page.locator('#playback-controls-container button').first();
|
|
if (await playButton.count() > 0) {
|
|
console.log('Clicking play button to start profile...');
|
|
await playButton.click();
|
|
await page.waitForTimeout(8000); // Wait for profile to start
|
|
} else {
|
|
console.log('Play button not found, continuing without starting profile...');
|
|
}
|
|
|
|
if (screenshotSignalPlot) {
|
|
// Signal Plot Editor
|
|
console.log('--- Taking screenshot of Signal Plot Editor ---');
|
|
await page.goto(`${TEST_URL}#/signals`, { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(3000); // Wait for data to load and components to render
|
|
|
|
// Ensure a control point is selected to show properties
|
|
const firstControlPoint = await page.locator('[data-cp-id]').first();
|
|
if (await firstControlPoint.count() > 0) {
|
|
console.log('Selecting a control point...');
|
|
await firstControlPoint.click();
|
|
await page.waitForTimeout(500); // Wait for properties panel to update
|
|
} else {
|
|
console.log('No control points found to select.');
|
|
}
|
|
|
|
const signalPlotElement = await page.locator('#signal-plot-collapsible-0').first();
|
|
if (await signalPlotElement.count() > 0) {
|
|
console.log('Taking screenshot of #signal-plot-collapsible-0');
|
|
await signalPlotElement.screenshot({ path: './tests/screenshot-signal-plot-editor.jpg', quality: 100 });
|
|
} else {
|
|
console.log('Could not find #signal-plot-collapsible-0 element to screenshot.');
|
|
}
|
|
}
|
|
|
|
if (screenshotSequentialHeating) {
|
|
// Sequential Heating Card
|
|
console.log('--- Taking screenshot of Sequential Heating Card ---');
|
|
await page.goto(TEST_URL, { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(8000);
|
|
|
|
const sequentialHeatingElement = page.locator('#sequential-heating-card');
|
|
|
|
// Check if the card is visible. If not, try to open the collapsible section.
|
|
if (!await sequentialHeatingElement.isVisible()) {
|
|
console.log('Sequential heating card not visible, attempting to expand section...');
|
|
const sequentialHeatingCollapsible = page.locator('#hmi-sequential-heating-collapsible');
|
|
console.log(`Found ${await sequentialHeatingCollapsible.count()} collapsible elements`);
|
|
if (await sequentialHeatingCollapsible.count() > 0) {
|
|
console.log('Clicking on sequential heating collapsible...');
|
|
await sequentialHeatingCollapsible.click();
|
|
await page.waitForTimeout(3000); // Wait for animation
|
|
console.log(`After click, sequential heating card visible: ${await sequentialHeatingElement.isVisible()}`);
|
|
}
|
|
}
|
|
|
|
if (await sequentialHeatingElement.count() > 0) {
|
|
console.log('Taking screenshot of #sequential-heating-card');
|
|
await sequentialHeatingElement.screenshot({ path: './tests/screenshot-sequential-heating.jpg', quality: 100 });
|
|
} else {
|
|
console.log('Could not find #sequential-heating-card element to screenshot.');
|
|
}
|
|
}
|
|
|
|
if (screenshotControllerChart) {
|
|
// Controller Chart
|
|
console.log('--- Taking screenshot of Controller Chart ---');
|
|
await page.goto(TEST_URL, { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(8000);
|
|
|
|
const controllerChartElement = page.locator('#controller-chart');
|
|
|
|
if (!await controllerChartElement.isVisible()) {
|
|
console.log('Controller chart not visible, attempting to expand section...');
|
|
const controllerChartCollapsible = page.locator('#hmi-chart-collapsible');
|
|
console.log(`Found ${await controllerChartCollapsible.count()} chart collapsible elements`);
|
|
if (await controllerChartCollapsible.count() > 0) {
|
|
console.log('Clicking on controller chart collapsible...');
|
|
await controllerChartCollapsible.click();
|
|
await page.waitForTimeout(1000);
|
|
console.log(`After click, controller chart visible: ${await controllerChartElement.isVisible()}`);
|
|
}
|
|
}
|
|
|
|
if (await controllerChartElement.count() > 0) {
|
|
console.log('Taking screenshot of #controller-chart');
|
|
await controllerChartElement.screenshot({ path: './tests/screenshot-controller-chart.jpg', quality: 100 });
|
|
} else {
|
|
console.log('Could not find #controller-chart element to screenshot.');
|
|
}
|
|
}
|
|
|
|
if (screenshotSettings) {
|
|
// Settings
|
|
console.log('--- Taking screenshot of Settings Page ---');
|
|
await page.goto(`${TEST_URL}#/advanced/settings`, { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(8000);
|
|
|
|
const settingsElement = await page.locator('#cassandra-settings-display').first();
|
|
if (await settingsElement.count() > 0) {
|
|
console.log('Taking screenshot of #cassandra-settings-display');
|
|
await settingsElement.screenshot({ path: './tests/screenshot-settings.jpg', quality: 100 });
|
|
} else {
|
|
console.log('Could not find #cassandra-settings-display element to screenshot.');
|
|
}
|
|
}
|
|
|
|
if (screenshotNetworkSettings) {
|
|
// Network Settings
|
|
console.log('--- Taking screenshot of Network Settings Page ---');
|
|
await page.goto(`${TEST_URL}#/advanced/network`, { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(8000);
|
|
|
|
const networkSettingsElement = await page.locator('#network-settings-display').first();
|
|
if (await networkSettingsElement.count() > 0) {
|
|
console.log('Taking screenshot of #network-settings-display');
|
|
await networkSettingsElement.screenshot({ path: './tests/screenshot-network-settings.jpg', quality: 100 });
|
|
} else {
|
|
console.log('Could not find #network-settings-display element to screenshot.');
|
|
}
|
|
}
|
|
|
|
if (screenshotProfiles) {
|
|
// Profiles
|
|
console.log('--- Taking screenshot of Profiles Page ---');
|
|
await page.goto(`${TEST_URL}#/profiles`, { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(8000);
|
|
console.log('Taking screenshot of #profiles-display');
|
|
await page.locator('#profiles-display').screenshot({ path: './tests/screenshot-profiles.jpg', quality: 100 });
|
|
}
|
|
|
|
if (screenshotCoils) {
|
|
// Coils
|
|
console.log('--- Taking screenshot of Coils Page ---');
|
|
await page.goto(`${TEST_URL}#/advanced/coils`, { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(8000);
|
|
console.log('Taking screenshot of #coils-display');
|
|
await page.locator('#coils-display').screenshot({ path: './tests/screenshot-coils.jpg', quality: 100 });
|
|
}
|
|
|
|
if (screenshotRegisters) {
|
|
// Registers
|
|
console.log('--- Taking screenshot of Registers Page ---');
|
|
await page.goto(`${TEST_URL}#/advanced/registers`, { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(8000);
|
|
console.log('Taking screenshot of #registers-display');
|
|
await page.locator('#registers-display').screenshot({ path: './tests/screenshot-registers.jpg', quality: 100 });
|
|
}
|
|
|
|
if (screenshotLogs) {
|
|
// Logs
|
|
console.log('--- Taking screenshot of Logs Page ---');
|
|
await page.goto(`${TEST_URL}#/advanced/logs`, { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(8000);
|
|
console.log('Taking screenshot of #logs-display');
|
|
await page.locator('#logs-display').screenshot({ path: './tests/screenshot-logs.jpg', quality: 100 });
|
|
}
|
|
|
|
if (screenshotCharts) {
|
|
// Charts
|
|
console.log('--- Taking screenshot of Charts Page ---');
|
|
await page.goto(`${TEST_URL}#/advanced/charts`, { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(8000);
|
|
console.log('Taking screenshot of #charts-display');
|
|
await page.locator('#charts-display').screenshot({ path: './tests/screenshot-charts.jpg', quality: 100 });
|
|
}
|
|
});
|