selenium自动化学习--截取长图的方法

解决思路

主要运用gm方法对截图的拼接：

1. 先运动webdriver.takeScreenshot()和scroll的操作分别截取出我们需要的截图。

2. gm().把所有的截图拼接在一起（需要安装gm：GraphicsMagick链接）

3. 删除没用的临时的截图

具体代码

const gm = require('gm');
exports.screenLongShot = async function (driver, path) {
    // 图片存入的路径
    let targetPath = path.split("/");
    let dirPath = path.substring(0, path.indexOf(targetPath[targetPath.length - 1]));
    // 全文的高度
    let totalHeight = await driver.executeScript("return document.body.scrollHeight");
    // 获取浏览器页面的高度，判断需要向下scroll几次
    let hh = await driver.manage().window().getRect();
    let height = hh['height']
    let count = height;
    let i = 1
    while (height<totalHeight){
        if (mkdirsSync(dirPath) === true) {
            // 截图
            await driver.takeScreenshot().then(
                function (image) {
                    console.log(image)
                    // 先暂时存起来
                    fs.writeFile(dirPath + 'tmp' + i + '.jpeg', image, 'base64', function (err) {
                        if (err !== null) {
                            console.log(err);
                        }
                    });
                }
            )
        }
        i++;
        // 向下scroll 一个窗口的高度
        await driver.executeScript("window.scrollBy(0,"+height+")");
        height += count;
    }
    // 读文件 获取刚才截的几张图
    let tmpImg = await fs.readdirSync(dirPath)
    let finImg = []
    for(let key of tmpImg){
        console.log(key)
        if (key.search('tmp') !== -1){
            finImg.push(key)
        }
    }
    // 先把第一个图片当作最上面的图，之后在这个图片上拼接，之后删除掉临时的图片
    await gm(dirPath+finImg[0]).write(path, function(err){
        fs.unlinkSync(dirPath+finImg[0]);
        if(err != null){
            console.log(err);
        }
    });
    await wait(driver, 2000);
    // 拼接之后删除
    for(let i = 1; i<  finImg.length;i++){
        await wait(driver, 2000);
        await gm(path).append(dirPath+finImg[i]).write(path, function(err){
            fs.unlinkSync(dirPath+finImg[i]);
            if(err != null){
                console.log(err);
            }
        });
    }
};

效果

总结

方法有点垃圾，就是把多个图拼接在一起，但是由于没找到好的方法，所以能勉强实现截图的目的。如果有更好的方法，欢迎分享！