Playwright动画下拉菜单测试：替换waitForTimeout优化等待逻辑

核心优化方向 #

• 替换菜单动画的固定等待：利用Playwright的元素状态等待机制，自动识别动画完成节点
• 替换滚动后的固定等待：使用内置视口断言，无需自定义判断函数，自动等待元素进入视口

重构后的代码 #

1. 优化菜单打开函数（移除固定超时）

async function openMobileMenu(page) {
    // 等待菜单切换按钮并点击
    const menuToggle = page.locator('[aria-label="Menu Toggle"]');
    await menuToggle.waitFor();
    await menuToggle.click();

    // 点击一级子菜单，等待动画稳定
    const subMenu = page.locator('.nav-menu--dropdown.nav-menu__container .submenu-class-for-playwright-test').first();
    await subMenu.waitFor();
    await subMenu.click();
    await subMenu.waitForElementState('stable'); // 等待子菜单动画结束

    // 点击二级子菜单，等待动画稳定
    const subSubMenu = page.locator('.nav-menu--dropdown.nav-menu__container .subsubmenu-class-for-playwright-test').first();
    await subSubMenu.waitFor();
    await subSubMenu.click();
    await subSubMenu.waitForElementState('stable'); // 等待二级菜单动画结束

    // 滚动到最后一项，用Playwright内置滚动自动处理容器/页面滚动
    const lastMenuItem = page.locator('.nav-menu--dropdown.nav-menu__container .lastitem-class-for-playwright-test');
    await lastMenuItem.scrollIntoView({ behavior: 'instant', block: 'center' });
}

2. 测试代码（使用内置视口断言）

await openMobileMenu(page);

const lastMenuItem = page.locator('.nav-menu--dropdown.nav-menu__container .lastitem-class-for-playwright-test');

// 直接用Playwright内置断言，自动等待元素进入视口
await expect(lastMenuItem).toBeInViewport();

关键修复说明 #

• 修复之前的错误：之前代码中page.waitForSelector(subSubMenuClass)返回的是Promise，需await后才能调用方法；改用page.locator()直接获取定位器，支持链式等待逻辑更简洁
• 替代自定义视口判断：Playwright的toBeInViewport()断言会自动轮询元素的视口状态，无需手动计算getBoundingClientRect，彻底解决自定义函数的延迟问题
• 滚动逻辑优化：locator.scrollIntoView()会自动识别元素所在的滚动容器（页面或菜单内部），无需手动写scrollBy逻辑

额外场景适配 #

如果菜单是内部容器滚动（而非页面全局滚动），可以指定滚动容器：

const menuContainer = page.locator('.nav-menu--dropdown.nav-menu__container');
await lastMenuItem.scrollIntoView({ 
    scrollIntoViewOptions: { block: 'center' }, 
    container: menuContainer 
});

内容的提问来源于stack exchange，提问作者DavSev