minibugs bonus round

[made-by-chris]

Hi guys, I am testing some rather large pages, and think perhaps im running out of memory or something, and the tests (12 pages) take around 20 minutes.

A number of little bugs include:

• the screenshots taken do not accurately depict my webpage (which uses angularjs and a bunch of other js libraries, maybe that's why) , with elements shifting of place, and a large margin down the whole right side.
• tests fail after running test twice in a row without any interstitial changes.
• "Could not complete image comparison for ./screenshots/screenshot_(X).png" also shows up for every single page tested.

Please let me know if im doing anything wrong, or if youd liek more details

[made-by-chris]

I just ran the project with a fresh base and an immediate test,
PhantomCSS found 12 tests, 4 of them failed.
PhantomCSS has created some images that try to show the difference (in the directory ./failures). Fuchsia colored pixels indicate a difference betwen the new and old screenshots.

however there are no failure images in the /failure dir

[jamescryer]

I'd recommend breaking your UI into smaller screenshots, it might help with the performance as well as reduce risk from any dynamic elements on the page. Also, are you naming your screenshots? If not, try it.

• Check that your viewport size is correct for the any media queries you might have
• Your App presumably has asynchronously loaded components/assets, You'll have to add specific waits to ensure these components are fully loaded

I can't help more without seeing the tests.

[made-by-chris]

Thanks alot james. Im working on testing partial areas now.

I installed a fresh copy of phantomCSS and ran the test twice, everything looked great. I then dragged over my previous test: https://gist.github.com/basiclaser/0a87534524713be710ae
I ran it once, great. Second time:

PhantomCSS found 12 tests, 4 of them failed.
PhantomCSS has created some images that try to show the difference (in the directory ./failures).       Fuchsia colored pixels indicate a difference betwen the new and old screenshots. "

There was no ./failures folder generated.

I then ran the default testsuite.js test again: "PhantomCSS found 16 tests, 4 of them failed." Again, no failure folder created. I'm not sure how the '4 mystery tests' are being mentioned in my test, even if i delete the old screenshots from the testsuite.js test from the screenshots folder.

Sorry if this was too much at once! I really appreciate your time, and your great project.

[jamescryer]

The test looks fine to me. Perhaps the screenshot compare is timing out? I haven't seen this behavior before. Let us know if you figure it out.

[made-by-chris]

I got there eventually, just created a new project without running the default tests, it seems to be stable.

What are your thoughts on using classes as selectors for screenshots? I've inherited an enormous project which uses classes exclusively.

I am currently using an array to specify groups of selectors for each page, which appears to be working. It is not mentioned in the docs. is it recommended?

casper.thenOpen('http://0.0.0.0:6543/domain', function (page) {
        casper.then(function () {
            phantomcss.screenshot(['.row-section-header','.row-section-header', '.row-content-header','.search-bar-wrapper','.domain-section-info-boxes','.domain-section-info-offers']);
        });
    });

The test says its taking new screenshots every time the test is run, and misreports failures, but still works by either generating a failure folder or not. It also says no tests were performed, but i guess thats because im not relying on the normal test syntax.

If i could get your thoughts on these individual issues, that would be amazing. Thanks!

[jamescryer]

That's not supported, try this:

phantomcss.screenshot({
      'Screenshot 1 File name': '#screenshot1',
      'Screenshot 2 File name': '#screenshot2'
});

Using classnames is fine, but I advice not using classes that are already in use for styling, you'll be coupling your tests to CSS implementation which is a bad idea.