107 lines
4.3 KiB
TypeScript
107 lines
4.3 KiB
TypeScript
import { expect, test, type Locator } from '@playwright/test';
|
||
|
||
async function expectWithinViewport(locator: Locator, width: number, height: number) {
|
||
await expect(locator).toBeVisible();
|
||
await expect
|
||
.poll(async () => {
|
||
const box = await locator.boundingBox();
|
||
return Boolean(
|
||
box &&
|
||
box.x >= 7 &&
|
||
box.y >= 7 &&
|
||
box.x + box.width <= width - 7 &&
|
||
box.y + box.height <= height - 7,
|
||
);
|
||
})
|
||
.toBe(true);
|
||
}
|
||
|
||
for (const theme of ['dark', 'light']) {
|
||
for (const [width, height] of [
|
||
[1920, 1080],
|
||
[1440, 900],
|
||
[1366, 768],
|
||
[1024, 768],
|
||
[768, 800],
|
||
]) {
|
||
test(`共享浮层边界与主题 ${theme} ${width}×${height}`, async ({ page }) => {
|
||
await page.setViewportSize({ width, height });
|
||
await page.addInitScript(
|
||
(value) => localStorage.setItem('mujoco-platform-theme', value),
|
||
theme,
|
||
);
|
||
await page.goto('/');
|
||
const trigger = page.getByRole('button', { name: /隐藏工程面板|显示工程面板/ });
|
||
await trigger.focus();
|
||
const tooltip = page.getByRole('tooltip');
|
||
await expectWithinViewport(tooltip, width, height);
|
||
await expect(trigger).toHaveAttribute(
|
||
'aria-describedby',
|
||
(await tooltip.getAttribute('id')) as string,
|
||
);
|
||
expect(
|
||
await tooltip.evaluate((node) => node.closest('.theme-dark, .theme-light')?.className),
|
||
).toContain(`theme-${theme}`);
|
||
await page.keyboard.press('Escape');
|
||
await expect(tooltip).toHaveCount(0);
|
||
await page.getByRole('button', { name: /FPS \d/ }).click();
|
||
const popover = page.getByRole('dialog', { name: '性能详情' });
|
||
await expectWithinViewport(popover, width, height);
|
||
await page.screenshot({
|
||
path: test.info().outputPath(`performance-${theme}-${width}.png`),
|
||
fullPage: true,
|
||
});
|
||
await page.setViewportSize({ width: width - 40, height: height - 40 });
|
||
await expectWithinViewport(popover, width - 40, height - 40);
|
||
await page.keyboard.press('Escape');
|
||
await expect(popover).toHaveCount(0);
|
||
});
|
||
}
|
||
}
|
||
|
||
test('边缘 hover 提示可移入，disabled 控件说明可经键盘访问', async ({ page }) => {
|
||
await page.setViewportSize({ width: 1440, height: 900 });
|
||
await page.goto('/');
|
||
const theme = page.getByRole('button', { name: '打开命令面板' });
|
||
await theme.hover();
|
||
const tooltip = page.getByRole('tooltip');
|
||
await expectWithinViewport(tooltip, 1440, 900);
|
||
await tooltip.hover();
|
||
await expect(tooltip).toBeVisible();
|
||
await page.keyboard.press('Escape');
|
||
await expect(tooltip).toHaveCount(0);
|
||
const step = page.getByRole('button', { name: '单步', exact: true });
|
||
await expect(step).toBeDisabled();
|
||
await step.locator('..').focus();
|
||
await expect(tooltip).toHaveText('单步（暂停时可用）');
|
||
expect(await theme.evaluate((node) => node.parentElement?.hasAttribute('tabindex'))).toBe(false);
|
||
});
|
||
|
||
test('全屏中的对话框 Tooltip 不裁剪且 Escape 仅关闭顶层', async ({ page }) => {
|
||
await page.setViewportSize({ width: 1440, height: 900 });
|
||
await page.goto('/');
|
||
await page.getByRole('button', { name: '更多工作台操作' }).click();
|
||
await page.getByRole('menuitem', { name: '进入全屏' }).click();
|
||
await page.getByRole('button', { name: '更多工作台操作' }).click();
|
||
await page.getByRole('menuitem', { name: '工作台设置' }).click();
|
||
const dialog = page.getByRole('dialog', { name: '工作台设置' });
|
||
await expect(dialog).toBeVisible();
|
||
const close = dialog.getByRole('button', { name: '关闭', exact: true });
|
||
await close.focus();
|
||
const tooltip = page.getByRole('tooltip');
|
||
await expectWithinViewport(tooltip, 1440, 900);
|
||
expect(await tooltip.evaluate((node) => document.fullscreenElement?.contains(node))).toBe(true);
|
||
expect(await tooltip.evaluate((node) => Boolean(node.closest('[role="dialog"]')))).toBe(false);
|
||
await page.screenshot({
|
||
path: test.info().outputPath('fullscreen-dialog-tooltip.png'),
|
||
fullPage: true,
|
||
});
|
||
await page.keyboard.press('Escape');
|
||
await expect(tooltip).toHaveCount(0);
|
||
await expect(dialog).toBeVisible();
|
||
await page.keyboard.press('Escape');
|
||
await expect(dialog).toHaveCount(0);
|
||
await page.getByRole('button', { name: '更多工作台操作' }).click();
|
||
await page.getByRole('menuitem', { name: '退出全屏' }).click();
|
||
});
|