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

Question

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

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

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

Answer 1

实现自定义等待函数

直到 grid/table/ 或其他对象完全加载：

最简单的方法可能是使用 page.waitForFunction 等待 grid/table 填充足够的行。

例如，您可以使用以下代码等到 table 中加载了 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

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

Playwright synchronization issue with Angular application

automated-tests

single-page-application

typescript

angular

playwright

实现自定义等待函数

等待回复

验证响应正文