I'm trying to change the window size using chrome option while using device emulation but it has no impact on width but works for height.
chrome_options.add_argument("--window-size=400,600")
chrome_options.add_argument('--log-level=3')
chrome_options.add_experimental_option('excludeSwitches', ['enable-logging'])
mobile_emulation = { "deviceName": "iPhone 6/7/8 Plus" }
chrome_options.add_experimental_option("mobileEmulation", mobile_emulation)
also tried
browser.set_window_size(400, 600)
is there something missing? or am I doing it wrong?
You can not set a selenium driver window width to 400.
AFAIK minimal computer screen width is 512.
To use smaller window width you can simulate mobile device screen sizes.
There are several discussions about this issue, for example here
Related
I've the following constraints which are working perfectly fine over Chrome in Desktop (simulating mobile resolution)
const constraints = {
audio: false,
video: {
width: screen.width,
height: screen.height
}
};
navigator.mediaDevices.getUserMedia(constraints).then(stream => {})
However when actually trying this on iPhone / Safari the camera doesn't respects this at all and gets super small or distorted - removing the width / height from the constraints makes it better ratio but not full screen at all, just centralized.
I've also tried with min / max constraints without lucky.
Is there any way to get this working on iPhones?
I have built a few AR Websites which are mobile first. When you request a resolution the web browser sees if the resolution exists, and if it doesn't it then decides if it should emulate the feed for you. Not all browsers do emulation (even though it is part of the spec). This is why it may work in some browsers and not others. Safari won't emulate the resolution you are asking for with the camera you have picked (I presume the front).
You can read more about this here (different problem, but provides a deeper explaination): Why the difference in native camera resolution -vs- getUserMedia on iPad / iOS?
Solution
The way I tackled this is:
Without canvas
Ask for a 720p feed, fallback to 480p feed if 720 gives an over-constrained error. This will work cross-browser.
Have a div element which is 100% width and height, fills the screen, and sets overlay to hidden.
Place the video element connected to the MediaStream inside, make it 100% height of the container. The parent div overlay hidden will in effect crop the sides. There will be no feed distortion.
With canvas
Do not show the video element, use a canvas as the video view. Make the canvas the same size as your screen or the same aspect ratio and use CSS to make it fill the screen (latter is more performant).
Calculate the top, left, width and height variables to draw the video in the canvas (make sure your calculation centers the video). Make sure you do a cover calculation vs fill. The aim is to crop the parts of the video which do not need to be shown (I.e. like the descriptions of various methods in https://css-tricks.com/almanac/properties/o/object-fit) . Example on how to draw video into a canvas here: http://html5doctor.com/video-canvas-magic/
This will give you the same effect of what you are looking for. Production examples of something similar.
https://www.maxfactor.com/vmua/
https://demo.holitionbeauty.com/
P.s. when I get time I can code an example, short on hours this week.
There are a couple of quirks on mobile gUM() you need to know about.
First, if the device is in portrait orientation things work weirdly. You need to swap the width and height. So, let's say you're on a 480x640 device (do those even exist? who cares? it's an example). To get the appropriate size video you need
const constraints = {
audio: false,
video: {
width: screen.height,
height: screen.width
}
};
I can't figure out exactly why it's like this. But it is. On iOS and Android devices.
Second, it's hard to get the cameras to deliver exactly the same resolution as the device screen size. I tweak the width and height to make them divisible by eight and I get a decent result.
Third, I figure the sizes I need by putting a <video ...> tag in my little web app with CSS that makes it fill the browser screen, then querying its size with
const rect = videoElement.getBoundingClientRect()
const width = rect.width > rect.height ? rect.width : rect.height
const height = rect.width > rect.height ? rect.height : rect.width
This makes the mobile browser do the work of figuring out what size you actually need, and adapts nicely to the browser's various toolbars.
In Edge, on a Surface Pro 2 in tablet mode, the max-width always seems to be the "natural landscape" width. So when viewing pages in portrait, the media queries for the larger width are active. Is this a bug or a feature, and if feature is there something I can do to code around it?
When in desktop mode it works properly.
Using SDK 3.5.1 currently
I have some remotely hosted images that I am loading into my ImageViews. I have hires:true already set.
Here is the code I'm using:
var hasattachesThumbIcon = Ti.UI.createImageView({
width:96,
height:'auto',
top:6,
bottom:6,
right:10,
image:hasattachesThumb,
defaultImage:'/icons/placeholder_big.png',
hires:true,
});
I think the issue is that I'm not explicitly setting the height of the image. The reason is that the images are of all different sizes and aspect ratios, my only requirement is that they should fit into a block measuring 96 pixels, so i've set it as such.
Any ideas?
Thanks!
Are you trying to test 2X or 3X images? If you are trying 3X images then hiRes will not work as the support is still not present. Also as suggested by Mark, change from auto to Titanium.UI.SIZE, as auto has been deprecated. Also can you confirm whether the default image is getting displayed till the remote image is being downloaded?
macos 10.7.5
chrome Version 32.0.1700.107
Version 32.0.1700.107
and the simple "single.html" helpfully provided by gcpdev:
live code examples: cytoscape.js initialization -- incomplete?
Any movement by the mouse in the canvas makes the nodes disappear. zooming and and out (with middle mouse roller button, for instance) makes them visible.
This problem is only on Chrome. Firefox and Safari work fine.
Any suggestions?
Thanks!
Paul Shannon
I can't reproduce this on Mac OS 10.9 with Chrome 32, which probably indicates this is a problem with Chrome rendering canvas on that version of Mac OS.
I notice that the linked demo is using v2.0.2. Have you tried an updated v2.0.x release or v2.1.0?
Try using pinch-zoom to set the zoom level for the webpage (not for the Cytoscape canvas element, which has its own separate zooming operated by scrolling with two fingers on the trackpad) to 100%. This fixed it for me, based on this question and this github issue, both about an almost identical issue in Firefox.
I do I reduce the size of the selenium frame, in order to increase the frame of the website I am testing?
You can start the Selenium server in a multiwindow mode:
-multiWindow: puts you into a mode where the test web site executes in a
separate window, and selenium
supports frames
http://seleniumhq.org/docs/05_selenium_rc.html#server-options
If you want to resize the window once you've done multiWindow mode, you can also do getEval("window.resizeTo(X, Y); window.moveTo(0,0);") where X and Y are the width and height of the window you want.