PhantomCSS - 无法从DOM调用函数

时间:2016-12-02 10:37:35

标签: javascript phantomjs casperjs phantomcss

我试图调用页面上已存在的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();
    });
  

更新

添加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

1 个答案:

答案 0 :(得分: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);