使用Playwright时点击操作超时的自动化测试问题求助

问题分析 #

你的测试在点击商品元素时超时，核心原因通常是以下几点：

• 搜索结果页面未完全加载就开始查找元素
• 依赖静态SKU ID（#shop-sku-list-item-4678663）的定位器不够稳健，该ID可能动态变化或元素嵌套逻辑导致定位失败
• 元素未进入视口或被加载动画遮挡，无法正常交互

修复方案 #

1. 优化页面加载等待 #

搜索后等待网络空闲状态，确保商品列表完全渲染完成：

await page.waitForLoadState('networkidle');

2. 替换为稳健的定位器 #

放弃依赖静态SKU ID，直接通过商品完整名称定位，同时允许部分匹配避免文本细微差异导致的匹配失败：

const targetProduct = page.getByRole('link', { 
  name: 'Turtle Beach - Stealth Ultra Wireless Controller with charge dock, 30-hour battery designed for Xbox Series X|S, Windows PC, Android - Black',
  exact: false
});

3. 确保元素可交互 #

等待元素可见后再执行点击操作，同时处理可能的Cookie弹窗避免阻塞页面交互：

修改后的完整代码 #

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('https://www.bestbuy.com/');

  // 处理Cookie同意弹窗（如果存在）
  const cookieAcceptBtn = page.getByRole('button', { name: 'Accept All Cookies' });
  await cookieAcceptBtn.waitFor({ state: 'visible', timeout: 10000 }).catch(() => {});
  await cookieAcceptBtn.click().catch(() => {});

  // 执行搜索操作
  const searchBox = page.getByPlaceholder('What can we help you find');
  await searchBox.click();
  await searchBox.fill('xbox');
  await searchBox.press('Enter');

  // 等待搜索结果加载完成
  await page.waitForLoadState('networkidle');

  // 定位目标商品并点击
  const targetProduct = page.getByRole('link', { 
    name: 'Turtle Beach - Stealth Ultra Wireless Controller with charge dock, 30-hour battery designed for Xbox Series X|S, Windows PC, Android - Black',
    exact: false
  });
  await targetProduct.waitFor({ state: 'visible' });
  await targetProduct.click();

  await page.getByRole('button', { name: 'Add to Cart' }).click();
  await page.getByTestId('footer-wrapper').getByRole('button', { name: 'Go to Cart' }).click();
  await page.getByLabel('Item Quantity').selectOption('3');
  await page.getByRole('button', { name: 'Checkout', exact: true }).click();
  await page.getByRole('button', { name: 'Continue as Guest' }).click();
});

额外调试建议 #

• 启用调试模式逐步排查：npx playwright test ./tests/record1demo.spec.js --project chromium --debug，可直观查看元素状态与页面加载情况
• 若商品在页面下方，可添加await targetProduct.scrollIntoViewIfNeeded()确保元素进入视口后再点击

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