up：第一个链接起作用，其他不起作用

伊凡·加瑞（Ivan Garay）

这是我的第一篇文章。我用Node.js学习JS。因此，我看到了Puppeteer脚本来截取元素的屏幕截图，然后进行复制和更改。但是这里有些问题。


        const express = require('express')

        const app = express()
        const port = 3000

        app.get('/', (req, res) => res.send('Veamos Kia!'))

        app.listen(port, () => console.log(`App de ejemplo escuchando el puerto ${port}!`))
        app.get("/scrapping", function (req, res) {
            res.send('Estamos listos para empezar');
        })

        const puppeteer = require("puppeteer");
        const mkdirp = require('mkdirp')

        
        //Vemos y formateamos la fecha en la que las capturas se hacen
        let date = new Date()

        let day = date.getDate()
        let month = date.getMonth() + 1
        let year = date.getFullYear()

        if(month < 10){
        console.log(`${day}-0${month}-${year}`)
        }else{
        console.log(`${day}-${month}-${year}`)
        }
        //fecha formateada a DD/MM/AAAA
        let dateFormat = `${day}${month}${year}`;

        //fecha formateada todo seguido
            let dateNumber = Number(date);
            const fs = require("fs");



            //ES LA BASE


            //const puppeteer = require('puppeteer');           // include lib
            (async () => {                                    // declare function
                const browser = await puppeteer.launch({'defaultViewport' : { 'width' : 1920, 'height' : 545 }});       // run browser
                const page = await browser.newPage();           // open new tab
                const navigationPromise = page.waitForNavigation()

                await page.goto('https://www.fiat.cl/modelo/ducato-pasajeros/ducato-pasajeros-precios-y-versiones/#top'); 
                
                     

                await page.waitForSelector('div.small-12.large-12.columns.container');          // wait for the selector to load
                let element = await page.$('div.small-12.large-12.columns.container');        // declare a variable with an ElementHandle
                await element.screenshot({path: `fiat/${dateFormat}/1.png`}); // take screenshot element in puppeteer
                

                await page.goto('https://www.fiat.cl/modelo/argo/argo-precios-y-versiones/#top'); 
                await navigationPromise
                
                     

                await page.waitForSelector('div.small-12.large-12.columns.container');          // wait for the selector to load
                
                await element.screenshot({path: `fiat/${dateFormat}/2.png`}); // take screenshot element in puppeteer

                await browser.close();                          // close browser
    })();

日志把这个扔给了我。“（（node：17856）UnhandledPromiseRejectionWarning：错误：节点不可见或不是HTMLElem”

第一个屏幕截图正常，但第二个屏幕有错误。我究竟做错了什么？对不起我的语法错误，我不是说英语的人，但我正在努力改善它。

马克·皮奥特洛夫斯基

第二个屏幕截图很可能不起作用，因为您已经拥有一个旧的句柄，而该旧句柄element不再可用（您已经导航到其他页面）。您必须重新初始化element变量：

const express = require('express')

const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Veamos Kia!'))

app.listen(port, () => console.log(`App de ejemplo escuchando el puerto ${port}!`))
app.get("/scrapping", function (req, res) {
    res.send('Estamos listos para empezar');
})

const puppeteer = require("puppeteer");
const mkdirp = require('mkdirp')


//Vemos y formateamos la fecha en la que las capturas se hacen
let date = new Date()

let day = date.getDate()
let month = date.getMonth() + 1
let year = date.getFullYear()

if(month < 10){
console.log(`${day}-0${month}-${year}`)
}else{
console.log(`${day}-${month}-${year}`)
}
//fecha formateada a DD/MM/AAAA
let dateFormat = `${day}${month}${year}`;

//fecha formateada todo seguido
    let dateNumber = Number(date);
    const fs = require("fs");



    //ES LA BASE


    //const puppeteer = require('puppeteer');           // include lib
    (async () => {                                    // declare function
        const browser = await puppeteer.launch({'defaultViewport' : { 'width' : 1920, 'height' : 545 }});       // run browser
        const page = await browser.newPage();           // open new tab
        const navigationPromise = page.waitForNavigation()

        await page.goto('https://www.fiat.cl/modelo/ducato-pasajeros/ducato-pasajeros-precios-y-versiones/#top');



        await page.waitForSelector('div.small-12.large-12.columns.container');          // wait for the selector to load
        let element = await page.$('div.small-12.large-12.columns.container');        // declare a variable with an ElementHandle
        await element.screenshot({path: `1.png`}); // take screenshot element in puppeteer


        await page.goto('https://www.fiat.cl/modelo/argo/argo-precios-y-versiones/#top');
        await navigationPromise



        await page.waitForSelector('div.small-12.large-12.columns.container');          // wait for the selector to load
        let elementAfterNavigation = await page.$('div.small-12.large-12.columns.container');        // re-initialize element!
        await elementAfterNavigation.screenshot({path: `2.png`}); // take screenshot element in puppeteer

        await browser.close();                          // close browser
})();

请注意elementAfterNavigation。这就是为什么此类功能（例如单个屏幕截图）应具有范围变量的功能。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。