Comments (9)
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.
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.
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).
I'm unsure what the width and height should be for now, but will investigate.
from automatedvisualtesting.
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.
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.
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.
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.
Thanks for the contribution :)
from automatedvisualtesting.
Happy to help!
from automatedvisualtesting.
Related Issues (8)
- ReadMe doesn't appear to match implemented solution HOT 1
- Issues with TestContext being initialized outside the assembly HOT 1
- Images not complete in width with responsive web pages HOT 4
- Need to upgrade ChromeDriver to avoid crash HOT 2
- Change to Settings for .NET Core support? HOT 1
- Blur focus before comparing HOT 2
- OutOfMemory exception if element is bigger than page HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from automatedvisualtesting.