如何检查特定的脚本元素是异步的还是与Puppeteer延迟的

Question

嗨，我尝试找出哪个脚本使用木偶器设置了异步。

所以我的想法是寻找具有特定 src 集的脚本标签，而不是获取标签的完整 html 并在那里异步提取

我从这样的东西开始

const pattern = 'script[src*="'+url+'"]'
const text = await page.$(pattern);

但失败了。同样有了这个(脚本.js(肯定在html中

const text = await page.$('script[src*="thescript.js"]');

结果我得到了一些巨大的 json 并经过测试

text.innerText
test.innerHTML 

但这些地方都是空的。

Answer 1

作为一个更简单和"更傀儡"的解决方案，您可以使用.getAttribute('src')来识别所需的脚本，然后await page.evaluate(el => el.async, (await page.$$('script'))[i])检查它是否异步或await page.evaluate(el => el.defer, (await page.$$('script'))[i])检查它是否延迟。

所有脚本迭代并检查它们是否异步的示例：

const puppeteer = require('puppeteer')
async function fn() {
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto('https://example-with-script-tags.com')
const scriptsOnPage = await page.$$eval('script', el => el.map(o => o.getAttribute('src')))
for (const [i, src] of scriptsOnPage.entries()) {
const async = await page.evaluate(el => el.async, (await page.$$('script'))[i])
console.log(src + ' is async: ' + async)
}
await browser.close()
}
fn()

输出：

fn1() is async: true
fn2() is async: true
fn3() is async: true
fn4() is async: false

您还可以使用以下命令在 Chrome devtools控制台选项卡中测试脚本：

第一个脚本：

• $$('script')[0].attributes.src

• $$('script')[0].async

第二个脚本：

• $$('script')[1].attributes.src

• $$('script')[1].async

  等。