私はnightmare.jsスクリプトを実行しています。ここでは、ページ上の複数の要素のスクリーンショットを取得しようとしています。Nightmare.js screenshotバッファの長さ0
最初の要素はきれいにキャプチャされますが、フォールドの下にある他のすべての要素はゼロ長でキャプチャされます。私はこの問題をデバッグするのに苦労しています。どんな助けでも信じられないほど高く評価されます。
基本的に、このスクリプトはページ内を移動し、すべてセレクタに一致する要素を選択します。次に、async
を使用して応答を収集し、オブジェクトのバッファを返します。問題は、折りたたみの下の要素がスクリーンショットを取得しないことです(バッファの長さはゼロになります)。私はwait()
を試して要素にスクロールしましたが、まだ成功していません。
import * as Nightmare from 'nightmare'
import * as vo from 'vo'
import * as async from 'async'
import * as fs from 'fs'
const urls:String[] = [
'https://yahoo.com/'
]
Nightmare.action('snap', function(selector:String, done:Function) {
const self = this;
this.evaluate_now(function (selector) {
return Array.from(document.querySelectorAll(selector))
.map((ele:Element) => {
if (ele) {
const rect = ele.getBoundingClientRect()
const r:Function = Math.round
return {
x: r(rect.left),
y: r(rect.top),
width: r(rect.width),
height: r(rect.height)
}
}
})
}, function(err, clips) {
if (err) return done(err)
if (!clips) return done(new Error(`Selector not found`))
let snaps = []
const snap = (clip, cb) => {
self
.scrollTo(clip.y - clip.height, clip.x)
.screenshot(clip, cb)
.run()
}
async.mapSeries(clips.reverse(), snap, (err, res) => {
done(err, res)
})
}, selector)
})
const scrape = (url) => {
const nightmare = Nightmare({
show: true
});
nightmare
.goto(url)
.snap('.navbar')
.end()
.then((buffers:Buffer[]) => {
buffers.forEach((data, index) => {
fs.writeFileSync(`images/navbar-${index}.png`, data)
})
})
}
urls.forEach(scrape)
この問題を再現しようとしていますが、yahoo.comページに「.navbar」という要素がないことがわかりました。あなたはそれを明確にしていただけますか? –
Evgeny、確かに。ブートストラップが付いたページ(https://getbootstrap.com/ – auser
)で試してみてください。あなたはそれを複製できましたか、@EvgenySorokin? – auser