Saravana Achu Mac
8db23bde2d
- Installed Playwright and Storybook packages - Created playwright.config.ts with viewport matrix and browser configurations - Installed Playwright chromium browser - Created e2e/viewport-matrix.spec.ts for viewport matrix testing - Created e2e/horizontal-overflow.spec.ts for horizontal overflow testing - Added test scripts to package.json (test:e2e, test:e2e:ui, test:e2e:viewport, test:e2e:overflow) - Updated LAUNCH_READY_UI_UX_ROADMAP.md checklist with testing infrastructure status
68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
/**
|
|
* Viewport Matrix Tests
|
|
*
|
|
* Tests that all routes pass the viewport matrix for:
|
|
* - Desktop (1200px+)
|
|
* - Tablet (768px - 1199px)
|
|
* - Mobile (0px - 767px)
|
|
*/
|
|
|
|
const routes = [
|
|
'/',
|
|
'/portfolio',
|
|
'/research',
|
|
'/plans',
|
|
'/markets',
|
|
'/screener',
|
|
'/watchlist',
|
|
'/alerts',
|
|
'/settings',
|
|
];
|
|
|
|
test.describe('Viewport Matrix', () => {
|
|
routes.forEach((route) => {
|
|
test.describe(`Route: ${route}`, () => {
|
|
test('Desktop viewport (1200px)', async ({ page }) => {
|
|
await page.setViewportSize({ width: 1200, height: 800 });
|
|
await page.goto(route);
|
|
|
|
// Check for horizontal overflow
|
|
const bodyWidth = await page.evaluate(() => document.body.scrollWidth);
|
|
const viewportWidth = await page.evaluate(() => window.innerWidth);
|
|
expect(bodyWidth).toBeLessThanOrEqual(viewportWidth + 1); // Allow 1px tolerance
|
|
|
|
// Check that main content is visible
|
|
await expect(page.locator('main')).toBeVisible();
|
|
});
|
|
|
|
test('Tablet viewport (768px)', async ({ page }) => {
|
|
await page.setViewportSize({ width: 768, height: 1024 });
|
|
await page.goto(route);
|
|
|
|
// Check for horizontal overflow
|
|
const bodyWidth = await page.evaluate(() => document.body.scrollWidth);
|
|
const viewportWidth = await page.evaluate(() => window.innerWidth);
|
|
expect(bodyWidth).toBeLessThanOrEqual(viewportWidth + 1);
|
|
|
|
// Check that main content is visible
|
|
await expect(page.locator('main')).toBeVisible();
|
|
});
|
|
|
|
test('Mobile viewport (375px)', async ({ page }) => {
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|
await page.goto(route);
|
|
|
|
// Check for horizontal overflow
|
|
const bodyWidth = await page.evaluate(() => document.body.scrollWidth);
|
|
const viewportWidth = await page.evaluate(() => window.innerWidth);
|
|
expect(bodyWidth).toBeLessThanOrEqual(viewportWidth + 1);
|
|
|
|
// Check that main content is visible
|
|
await expect(page.locator('main')).toBeVisible();
|
|
});
|
|
});
|
|
});
|
|
});
|