Angular 应用程序的编剧同步问题答案

【问题标题】：Playwright synchronization issue with Angular applicationAngular 应用程序的编剧同步问题
【发布时间】：2021-09-23 11:26:40
【问题描述】：

我正在尝试使服务中查询数据库并将数据呈现到 UI 的场景自动化。这个渲染过程需要很长时间（大约 3 分钟）。 Playwright 不会等到页面加载完成。我尝试使用

await page.waitForLoadState();,
await page.waitForLoadState('networkidle');
await page.waitForLoadState('domcontentloaded'); and 
await page.setDefaultNavigationTimeout(150);

我正在开发一个 Angular 应用程序，我在很多情况下都会遇到这类同步问题。

【问题讨论】：

标签： angular typescript automated-tests single-page-application playwright

【解决方案1】：

实现自定义等待函数

直到网格/表格/或其他对象完全加载：

最简单的方法可能是使用page.waitForFunction 等到网格/表格填充足够的行。

例如，您可以使用以下代码等到表中加载了 1000 行：

await page.waitForFunction(() => document.querySelectorAll('#table-selector tr').length >= 1000);

等待响应

WaitForResponse 帮助我等待自定义超时的长时间服务响应：

通常，您必须在导致调用的操作发生之前开始等待响应。

// Alternative way with a predicate.
const [response] = await Promise.all([
  // Waits for the next response matching some conditions
  page.waitForResponse(response => response.url() === 'https://example.com' && response.status() === 200 , { timeout: 300000 }),
  // Triggers the response
  page.click('button.triggers-response'),
]);

验证响应正文

仅验证响应状态还不够，还需要验证响应正文的情况。

    const promise= page.waitForResponse(/abcd/); // Regex 
    await page.goto('https://myurl.com', {waitUntil: 'networkidle', timeout: 30000}); 
    var response = await promise; // waiting for promise
    let resp = await response.json(); 
    console.log(resp); 
    await browser.close();

来源：https://playwright.dev/docs/api/class-page#page-wait-for-response

【讨论】：

您好 Vishal 我尝试使用 waitForResponse，它对我有部分作用。它一直在等待状态为 200。但在响应正文中它具有“响应”：“进行中”。即使状态为 200，如何等待响应变为“完成”。
使用包括：“response.url().includes('/run/')”来查找响应中的特定字符串。
@Prasad，在验证响应状态不够的情况下添加了验证响应正文的代码。