点击更新页面的按钮后页面刷新；测试/断言超时，有两个标题，但不是一个标题

Question

我创建了一个简单的测试，单击一个按钮，该按钮会向页面添加两个标题。如果我用

toHaveText()

检查文本，这就会起作用。但是，如果我检查带有

toHaveCount()

的儿童数量，测试就会超时。

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)
})

对于第二个

expect

，页面会刷新，我认为这种情况不应该发生。如果我只添加一个标题，两项测试都会通过，但页面仍然刷新并且标题消失。

我找到的最接近的帖子是这个。它提到使用

click({delay: 70})

，我尝试过，但没有任何区别。

为什么

toHaveCount()

会超时，有两个标题而不是一个标题，为什么页面会刷新？

Answer 1

.toHaveCount(2)

不计算定位器的子级数量；它计算定位器本身的数量。

我想你想要这样的东西：

import {expect, test} from "@playwright/test"; // ^1.42.1

const html = `<!DOCTYPE html><html><body>
<button>Submit</button>
<div id="results"></div>
<script>
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);
</script>
</body></html>`;

test("empty search returns all results", async ({page}) => {
  await page.setContent(html);
  await page.getByRole("button", {name: "Submit"}).click();
  await expect(page.locator("#results h1"))
    .toHaveText(["heading1", "heading2"]);
  await expect(page.locator("#results h1")).toHaveCount(2);
});

也就是说，

await expect(page.locator("#results h1")).toHaveCount(2);

现在是多余的，因为我使用了更好版本的

toHaveText

以及两个元素的数组。我会删除这个断言。

点击更新页面的按钮后页面刷新；测试/断言超时，有两个标题，但不是一个标题

问题描述投票：0回答：1

1个回答

最新问题

点击更新页面的按钮后页面刷新；测试/断言超时，有两个标题，但不是一个标题

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1