PuppeteerSharp爬取分页td元素innerText为空问题求助

问题背景 #

使用PuppeteerSharp爬取分页表格时，能选中目标td元素，但仅能获取到Prev和Next的innerText，其余分页数字对应的td返回空字符串，转换为int时抛出System.FormatException。

可能原因及解决方法 #

1. 改用浏览器上下文直接执行JS获取文本 #

ElementHandle的GetPropertyAsync("innerText")可能因元素动态渲染延迟或快照特性导致无法获取最新内容，直接通过EvaluateAsync在浏览器端执行JS获取更可靠：

// 直接在浏览器上下文获取倒数第二个td的文本并转换为int
var numPages = await page.EvaluateAsync<int>(@"
    const paginationTds = document.querySelectorAll('#characters > table > tbody > tr > td:nth-child(2) > table > tbody > tr > td');
    // 取倒数第二个元素，去除空白后转整数
    return parseInt(paginationTds[paginationTds.length - 2].textContent.trim(), 10);
");

2. 等待元素完全可见后再获取内容 #

分页元素可能是异步加载的，需确保元素完全渲染可见后再操作：

// 等待倒数第二个分页td可见
await page.WaitForSelectorAsync(
    "#characters > table > tbody > tr > td:nth-child(2) > table > tbody > tr > td:nth-last-child(2)",
    new WaitForSelectorOptions { Visible = true, Timeout = 5000 }
);

// 再执行获取操作
var characterPageHandle = await page.QuerySelectorAllAsync("#characters > table > tbody > tr > td:nth-child(2) > table > tbody > tr > td");
var numPagesText = await characterPageHandle[^2].EvaluateAsync<string>("el => el.textContent.trim()");
var numPages = int.Parse(numPagesText);

3. 替换innerText为textContent #

部分动态渲染场景下，innerText受CSS样式影响可能返回空，textContent会返回元素的原始文本内容：

修改你的GetInnerTextAsync<T>扩展方法，将GetPropertyAsync("innerText")替换为GetPropertyAsync("textContent")：

public static async Task<T> GetInnerTextAsync<T>(this IElementHandle element)
{
    var textProperty = await element.GetPropertyAsync("textContent");
    var text = await textProperty.JsonValueAsync<string>();
    return (T)Convert.ChangeType(text?.Trim(), typeof(T));
}

4. 检查选择器中的tbody是否多余 #

部分网页的表格HTML中并没有显式的tbody标签，浏览器会自动生成，导致选择器中的tbody匹配到的是浏览器生成的空元素。尝试移除选择器中的tbody：

将原选择器：

#characters > table > tbody > tr > td:nth-child(2) > table > tbody > tr > td

改为：

#characters > table > tr > td:nth-child(2) > table > tr > td

内容的提问来源于stack exchange，提问作者bati