search

tacoss / testcafe-blink-diff

Visual regression for Testcafé
64 stars 15 forks source link

Is it possible to set the height and width for the taken screenshot? So the page size would be the same for each screenshots. #60

Open erolstt opened 1 year ago

erolstt commented 1 year ago

Hi, Is there a way to set the size of the screenshots? I think I can set the browser size using resizeWindow method within testcafe but that would be my last option unless there is no way to set the screenshot size with testcafe-blink-diff.

Thank you,

pateketrueke commented 1 year ago

Hi, afaik screenshots are taken fullscreen, or from a particular element. The only way to take screenshots from the same size is either resizing the window for fullscreen, or using a determined element that does not change its dimensions.

erolstt commented 1 year ago

Hi, thank you for getting back to me. I did try to take a screenshot of a div and get the whole page but that also did not work. For some reason, it is taking the full screenshot of the page even the elements that are not in the div in the screenshot such as the header and footer elements. If I use t.takeElementScreenshot method in testcafe it always takes the screenshot of the element that I pass the function but it does not work like that when passing a selector to takeSnapshot method. I noticed that it works fine if the selector is small like a button or textbox but if I use a form that has multiple web elements sometimes it takes a screenshot of more than the form that I pass. The web page I am trying to take screenshots of is responsive so the web elements might be bigger or smaller based on the window size. I thought that might be the issue but even though I use resizeWindow function before taking the screenshots and make sure the size of the window is the same whenever I take the screenshots I have the same issue. Unfortunately, the website I am working on is not open to the public so I cannot share the code but when I have time I will try to do the same thing on a public website if I can reproduce the issue there I can share the code and steps here.

One more question if you don't mind. When I use blockOut and pass some elements do I still see the diff in out.png file? Even if I block out some elements they are still appearing in the report as diff so I was not sure if it works or not. Thank you,

pateketrueke commented 1 year ago

I think you should share more details, like version used, settings, some examples of what are you doing. Its bit hard to think about without nothing to reason about... thank you!