测试使用Playwright时等待点击超时

Question

在使用剧作家时，我的测试无法正常工作，我遇到了问题。

运行

npm i playwright

后，我继续在测试文件夹中创建一个名为“record1demo.spec.js”的新文件。然后，我运行

npx playwright codegen

通过单击元素来创建测试。创建新测试后，我运行

npx playwright test ./tests/record1demo.spec.js --project chromium --headed

。

我的测试失败于：

await page.locator('#shop-sku-list-item-4678663').getByRole('link', { name: 'Turtle Beach - Stealth Ultra' }).click();

在第 8 行的回溯中，有一个红色小箭头指向

.click()

。

我不确定问题是什么。我可以看到引用的 sku #，但我的测试失败。任何帮助将不胜感激。如果需要更多信息来解决这个问题，我会这样做。谢谢！

目标：

• 前往 bestbuy.com
• 搜索“xbox”
• 单击“Turtle Beach - Stealth Ultra 无线控制器，带充电底座，电池续航时间为 30 小时，专为 Xbox Series X|S、Windows PC、Android 设计 - 黑色”
• 将“Turtle Beach - Stealth Ultra”添加到我的购物车。
• 当侧视图购物车弹出时，我想单击“转到购物车”
• 当我在购物车中时，我想添加 3 个控制器。
• 我想点击右侧的黄色按钮“结账”后
• 重定向到新页面后，我想“继续以访客身份”

我的代码：

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

test('test', async ({ page }) => {
  await page.goto('https://www.bestbuy.com/');
  await page.getByPlaceholder('What can we help you find').click();
  await page.getByPlaceholder('What can we help you find').fill('xbox');
  await page.getByPlaceholder('What can we help you find').press('Enter');
  await page.locator('#shop-sku-list-item-4678663').getByRole('link', { name: 'Turtle Beach - Stealth Ultra' }).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();
});

我的回溯：

Error: locator.click: Test timeout of 30000ms exceeded.
Call log:
  - waiting for locator('#shop-sku-list-item-4678663').getByRole('link', { name: 'Turtle Beach - Stealth Ultra' })

   6 |   await page.getByPlaceholder('What can we help you find').fill('xbox');
   7 |   await page.getByPlaceholder('What can we help you find').press('Enter');
>  8 |   await page.locator('#shop-sku-list-item-4678663').getByRole('link', { name: 'Turtle Beach - Stealth Ultra' }).click();
     |                                                                                                                 ^
   9 |   await page.getByRole('button', { name: 'Add to Cart' }).click();
  10 |   await page.getByTestId('footer-wrapper').getByRole('button', { name: 'Go to Cart' }).click();
  11 |   await page.getByLabel('Item Quantity').selectOption('3');

测试步骤：

locator.click(#shop-sku-list-item-4678663 >> internal:role=link[name="Turtle Beach - Stealth Ultra"i])— record1demo.spec.js:8

Answer 1

首先，我认为你的定位器

'#shop-sku-list-item-4678663'

不稳定。当我手动浏览页面时，它根本不会出现在页面中。如果页面上只有一个具有链接角色且名称为“Turtle Beach - Stealth Ultra”的元素，您可以删除上面的定位器并使用

await page.getByRole('link', { name: 'Turtle Beach - Stealth Ultra' }).click();

。一般来说，您应该瞄准不太复杂的定位器，只要您可以确保它们在页面上是唯一的。

其次，我认为页面加载会随着时间的推移而缓慢加载，也可能在您滚动时加载，因此根据您的网络条件和站点性能，它可能会在此基础上超时。