Giter Site home page Giter Site logo

Comments (9)

jamesehearn avatar jamesehearn commented on July 1, 2024 1

Pull request has been made. I think I did this right (I don't use GitHub at my company, so I'm a bit rusty here). Let me know what else needs to be done.

from automatedvisualtesting.

vivrichards600 avatar vivrichards600 commented on July 1, 2024

Hi James, I believe your right. I'd stick a break point on line 177 (if it get's that far) and check the values being set for the rectangle. It's tricky to know 100% without me running the same test on my machine but I'd give that a go. I found in another method I had a similar error where the height/width being used was wrong for the rectangle.

from automatedvisualtesting.

jamesehearn avatar jamesehearn commented on July 1, 2024

The Rectangle method:

var croppedImage = new Rectangle(element.Location.X, element.Location.Y, element.Size.Width, element.Size.Height);

is setting the width as 820 and the height as 598.

Checking that against the style, that's the Width + padding + border, and the Height + padding + border, so no margin included (screenshot attached).
2-5-2019 8-39-20 am

I'm unsure what the width and height should be for now, but will investigate.

from automatedvisualtesting.

maartenkuijpers avatar maartenkuijpers commented on July 1, 2024

I encountered the same issue and found a way to solve it. I use it on Chrome driver on Windows 10. It appeared to me that the screenshots that are generated by the driver are larger than my browser viewport. I tried to see if the cssPixelRatio was an issue and it seems to be the case. When I open a iPhone-viewport (375 x 667), the screenshot is twice that (750 x 1334), ergo a pixel ratio of 2. I fixed the issue by determining the pixelRatio by dividing screnshot width by width of element in current driver, and multiply cropping position & size by that:

var byteArray = ((ITakesScreenshot)driver).GetScreenshot().AsByteArray;
var screenshot = new Bitmap(new MemoryStream(byteArray));
var pixelRatio = screenshot.Size.Width / driver.FindElement(By.TagName("body")).Size.Width;
var croppedImage = new Rectangle(pixelRatio * element.Location.X, pixelRatio * element.Location.Y, pixelRatio * element.Size.Width, pixelRatio * element.Size.Height);

screenshot = screenshot.Clone(croppedImage, screenshot.PixelFormat);

Also, I realised that it was important that the element that is to be compared, has to be visible in the browser (not 100% sure though).

@vivrichards600 - can you please adjust this in the repository?

from automatedvisualtesting.

LarsThunberg avatar LarsThunberg commented on July 1, 2024

Yes, this is also how I avoid this problem. Make the screenshot "inside" the browser viewport. I use a simple image editor (IrfanView) to manually see how large my screenshots can be.

from automatedvisualtesting.

vivrichards600 avatar vivrichards600 commented on July 1, 2024

Can you make the change and submit a pull request and I'll merge it in then so it's fixed for everyone.

Thanks.

from automatedvisualtesting.

jamesehearn avatar jamesehearn commented on July 1, 2024

If this isn't done yet, I'll try to work on it next week. Been busy with other things for a while here, but may have some time to work on this soon.

from automatedvisualtesting.

vivrichards600 avatar vivrichards600 commented on July 1, 2024

Thanks for the contribution :)

from automatedvisualtesting.

jamesehearn avatar jamesehearn commented on July 1, 2024

Happy to help!

from automatedvisualtesting.

Related Issues (8)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.