zhifu-platform/frontend/tests/category-layout.mjs

import assert from 'node:assert/strict';
import { chromium } from 'playwright';

// 分类页使用实际容器和控件几何检查，覆盖手机与桌面预览的底部布局。
const browser = await chromium.launch({headless:true,executablePath:process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE || 'C:/Users/Administrator/AppData/Local/ms-playwright/chromium-1228/chrome-win64/chrome.exe'});
try {
  const page=await browser.newPage();
  for (const width of [320,390,490,768,1440]) {
    await page.setViewportSize({width,height:886});
    await page.goto(`${process.env.FRONTEND_URL || 'http://127.0.0.1:18763'}/#/customer/categories`);
    await page.locator('.catalog').waitFor();
    const geometry=await page.evaluate(() => Object.fromEntries(['.mobile','.content','.shop-search','.catalog','.goods-card','.goods-info','.shop-tabs','.ai-float'].map(selector => {
      const node=document.querySelector(selector),r=node.getBoundingClientRect(),s=getComputedStyle(node);
      return [selector,{x:r.x,y:r.y,width:r.width,height:r.height,bottom:r.bottom,position:s.position,boxSizing:s.boxSizing,borderRadius:s.borderRadius,padding:s.padding,transform:s.transform}];
    })));
    const frame=geometry['.mobile'],tabs=geometry['.shop-tabs'],ai=geometry['.ai-float'];
    assert.ok(Math.abs(frame.bottom-tabs.bottom)<=1,`${width}px 导航下方不应存在额外空白`);
    assert.ok(ai.x>frame.x+frame.width/2 && ai.x+ai.width<=frame.x+frame.width,`${width}px AI入口位于容器右侧`);
    assert.ok(ai.bottom<tabs.y,`${width}px AI入口与导航保持间距`);
    assert.equal(geometry['.shop-search'].borderRadius,'24px');
    assert.equal(geometry['.goods-card'].borderRadius,'16px');
    assert.equal(geometry['.catalog'].y-geometry['.shop-search'].bottom,14);
    const categories=page.getByRole('navigation',{name:'商品分类'});
    const selected=await categories.locator('[aria-current="page"]').evaluate(node=>getComputedStyle(node).backgroundColor);
    const inactive=await categories.locator('button:not([aria-current="page"])').first().evaluate(node=>getComputedStyle(node).backgroundColor);
    assert.notEqual(selected,inactive,'当前分类具有可辨认的选中状态');
    await categories.getByRole('button',{name:'鼠标',exact:true}).click();
    assert.equal(await categories.getByRole('button',{name:'鼠标',exact:true}).getAttribute('aria-current'),'page');
    await page.locator('.content').evaluate(node=>node.scrollTo(0,node.scrollHeight));
    await page.locator('.ai-float').click();
    await page.locator('.mobile[data-page="chat"]').waitFor();
    assert.equal(await page.locator('.content').evaluate(node=>node.scrollTop),0,'新页面正文从顶部显示');
  }
  console.log('分类区域、AI入口与底部布局在5组宽度下检查通过。');
} finally { await browser.close(); }