Blank images from current views ...

[teratux]

Hello ... I'm currently using VisualCeption to see if the original design specifications are met in every page of my website. I followed the install and configuration guidelines and it is up and running. This is the configuration I used in my acceptance suite:

- VisualCeption:
            referenceImageDir: 'referenceObjects/'
            currentImageDir: 'currentObjects/'
            report: true
            maximumDeviation: 5                                   # deviation in percent
            saveCurrentImageIfFailure: true                       # if true, VisualCeption saves the current

This correctly produces a tests/_data/referenceObjects directory where I can store my original element designs and it also produces a tests/_output/currentObjects directory where the current items from my pages are stored.

The problem lies when I run my test. The DOM element is being identified correctly but the produced image is blank with the correct dimensions. For example, this is my test:

  public function visualMatch(AcceptanceTester $I)
   {
       $I->resizeWindow(1024,762);
       $I->maximizeWindow();
       $I->amOnPage('/general_info/promotions');
       $I->seeVisualChanges( "promotion_icon", ".image-plan" );
   }

There is an element with a class .image-plan that has a background image and promotion_icon is an image file called: testFrontendCest.visualMatch.promotion_icon.png in the referenceObjects directory. The result comparison is in this link Visualcept blank and as you can see the original is being loaded and compared to a blank image. This Screenshot is the produced screenshot with the Recorder extension.

I'm using Webdriver and PhantomJS.

Thanks in advance

[buresmi7]

Hi, you can try run $I->seeVisualChanges('all', 'body') to show all page. This can help to investigate the problem. First run of the test will create reference image and second will compare these image. Also check element with class .image-plan, if there are more then one elements with same class, the last will be applied.

[teratux]

There is no other .image-plan in my code: pasted. What you suggested did produce a fullscreen image of the page displayed. Still the problem with the element persists. Here is the div I'm trying to capture, you can find it in the pastebin contents:

<div class="rounded-circle image-plan avatar-plan">
         <div class="plan-effect rounded-circle"><p>Ver detalles de la oferta</p></div>
</div>

And here's the computed code of the css styles applied to it:

background-attachment: scroll;
background-clip: border-box;
background-color: rgb(247, 247, 247);
background-image: url("http://redbridgesylius.com/assets/app/themes/MainTheme/public/image/planes.e7d3fa31.svg");
background-origin: padding-box;
background-position: 50% 50%;
background-position-x: 50%;
background-position-y: 50%;
background-repeat: no-repeat;
background-size: 40% auto;
border-bottom-color: rgb(181, 57, 65);
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0;
border-image-repeat: stretch stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(181, 57, 65);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(181, 57, 65);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(181, 57, 65);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgb(181, 57, 65);
font-family: "Open Sans", sans-serif;
font-size: 15px;
font-weight: 400;
height: 225px;
line-height: 22.5px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
text-align: center;
width: 225px;

If I had to guess, I would say the bit that extracts the component from the page only extracts it up to the point where the background-color is white and does not extract it fully with a background-image. Although the fullscreen produced image does in fact generate every element accordingly fullscreen, so no clue as to whats the issue

[teratux]

Any followups?