【问题标题】:Make multiple screenshots with nightmare-screenshot-selector使用 nightmare-screenshot-selector 制作多个屏幕截图
【发布时间】:2017-10-19 05:35:05
【问题描述】:

我有一个包含一组“li”元素的网页。我需要为每个“li”元素制作屏幕截图并将其保存到新文件中。 我正在尝试使用 nightmare-screenshot-selector 。 但是我得到了一些具有相同屏幕截图但名称不同的文件(来自我的数组)。

这是我的代码。

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();
}

【问题讨论】:

  • 把选择器改成li .${v}会有区别吗?
  • 您的<li> 的“标签”是否带有<li class="v1">first item</li> <li class="v2">second item</li> 之类的“标签”?因为这似乎是代码选择的内容。
  • 是的,没错:
  • 第一项
  • 第二项
  • 。我试图更改为 li .${v} 但它不起作用:“选择器“li .v1”与元素不对应。”
  • 也许删除 li 和 .v1 之间的空格?那么li.v1?
  • 是的,它可以工作li.v1,但结果与我之前描述的相同。我认为缓冲存在问题,Nightmare 仅对第一个元素进行屏幕截图并将其保存到缓冲区。而且我不知道如何处理。
  • 标签: javascript node.js nightmare


    【解决方案1】:

    我插入了一个 .end() 调用,对我有用。代码稍作修改,抓取谷歌首页的两个区域:

    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)
                })
            })
        }
    

    【讨论】:

    • 谢谢!是的,它适用于我网站上其他页面上的browser.end();。但问题在于我使用 javascript 创建的元素。
    • 在这种情况下,也许您需要包含一些代码来复制错误,例如一些 JavaScript 代码来生成页面,而不是示例中的 www.google.com。
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签