PhantomCSS

Question

我正在尝试调用页面上已存在的 moveNext 函数。此函数通过将值作为参数传递来帮助导航到特定页面，例如：moveNext(2)。我想捕获从第一页到最后一页的屏幕截图。但是，当我运行在终端 casperjs test testsuite.js 中执行此命令时，它仅捕获第一页的 10 个屏幕截图，而不是每个页面的每个屏幕截图。

casper.start('https://example.com');

    function captureScreenshot(width, height, device, startPage, lastPage){
        casper.viewport(width, height);

        var currentPage;

        casper.then(function () {
            for (currentPage = startPage; currentPage < lastPage; currentPage++) {
                phantomcss.screenshot('html', 'screenshot');
                this.page.evaluate(function() {
                    console.log(currentPage);
                    moveNext(currentPage + 1);
                });
            }
        });

        casper.then(function now_check_the_screenshots() {
            // compare screenshots
            //phantomcss.compareAll();
            for (var i= 0; i < 10; i++) {
                phantomcss.compareExplicit(['/screenshot/layout/'+ device +'/screenshot-'+ i +'.jpg', '/screenshot/build/'+ device +'/screenshot-'+ i +'.png']);
                phantomcss.compareExplicit(['/screenshot/layout/'+ device +'/screenshot-'+ i +'.jpg', '/screenshot/build/'+ device +'/screenshot-'+ i +'.png']);    
            }
        });
    }

    /* Capture screenshot for desktop and compare them */
    captureScreenshot(1920, 1080, 'desktop', 0, 10);

    /* Capture screenshot for mobile and compare them */
    //captureScreenshot(375, 667, 'mobile');

    /* Casper runs tests */
    casper.run(function () {
        console.log('\nTHE END.');
        // phantomcss.getExitStatus() // pass or fail?
        casper.test.done();
    });

Update:

添加 casper.on("page.error/error"); 后出现此错误：

FAIL addListener only takes instances of Function
#    type: uncaughtError
#    file: testsuite.js:118
#    error: addListener only takes instances of Function
#           addListener@phantomjs://platform/events.js:118:74
#           phantomjs://code/testsuite.js:66:13
#           runStep@phantomjs://platform/casper.js:1577:31
#           checkStep@phantomjs://platform/casper.js:404:28
#    stack: not provided

Answer 1

casper.start('https://example.com');

    function captureScreenshot(width, height, device, startPage, lastPage) {
        casper.viewport(width, height);

        casper.then(function () {
            var currentPage = startPage - 1;

            /* Capture screenshot of footer */
            phantomcss.screenshot('footer', 'footer');

            /* Capture screenshot of header */
            phantomcss.screenshot('header', 'header');

            /* Capture main content screenshot */
            casper.repeat(lastPage, function () {
                this.page.evaluate(function (currentPage) {
                    moveNext(currentPage);
                }, ++currentPage);

                this.wait(8000, function () {
                    phantomcss.screenshot('#NavForm > .container', 'main-content');
                });
            });
        });

        casper.on('remote.message', function (msg) {
            this.echo(msg);
        })

        casper.on('error', function (err) {
            this.die("PhantomJS has errored: " + err);
        });

        casper.on('resource.error', function (err) {
            casper.log('Resource load error: ' + err, 'warning');
        });

        casper.on("page.error", function (msg, trace) {
            this.echo("Page Error: " + msg, "ERROR")
        });

        casper.then(function now_check_the_screenshots() {
            // compare screenshots
            //phantomcss.compareAll();
            for (var i = 0; i < 10; i++) {
                phantomcss.compareExplicit(['/screenshot/layout/' + device + '/screenshot_' + i + '.jpg', '/screenshot/build/' + device + '/screenshot_' + i + '.png']);
                phantomcss.compareExplicit(['/screenshot/layout/' + device + '/screenshot_' + i + '.jpg', '/screenshot/build/' + device + '/screenshot_' + i + '.png']);
            }
        });
    }

    /* Capture screenshot for desktop and compare them */
    captureScreenshot(960, 5000, 'desktop', 10, 17);

PhantomCSS - 无法从 DOM 调用函数

PhantomCSS - Unable to invoke function from DOM

javascript

phantomjs

casperjs