gpt4 book ai didi

javascript - Puppeteer 重新加载页面,直到某些特定样式发生更改

转载 作者:行者123 更新时间:2023-12-03 20:48:02 27 4
gpt4 key购买 nike

我想打开网络浏览器并继续重新加载,直到重新加载的页面具有不同的样式,然后转到下一个要执行的函数,除非继续重新加载。

假设我有一个 P 标签,然后重新加载页面,因为 display: block:

<p id="notYetStarted" style="display: block;">You need to reload the page if u can read me!</p>

但是停止重新加载页面,因为 P 标签的 display 属性是 display: none; 现在(在这种情况下不重新加载,继续执行其他代码) :

<p id="notYetStarted" style="display: none;">You need to reload the page if u can read me!</p>

我尝试使用递归函数但不工作:

(async () => {
try {
//init a browser tab and wait until completely loaded then go to next step
const browser = await puppeteer.launch({headless:false, args: ['--no-sandbox'] });
const page = await browser.newPage();
await page.setViewport({width:1366, height: 768})
await page.goto(url, { waitUntil: 'networkidle2' });

// wait for Recursive function to be resolve
await checkPTag(page)
// we are here because p.display:none
// continue execute other codes :)
}catch(err) {
console.log(err)
}
})();

const checkPTag = (page) => {
return new Promise(async (resolve, reject) => {
//search the dom for p tag and check it's display property
let result = await isPTagAvailable(page)
if(result === 'not started') {
//reload the page cz p.display:block
await page.reload({ waitUntil: ["networkidle0", "domcontentloaded"] })

//Recursive calling again
await checkPTag(page)
}else if(result === 'started') {
//no need reload the page cz p.none
resolve('started')
}
})
}


const isPTagAvailable = (page) => {
return new Promise (async (resolve, reject) => {
await page.waitForSelector('#body');

const pTags = await page.$$eval(
'#body',
nodes =>
nodes.map(element => {
const p = element.querySelector('p#notYetStarted');
console.log(p)
return JSON.parse(JSON.stringify(getComputedStyle(element, null).display));
} )
);
const pDisplay = pTags[0]

if(pDisplay === 'block') {
resolve('not started')
}else {
resolve('started')
}
})
}

上面的代码打开一个网络浏览器,等待dom完全加载并获取P标签的display值,因为它是block然后重新加载页面到目前为止一切顺利,但是如果显示值更改为 none 但它仍然会尝试重新加载页面。对不起长代码

最佳答案

我认为您的代码只是加载与第一个请求相同的缓存。因此,您应该在 URL 的末尾添加一些随机数,以确保响应与第一个响应的缓存不同。

const puppeteer = require ('puppeteer')

const urlPage = 'http://localhost/testing/test_display_none.html'

;(async () => {

const browser = await puppeteer.launch ({
headless: false,
devtools: false
})

const [page] = await browser.pages ()

page.setDefaultNavigationTimeout(0)

const functionToExecute = async () => {
// Code to run if P tag display is none (hidden)
console.log ('P tag display = none\n Executing next defined function...')
}

const ifTagPdisplayed = async () => {

const openPage = await page.goto ( urlPage + '?r=' + Date.now() , { waitUntil: 'networkidle2', timeout: 0 } )

const elemExist = await page.waitForSelector ('#notYetStarted', { timeout: 0 })

const getDisplay = await page.evaluate ( () => document.querySelector('#notYetStarted').style.display === 'none' )

if ( !getDisplay ) {
await ifTagPdisplayed ()
} else {
await functionToExecute ()
}

}

await ifTagPdisplayed ()

})()

关于javascript - Puppeteer 重新加载页面,直到某些特定样式发生更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59339731/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com