I am using Puppeteer to do visual regression testing (specifically I am using the jest-image-snapshot library for this). Unfortunately, when I use machines with different screen characteristics, the screenshots are slightly different and the tests fail. For example, I have a test where the screenshot was originally taken on a non-retina Mac display, but when the test runs on a Mac with a retina display there are minor differences in the screenshot that make the test fail.
Is it possible to take screenshots with Puppeteer that are independent of the display used?
I tried to force a non-retina screenshot on a retina display by calling setViewport, but that didn't help: page.setViewport({width: 800, height: 600, deviceScaleFactor: 1});
Are there any other screenshoting tools/techniques that address this issue?
Related
I have a hero with multiple images, I want to display images according to screen sizes, for example, if the user is using a big screen, the hero will load the large/wide images, and if he uses a phone, the hero will display a different image that is not wide to fit the screen.
I do not know how to do this with nextjs, there is no way to specify which image to load on a different screen.
I did solve the problem using nextjs's useMediaQuery
{ const mobile = useMediaQuery(theme.breakpoints.down('sm')); }, but the results aren't perfect, because if you use mobile ? [....] : [....] you cannot add 'priority' to the image components, if you try to add it, it will load both images first, then execute the conditional statement to hide one. so you have to sacrifice that.
It seems like Image doesn't support that use case. I found this and it works as expected. https://github.com/vercel/next.js/discussions/32196#discussioncomment-1761938
I have a scraping script written in Ruby which uses Selenium, Watir and ChromeDriver, all is working just fine with a Chrome browser window, but trying to run in headless mode just hits;
Selenium::WebDriver::Error::UnknownError: unknown error: Element <input id="desired_element" type="checkbox" name="desired_element" checked="checked"> is not clickable at point (660, 594). Other element would receive the click: <html lang="en">...</html>
I'm using Watir 6.8 and latest Chromedriver 2.33.
Any ideas whats n=behind the different behavior of the page when in headless vs non headless, and how I can deal with this?
The error message is telling you what the problem is when it says "Other element would receive the click:"
This means some other element on the screen is covering the checkbox you are trying to interact with. Likely this is caused by whatever the default browser size in headless mode being different than the default size of your browser when it is run non-headless, resulting in a different arrangement of elements
We can verify if this is the case by asking the size of the window in both headless and normal modes and seeing if the resulting values are the same.
size = browser.window.size
puts "The browser window is #{size.width} wide by #{size.height} high"
There are a few potential ways to solve this:
Specify or alter the browser 'window' size. for example
browser.window.resize_to 1024, 768
I prefer this, and normally have a command such as that to set the
browser size right after it is initialized. Set either to the
minimum supported size for your site, or the minimum recommended
size
Use another means to 'click' on the checkbox, such as sending a space at it
#browser.checkbox(name: "desired_element").send_keys " "
I do not prefer this as it doesn't really solve the source of the problem and you may experience other similar issues interacting with other elements on the site as your script progresses.
The reason for this kind of error is that web page doesn't load well enough to locate the element. As you have mentioned that the tests previously passed when you had headless true such issues might be because of .click() , please try replacing .click with .send_keys
.send_keys(selenium.webdriver.common.keys.Keys.SPACE)
When you use .send_keys() you might hit one more issue if it is failing to find elements, for solving this you will have to find the elements
elements = driver.find_element_by_tag_name("html")
elements.send_keys(Keys.SPACE)
Hope this helps you.
I have images titled like so in my app:
image~iPhone.png
image#2x~iPhone.png
In interface builder I am loading image.png into my UIImageView. I also programatically load some images into a different view using imageWithContentsOfFile. The images all load fine when I run in the simulator but I get no images when I run on the device. If I use the full name of the image in interface builder it works but I want iOS to distinguish between high res and lower res. I have tried a lot of different things but can't figure this out. I see this error in the debugger as well:
Could not load the "image.png" image referenced from a nib in the bundle with identifier "com.mycompany.myproject"
Xcode 4
Deployment Target 4.1
Base SDK 4.3
Thanks for any help.
Ok...so after much experimenting I got it working.
I had two images named:
image#2x~iPhone.png
image~iPhone.png
and I was trying to load them using IB or imageWithContentsOfFile using
image.png
This worked fine in the simulator but not on my device. I just got a blank white screen where the image should be.
I finally renamed the high resolution image to:
image~iPhone#2x.png
Moving the '#2x' modifier after the device modifier(~iPhone) when referencing my images allowed it to work the way I understood that it should from reading Apple's docs. I was under the impression that you didn't need to include the device modifier when referencing images but I had to.
To sum up, I am now using
- image~iPhone.png
to reference my images in IB and programatically for some images. I now get iOS recognizing that I am on a retina screen and loading the #2x images accordingly. So the #2x modifier had to go at the end and the ~iPhone modifier had to be included in the name of the '.png'.
That is what worked for me. Hope it helps someone else. Note that I am only building my app for iOS4.1 and above so there might be some issues with this if you are supporting previous version.
iOS does not automatically pick the right image for the device like that. You are going to have to write code to check which device it is, and set the image by full name.
e.g. if ([[UIScreen mainScreen] scale] == 2) // set hi res image
Or, you can just use the same image in both, and set the content mode to scale to fill. It will look the same.
EDIT: Try writing either ~iphone (lowercase), or just don't write ~iPhone at all on the file name. If your app is not universal, then writing the ~iphone suffix is completely pointless.
iOS file system is case sensitive and device modifiers should be lowercase, it should be
image~iphone.png
image#2x~iphone.png
The #2x comes before the device modifier.
See the resource programming guide
Can anyone think of a way I can discover a users pixels per inch? I want to ensure that a image displays in a web browser exactly the size I need it to, so using a combination of resolution (which I can get from the user agent) and pixels per inch I could do this.
However, I'm not sure if there is any way to discover a users pixels per inch, ideally using JavaScript or some other non-invasive method.
Any suggestions?
Thanks,
CJ
You could use the following javascript function to get the DPI.
<script type="text/javascript">
var dpi = {
v: 0,
get: function (noCache) {
if (noCache || dpi.v == 0) {
e = document.body.appendChild(document.createElement('DIV'));
e.style.width = '1in';
e.style.padding = '0';
dpi.v = e.offsetWidth;
e.parentNode.removeChild(e);
}
return dpi.v;
}
}
alert(dpi.get(true)); // recalculate
alert(dpi.get(false)); // use cached value
</script>
However, I think it will always return 96 on windows machines.
As far as I know, there is no way for the operating system to determine the actual physical dimensions of the viewport. So, it might very well be that it is actually impossible for software to know the real-life DPI.
However, professionals is certain branches make sure that the on screen DPI matches the real-life DPI. In those case the above javascript would probably be sufficient.
Note:
Tested the above code in Opera 9, IE6 & 7 and Firefox 3.6 on WinXP and Win2k.
Update:
Added the noCache param. But I doubt it will have any effect. I tested it with zoom in FireFox and Opera on the above mentioned windows versions and they keep quoting the DPI as '96', regardless of the amount of zoom. Would be interesting to see what mobile devices make of this.
You could do as the drawing packages of old did, and display a stretchable ruler. Have your users drag the virtual ruler until it matches a physical ruler they've put against the screen.
Not a serious suggestion for production use, but probably the only way to actually get the right answer :(.
The safest and easiest would be to tell the browser what size you want the image. CSS supports inch and metrics, so you could specify the image like any of these examples:
<img src="image.png" style="width:15cm;height:10cm;" alt="Centimeters" />
<img src="image.png" style="width:5.9in;height:3.9in;" alt="Inches" />
<img src="image.png" style="width:150mm;height:100mm;" alt="Millimeters" />
Displays today support 96px/inch or 72pixels/inch .
You can get the HTTP request User-Agent header
User-Agent: Mozilla/5.0 (Linux; X11)
this one will tell you the operating system and from here you can make a decision.
This may be very tough - even if you somehow manage to scale the rendered image based on dpi, how do you prevent the user from scaling the image in his browser directly?
Have you considered some rich interface technologies like flash or Silverlight? They may give you additional options.
is there a way how to get images from flickr api with custom width/height? I found only standard function flickr.photos.getSizes, but this functions returns only predefined sizes. Thank's
As far as I know it's not possible to have flickr resize the photos for you (except for the default options) Depending on the system you are building there are a couple of options:
use one of the flickr provided sizes ... ;-)
If you are using HTML: resize the image in the browser by setting the width and the height of the image (make sure you enable the right settings in IE for maximum viewing pleasure: http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/)
If you are using flash resizing the image should not be a big issue
If you have a php or java (or any other language really) backend you can use that to scale the image.
Also: check http://www.flickr.com/groups/api and http://tech.groups.yahoo.com/group/yws-flickr/