使用噩夢截屏選擇器制作多個屏幕截圖

Question

我有一個包含“ li”元素集的網頁。 我需要為每個“ li”元素制作屏幕截圖，並將其保存到新文件中。 我正在嘗試使用噩夢截屏選擇器。 但是我得到了一些文件，它們具有相同的屏幕截圖，但名稱不同（來自我的數組）。

這是我的代碼。

const Nightmare     = require('nightmare');
const fs            = require('fs');
const screenshotSelector = require('nightmare-screenshot-selector');
Nightmare.action('screenshotSelector', screenshotSelector);

function savePicture(picture) {
    picture = ['v1', 'v2', 'v3'];
    let browser = Nightmare({
        show: false,
        webPreferences: {
            partition: 'nopersist'
        }
    });
    browser   
        .goto('https://www.google.com')
    picture.forEach(v => {  
        browser   
            .wait(7000)
            .screenshotSelector(`li[class="${v}"]`) 
            .then(function (data) {                 
                fs.writeFileSync(`img/${v}.png`, data)
            })
            .catch((error) => {
                console.log('Error loading the page', error)
            })
    })
    browser.end();
}

Answer 1

我插入了一個.end（）調用，對我有用。 稍作修改的代碼，獲取了Google主頁的兩個區域：

function savePicture(picture) {
    picture = ['div#hplogo', 'div.tsf-p'];
    let browser = Nightmare({
        show: false,
        webPreferences: {
            partition: 'nopersist'
        }
    });
    browser   
        .goto('https://www.google.com')
    picture.forEach(v => {  
        browser   
            .wait(2000)
            .screenshotSelector(v) 
            .then(function (data) {                 
                fs.writeFileSync(`img/${v}.png`, data)
            })
            .then(()=> {
                browser.end();
            })
            .catch((error) => {
                console.log('Error loading the page', error)
            })
        })
    }