剧作家等待水合作用完成

Question

我有一个页面向用户加载项目列表。它会立即在页面上加载列表，但每个列表的后端信息是通过 API 调用加载的。因此，如果 user_x 有 5 个项目，则会进行 5 次调用。

我理解不等待网络空闲的做法（并且有时由于分析调用运行而导致我在这里失败）。

那么有没有更好的方法来处理水合作用，在下一个操作发生之前需要 x 次调用？

我尝试过承诺、承诺数组（.all）等，但似乎没有一个可行的解决方案。

我希望等待，只有在某些 url 格式的所有调用完成后才会单击按钮，即我们的所有端点都已返回。

这让我很困惑，如果有人可以提供帮助，我希望得到指导！

我尝试计算列表项的数量并为每个列表项创建一个承诺，但问题是我不知道有多少项。例如，列表使用分页，因此如果我获得行数，它不会完全准确，因为后续页面上还有更多。我希望无论有多少项目都可以正常工作，因为测试时可能有 1 或 100 个项目。

Answer 1

在 Playwright 测试中处理通过 API 调用加载的动态内容确实具有挑战性。由于您希望等到特定端点的所有 API 调用完成后再执行操作，因此您需要使用 Playwright 的功能来拦截和监视网络请求。

const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    let pendingRequests = 0;

    // Intercept network requests
    await page.route('**/your-api-endpoint/*', (route, request) => {
        // Increase counter when request is made
        pendingRequests++;

        route.continue();

        // Decrease counter when response is received
        request.finished().then(() => {
            pendingRequests--;
        });
    });

    // Navigate to your page
    await page.goto('https://yourwebsite.com');

    // Function to wait for all requests to complete
    function waitForAPI() {
        return new Promise(resolve => {
            const checkInterval = setInterval(() => {
                if (pendingRequests === 0) {
                    clearInterval(checkInterval);
                    resolve();
                }
            }, 100); // Check every 100 milliseconds
        });
    }

    // Wait for API calls to complete
    await waitForAPI();

    // Perform your action, like clicking a button
    await page.click('your-button-selector');

    // Close browser
    await browser.close();
})();

你可以尝试这样的事情。