Puppeteer点击元素后无法获取更新的innerText问题求助

问题场景 #

爬取私有平台数据时，单个工人姓名可正常提取，但遇到团队工人（显示为SMITH Paul (+1)）时，点击对应的span元素后页面已显示队友信息、HTML也完成更新，Puppeteer执行点击操作后却无法获取更新后的innerText。测试代码显示点击前后内容一致，即使设置headless=false确认点击有效，问题仍存在。

相关细节 #

表格两种状态 #

<div class="s-table-container">
<table class="s-table">
<thead>
<tr>
<th>Event #</th>
<th>Worker</th>
</tr>
</thead>
<tbody>
<tr>
<td>39541</td>
<td>SMITH Paul</td>
</tr>
<tr>
<td>84751</td>
<td>SMITH Paul (+1)</td>
</tr>
</tbody>
</table>
</div>

点击前的团队人员HTML #

<td class="pure-datatable-col-technician  pure-datatable-cell " id="yui_3_17_2_1_1671091653408_2781">
"SMITH Paul&nbsp;"
    <span class="teammates-loader" id="yui_3_17_2_1_1671091653408_2782">
        "("
        <a id="yui_3_17_2_1_1671091653408_2784">+1</a>
        ")"
    </span>
</td>

点击后的团队人员HTML #

<td class="pure-datatable-col-technician  pure-datatable-cell " id="yui_3_17_2_1_1671091653408_3034">
    <span class="etech-technician-leader" id="yui_3_17_2_1_1671091653408_3082">
    "SMITH Paul"
    </span>
    ", BAKER Michael"
</td>

测试代码 #

let pageData = await page.evaluate(() => {

    let baseWorkerData = [];
    let newWorkerData = [];
    let teamCells = document.querySelectorAll("td[class='pure-datatable-col-technician  pure-datatable-cell '] > span");

    for (var z = 0; z < teamCells.length; z++) {
        baseWorkerData.push(teamCells[z].parentElement.innerText);
        teamCells[z].click();
        newWorkerData.push(teamCells[z].parentElement.innerText);
    };

    let result = {"baseWorkerData": baseWorkerData, "newWorkerData": newWorkerData};

    return result;

});

运行结果 #

{
  "baseWorkerData": [
    "SMITH Paul (+1)"
  ],
  "newWorkerData": [
    "SMITH Paul (+1)"
  ]
}

问题原因 #

1. 异步DOM更新未等待：点击操作触发页面异步更新DOM，代码中点击后立刻获取文本，此时DOM尚未完成更新，拿到的还是旧内容。
2. 静态节点集合失效：teamCells是点击前获取的静态NodeList，当DOM更新后，原span元素被替换，集合中保存的仍是旧节点的引用，无法获取新DOM的内容。

解决方案 #

方案1：在浏览器上下文用MutationObserver监听DOM变化 #

通过监听目标元素的DOM变化，确认更新完成后再获取文本：

let pageData = await page.evaluate(async () => {
    const baseWorkerData = [];
    const newWorkerData = [];
    const teamCellCount = document.querySelectorAll("td[class='pure-datatable-col-technician  pure-datatable-cell '] > span").length;

    for (let z = 0; z < teamCellCount; z++) {
        // 每次循环重新获取当前元素，避免引用旧节点
        const currentTeamCell = document.querySelectorAll("td[class='pure-datatable-col-technician  pure-datatable-cell '] > span")[z];
        const parentTd = currentTeamCell.parentElement;
        
        baseWorkerData.push(parentTd.innerText);
        currentTeamCell.click();

        // 等待原团队加载span消失，确认DOM更新完成
        await new Promise(resolve => {
            const observer = new MutationObserver((mutations) => {
                if (!parentTd.querySelector(".teammates-loader")) {
                    observer.disconnect();
                    resolve();
                }
            });
            observer.observe(parentTd, { childList: true, subtree: true });
        });

        newWorkerData.push(parentTd.innerText);
    }

    return { baseWorkerData, newWorkerData };
});

方案2：用Puppeteer内置方法等待元素状态变化 #

在Puppeteer上下文等待更新后的元素出现，确保DOM完成更新：

const teamCells = await page.$$("td[class='pure-datatable-col-technician  pure-datatable-cell '] > span");
const baseWorkerData = [];
const newWorkerData = [];

for (const cell of teamCells) {
    // 获取点击前文本
    const baseText = await cell.evaluate(el => el.parentElement.innerText);
    baseWorkerData.push(baseText);

    // 点击触发更新
    await cell.click();

    // 等待新的团队领袖元素出现，确认加载完成
    await page.waitForSelector(".etech-technician-leader", { timeout: 5000 });

    // 获取更新后的文本
    const newText = await cell.evaluate(el => el.parentElement.innerText);
    newWorkerData.push(newText);
}

const result = { baseWorkerData, newWorkerData };

关键说明 #

两种方案核心都是等待DOM更新完成后再读取内容，同时避免复用已失效的旧DOM节点引用。可根据页面实际加载逻辑调整等待条件（比如等待特定元素消失/出现），确保兼容性。

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