代码之家 › 专栏 › 技术社区 › Kai Xu

单击更新页面的按钮后,页面将刷新;测试/断言超时,有两个标题但没有一个

playwright-test playwright javascript

1

Kai Xu · 技术社区 · 2 年前

我创建了一个简单的测试,点击一个按钮,在页面上添加两个标题。如果我用 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 ,页面会刷新,我认为这不应该发生。如果我只添加一个标题,两个测试都会通过,但页面仍会刷新,标题也会消失。

我找到的最接近的帖子是 this one 。其中提到使用 click({delay: 70}) ,我试过了,但没有任何区别。

为什么 toHaveCount() 两个标题而不是一个标题超时了,为什么要刷新页面?

1 回复 | 直到 2 年前

1

0

ggorlen Hoàng Huy Khánh 2 年前

.toHaveCount(2) 不计算定位器的子代数量;它统计与定位器本身匹配的元素的出现次数。

我认为您希望选择results元素内部的h1元素:

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();
  const results = page.locator("#results h1");
  await expect(results).toHaveText(["heading1", "heading2"]);
  await expect(results).toHaveCount(2);
});

话虽如此, .toHaveCount(2) 现在是多余的,因为我使用了更好的版本 toHaveText 具有两个元件的阵列。删除计数断言。

您也可以使用 await expect(page.locator("#results").getByRole("heading")) 如果你想更接近剧作家的最佳实践( getByRole 是优选的定位器)。您仍然可以将其限制为特定 "level" (例如h1)。

至于页面刷新,您提供的代码不会再现这种行为,但通常情况下,如果页面的JavaScript没有拦截表单提交事件并调用 event.preventDefault() 在上面。我必须看看你的实际页面,或者更完整的复制品才能提出建议。