点击按钮后页面自动刷新，toHaveCount断言两标题时超时单标题正常

问题描述 #

我编写了一个简单的Playwright测试：点击页面中的Submit按钮后，页面会添加两个<h1>标题。使用toHaveText()断言文本内容时测试正常通过，但使用toHaveCount()断言子元素数量时测试超时，且页面会出现无预期的刷新。若仅添加一个标题，两个断言均可通过，但页面仍会刷新，导致标题消失。尝试了click({delay:70})方法，并未解决问题。

相关代码 #

前端代码 #

function addHeading() {
   const results = document.querySelector('#results');
   const h1 = document.createElement('h1')
   h1.textContent = 'heading1'
   results.appendChild(h1)
   const h2 = document.createElement('h1')
   h2.textContent = 'heading2'
   results.appendChild(h2)
}

const submitButton = document.querySelector('button')
submitButton.addEventListener('click',addHeading)

测试代码 #

test (`empty search returns all results`, async ({page}) => {
   await page.getByRole('button', { name: 'Submit' }).click({delay: 70});
   await expect(page.locator('#results')).toHaveText('heading1heading2')
   await expect(page.locator('#results')).toHaveCount(2)
})

原因分析 #

1. 页面自动刷新的根源：你的Submit按钮大概率嵌套在<form>标签内，点击按钮会触发表单的默认提交行为，直接导致页面刷新。不管添加1个还是2个标题，刷新都会发生——单个标题时，DOM操作速度快，Playwright的断言在页面刷新前就完成了；两个标题时，DOM操作耗时稍长，断言还没执行完页面就刷新了，因此toHaveCount()超时。
2. toHaveCount()使用错误：你当前断言的是#results元素本身的数量为2，但#results是单个容器元素，永远只会有1个。正确的断言目标应该是#results下的<h1>子元素。
3. click({delay:70})无效：问题核心不是点击事件的触发时机，而是表单默认提交的刷新行为，因此添加点击延迟无法解决根本问题。

解决方案 #

1. 阻止表单默认提交行为 #

在按钮的点击事件处理函数中添加e.preventDefault()，彻底阻止页面刷新：

function addHeading(e) {
  // 阻止表单默认提交，避免页面刷新
  e.preventDefault();
  const results = document.querySelector('#results');
  const h1 = document.createElement('h1')
  h1.textContent = 'heading1'
  results.appendChild(h1)
  const h2 = document.createElement('h1')
  h2.textContent = 'heading2'
  results.appendChild(h2)
}

const submitButton = document.querySelector('button')
submitButton.addEventListener('click', addHeading)

如果不需要表单功能，也可以直接将按钮移出<form>标签。

2. 修正toHaveCount()的断言目标 #

将断言定位到#results下的<h1>元素，正确验证子元素数量：

test (`empty search returns all results`, async ({page}) => {
  await page.getByRole('button', { name: 'Submit' }).click();
  await expect(page.locator('#results')).toHaveText('heading1heading2')
  // 断言#results下的h1元素数量为2
  await expect(page.locator('#results h1')).toHaveCount(2)
})

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