元素异步选择

Question

目前我使用 Playwright 进行 e2e 测试。之前我尝试过Cypress，但没有成功。 我对软件测试比较陌生。 我目前正在测试一个带有下拉菜单的网站。下拉菜单来自 Angular 的材质组件。我的想法是，我现在可以对每个条目异步执行页面检查。然而，结果是根据测试，所有条目都可用，但单击和关联的选择并不总是有效。始终找不到 2 到 5 个条目。我怀疑这是因为异步执行改变了视图，然后点击的坐标不再正确。

因此，我的问题是，是否有一种方法可以实现这样的事情，或者应该同步完成动态事情，而仅针对静态事情选择异步方法？

   await Promise.all(testingYears.map(async (year) => {
        await tabAllgemein.selectErstattungsJahr(year);
        await expect(tabAllgemein.erstattungsYearSelect).toContainText(year.toString());
    }));

async selectErstattungsJahr(year: number) {
    await this.erstattungsYearSelect.isVisible();
    await this.erstattungsYearSelect.click();

    const result = this.page.locator("mat-option", { hasText: year.toString() })

    await result.waitFor()
    await result.isVisible();
    await result.click();
}

Answer 1

我想知道你希望你的 UI 如何异步工作:) 只需使用

for

for (const year of testingYears) {
   await tabAllgemein.selectErstattungsJahr(year);
   await expect(tabAllgemein.erstattungsYearSelect).toContainText(year.toString());
}

此外，点击不需要这些。

waitFor()
isVisible();

https://playwright.dev/docs/input#mouse-click

Under the hood, this and other pointer-related methods:

wait for element with given selector to be in DOM
wait for it to become displayed, i.e. not empty, no display:none, no visibility:hidden
wait for it to stop moving, for example, until css transition finishes
scroll the element into view
wait for it to receive pointer events at the action point, for example, waits until element becomes non-obscured by other elements
retry if the element is detached during any of the above checks