puppeteer 获取 instagram 配置文件复选框值 - HTML 不会更改

Question

学习木偶……我认为 Instagram 是一个很好的起点。

正在尝试查看我在 Instagram 中的帐户是否配置为 "Private Account" 下的 Privacy and Security。我的困惑是 HTML 用于选中和未选中的几乎相同：

已检查：

<div class="qlmO5"><div class="bGWmh" id="accountPrivacy"><label class="U17kh PLphk" for="f2ef028392b78b8"><input class="tlZCJ" id="f2ef028392b78b8" type="checkbox" value="" checked=""><div class="mwD2G"></div>Private Account</label></div></div>

未选中：

<div class="qlmO5"><div class="bGWmh" id="accountPrivacy"><label class="U17kh PLphk" for="f111b1f63405c24"><input class="tlZCJ" id="f111b1f63405c24" type="checkbox" value="" checked=""><div class="mwD2G"></div>Private Account</label></div></div>

我认为它可能是 <input> 的 id 值，但它不会根据复选框的值而改变。我还尝试区分整个 html 已检查和未检查，它们是相同的。

这样的话，我是不是应该截图看看能不能匹配到“☑ 私人账号”的图片？我觉得这可能是可能的，但不是必须的。

Answer 1

HTML 在这两种情况下确实是相同的，但 DOM 树不是。当检查私有帐户"checkbox"时，.mwD2G div获取a :before元素的元素，因此您可以在page.evaluate：[= =]中检查它。 17=]

window.getComputedStyle(document.querySelector(".mwD2G"), ":before").getPropertyValue("content")

所以如果这个框被选中，查询的结果是" "，如果没有被选中，none。

const privateProfile = await page.evaluate(() =>
    window.getComputedStyle(document.querySelector(".mwD2G"), ":before")
    .getPropertyValue("content") === "none" ? false : true)

puppeteer 获取 instagram 配置文件复选框值 - HTML 不会更改

puppeteer get instagram profile checkbox value - HTML does not change

checkbox

instagram

puppeteer