Puppeteer-Sharp 实战：使用 WaitForFunctionAsync 等待 JavaScript 表达式为真

Puppeteer-Sharp 实战：使用 WaitForFunctionAsync 等待 JavaScript 表达式为真

puppeteer-sharp 项目地址: https://gitcode.com/gh_mirrors/pup/puppeteer-sharp

引言

在现代 Web 自动化测试和爬虫开发中，等待页面元素或条件就绪是一个常见需求。Puppeteer-Sharp 作为 .NET 平台的 Headless Chrome 控制库，提供了多种等待机制。本文将重点介绍如何使用 WaitForFunctionAsync 方法来等待复杂 JavaScript 表达式变为真值。

为什么需要 WaitForFunctionAsync

传统的 WaitForSelectorAsync 只能等待特定选择器的元素出现，但在实际开发中，我们经常需要等待更复杂的条件：

1. 等待特定文本内容出现
2. 等待元素具有特定属性或样式
3. 等待计算结果满足条件
4. 等待异步操作完成后的状态变化

这些场景下，WaitForFunctionAsync 提供了更大的灵活性。

基本用法

WaitForFunctionAsync 方法接受一个 JavaScript 函数或表达式，并等待其返回值为真值（truthy）。基本语法如下：

await page.WaitForFunctionAsync("yourJavaScriptExpressionOrFunction");

示例1：等待简单表达式

using (var browser = await Puppeteer.LaunchAsync(options))
using (var page = await browser.NewPageAsync())
{
    await page.GoToAsync("https://www.example.com");
    await page.WaitForFunctionAsync("document.title.includes('Example')");
}

这个例子会等待页面标题包含"Example"字符串。

示例2：等待复杂条件

await page.WaitForFunctionAsync(@"
    () => {
        const element = document.querySelector('#status');
        return element && element.innerText === 'Completed';
    }
");

这个例子等待 ID 为 status 的元素存在且其文本内容为"Completed"。

实际应用场景

场景1：等待分页信息加载

await page.WaitForFunctionAsync(@"
    () => {
        const text = document.querySelector('#status_info').innerText;
        return /^Showing (\d+) to (\d+) of (\d+) entries$/.test(text);
    }
");

这个模式在数据表格分页中很常见，等待分页信息显示完整。

场景2：等待特定样式出现

await page.WaitForFunctionAsync(@"
    () => {
        const button = document.querySelector('#submit-btn');
        return button && getComputedStyle(button).display !== 'none';
    }
");

场景3：等待计算结果

await page.WaitForFunctionAsync(@"
    () => {
        const items = document.querySelectorAll('.item');
        return items.length >= 5;
    }
");

高级技巧

1. 传递参数

你可以将 .NET 对象作为参数传递给 JavaScript 函数：

var minItems = 5;
await page.WaitForFunctionAsync(@"
    (min) => {
        return document.querySelectorAll('.item').length >= min;
    }
", new WaitForFunctionOptions(), minItems);

2. 设置超时时间

await page.WaitForFunctionAsync("yourFunction", new WaitForFunctionOptions 
{
    Timeout = 30000 // 30秒超时
});

3. 轮询间隔控制

await page.WaitForFunctionAsync("yourFunction", new WaitForFunctionOptions 
{
    PollingInterval = 100 // 每100毫秒检查一次
});

性能考虑

1. 合理设置轮询间隔：过于频繁的检查会增加CPU负载
2. 避免复杂计算：JavaScript 函数应尽量简单高效
3. 适当设置超时：防止无限等待

常见问题解决

1. 函数未执行

确保页面已加载完成，必要时先等待基本元素存在。

2. 上下文错误

如果函数中访问的变量不存在，会抛出异常。建议先检查元素是否存在。

3. 性能问题

对于长时间运行的等待，考虑增加轮询间隔。

总结

WaitForFunctionAsync 是 Puppeteer-Sharp 中一个强大的等待机制，它提供了处理复杂等待条件的灵活性。通过合理使用这个方法，你可以构建更健壮、更精确的 Web 自动化脚本。记住根据实际场景选择最简单的实现方式，并注意性能优化。

puppeteer-sharp 项目地址: https://gitcode.com/gh_mirrors/pup/puppeteer-sharp