HuddleEng / PhantomCSS

Visual/CSS regression testing with PhantomJS
MIT License
4.72k stars 259 forks source link

full page image? #122

Closed dfguo closed 9 years ago

dfguo commented 9 years ago

Hi, I understood that full page can be fragile, but my use case really needs it. How can I take a long full page screenshot? I have looked into the documents of CasperJS and PhantomJS but didn't seem to find anything useful. Changing the viewportSize height didn't help too. Thanks!

tommarshall commented 9 years ago

Does selecting the html or body tag not do what you're after here?

casper.then( function () {
    phantomcss.screenshot('html', 'whole page');
} );
jamescryer commented 9 years ago

I think a screenshot of the 'body' tag will be unbounded by viewport. You could try taking multiple segments using coordinates (assuming you know/ can get the page height and width)

phantomcss.screenshot({
   top: 100,
   left: 100,
   width: 500,
   height: 400
}, screenshotName);
Jiff21 commented 9 years ago

dfgue you may want to try updating and changing the viewport again.

This is working for me:

    casper.start(baseUrl, function () {
        casper.viewport(2549, 3307)
            .then(function () {
                phantomcss.screenshot('html', 'whole page');
            });
    });

Running casperjs 1.1.0-beta3, phantomcss 0.10.4, OSX Yosemite

codeengie commented 9 years ago

I'm having the same issue, can't seem to set the height for the viewport. Here's what I'm working with:

casper.start().eachThen(pageURLS, function(response) {
        var pageTitle = this.getTitle().replace(pattern, '_');

        // Loop through viewports
        this.each(viewports, function(casper, viewport) {

            // Set viewport
            this.then(function() {
                console.log(viewport.viewport.width + ',' + viewport.viewport.height);
                this.viewport(viewport.viewport.width, viewport.viewport.height);
            });

            // Go to each URL and wait for a response before taking screenshots
            this.thenOpen(response.data, function(response) {
                this.wait(2000);
                phantomcss.screenshot('html', 'page_' + viewport.name + pageTitle);
            });
        });

        // Compare the screenshots
        casper.then(function now_check_the_screenshots() {
            phantomcss.compareAll();
        });
    });
jamescryer commented 9 years ago

Closing issue, problem is not solvable within library itself