Change browser window size programmatically - browser

I am developing a responsive website. For each and every change I made in javascript, css & html file, I need to test it in all possible screen size in portrait and landscape mode. Normally we used to test it in 3 to 5 different browser window size, and in portrait & landscape. I felt changing screensize and orientation again and again is a tedious job. So planned to write a tool, which will open multiple browser windows in a different screen size with the given url loaded in it. Any idea, or advice how to start this?
PS. If you are voting for deleting this question, please consider commenting with some suggestion how I can start, or is there any free tool available for this.
Thanks in advance.

There are number of great tools and services for helping test a website in just about every possible OS/browser/size these days.
BrowserStack.com allows you to pull up your website on nearly every combination of OS/browser/size and use the site to see how elements and features perform. There are other many other services that do this.
Another option would be a browser extension/plugin like Chrome's Window Resizer. It allows you to quickly toggle between common (and custom) window sizes. This is the most manual of the three options here, and the only free option.
One final option is Adobe's Edge Inspect. This app allows you to connect several devices to your computer and simultaneously browse a site across each of the devices. It also allows you to remote inspection on each of the connected devices.

Tools like Selenium can drive browsers and resize them as needed. Depending on the language of your choice, google for something like: selenium resize browser (language of your choice)

Related

Simulate typing into chromium omnibox in desktop for Perf testing

I am trying to see if there is anyway I can programmatically typing into chromium's omnibox via script/automation/etc for Perf testing.
I want to test the following:
1. Client side: for each keystroke in Omnibox, I want to measure the rendering speed of the Omnibox when there are suggestions coming from server side. This is logged in the histogram right now.
2. Server side: for each keystroke in Omnibox, I want to measure the response time. This is also logged in histogram right now.
And we want to run across many keystrokes, with different queries to cover above 2 areas automatically.
I know chromium's test framework Catapult has benchmarks measure the Perf/system health, however the current tests are only for Chrome Android mobile apps. Not for chromium desktop app.
And I don't see any existing tests in Catapult that can control the chromium desktop app's omnibox and simulating typing into the omnibox.
Is there any way I can do this, it does not need to be Catapult framework.
If you find an issue in "rendering" (Which you have not defined as common or technical), who do you expect to report this to for a defect report and a fix on your timeline?

multi monitor public information display (4 monitor / each with one chrome/firefox window)

I've 4 monitors connected to a pc running CentOS 7. Each physical monitor/display should show a website in full screen and auto refresh it every x seconds.
I've tried:
opening from bash and moving with xdotool -> how can I distinguish between the 4 chrome or firefox windows? If I don't do it and apply to the last active this might become unreliable with other programs open.
researched devilspie, seems it has the same problem (can't distinguish between multiple chrome/firefox windows)
using DISPLAY variable -> does only find one display 0.0
https://addons.mozilla.org/de/firefox/addon/monitor-master/ -> does not work with extended workspace, contacted developer
I've only a xrandr bash script to rearrange the displays when they become connected (three of four may be switched off to save power).
I would use a firefox/chrome add on for the auto refresh functionality.
Maybe someone can give me a hint how to reliably do this?
In addition to the "easy auto refresh" chrome plugin. I have another idea for you, why not use a chrome extension for handling the positioning.
It is of course, only for chrome(maybe thats fine for you).
Background: We had related difficulties. Internal webapp that opens multiple documents in windows, and need to be placed in other monitors.
The javascript does not support this, for security reasons and only a native extension can properly work with the tabs/windows objects.
Therefore, we have created an open source chrome extension for doing exactly that: flexible windows position across multi-monitor setups.
In your case you can define for each monitor a website-rule that the window would appear there.
The chrome extension is called "MultiWindow Positioner" and its complete free. You can get it at the chrome store here
The actual source code you find in github in the project chrome-multiwindow-positioner
Disclaimer: I am the maintainer of the open source (MIT) github project. If there any interesting idea, or comments feel free to share them here.

How is the panel displayed when launching Chrome Hangout extension made to be always on top and pinned?

When launching the Chrome Extension Google-Hangouts, a panel initially appears that lists members and a link/button to create a new Hangout.
This panel is initially pinned to the bottom right of the browser window. When pinned like this, it remains always on top as a browser navigation session continues: users can go to different URLs, change tabs, etc. and that panel stays at the bottom right and stays on top of all other windows (or at least on top of the main browser window).
Once it's unpinned, you can drag it around the window, but it no longer stays always on top.
My question is, how was that achieved - what code, or what functions, do i need to call to create that window/panel so that it stays initially pinned and always on top? Is there some binding to some native code that's involved? Some other approach?
If anyone know and can show or explain, i would be hugely grateful as this feature is key to an extension i'm trying to build.
Thanks a lot!
This may not be an answer but to get a clue of what is happening I extracted the crx file to view its content there are a few OS specific files : ace.dll , libace.so and ace. After researching a bit i found this. This is a plugin. Hangouts extension is using ace plugin which is actually running on your desktop(i'm not sure about this). You can check this article
I found this related post: How to build an chrome extension like Google Hangouts
ACE is actually not what makes the window, Chrome has that capability built in, apparently. Even if you don't enable panels, extensions from Google can still make them, provided your OS is capable.

WP7 Emulator Browser not displaying anything

I use the webbrowser control to display a webpage from an application, but it just displayed a white screen. I tried Internet Explorer and it did not display anything either.
Any ideas how to fix this problem.
Thanks a lot in advance.
Windows Phone Emulator requires a DirectX 10 or above capable graphics card with a WDDM 1.1 driver. I assume that you got an error message on first start of the emulator that your graphic adapter isn't capable for all functions the emulator is using and that this may impact XNA games and sometimes silverlight like this one:
If your graphic adapter does not fully support DirectX 10 or doesn't has a WDDM 1.1 driver you will only see a white screen instead of the rendered webpage. This also affects all controls using MultiScaleImage, including the webbrowser control. As far as I know there is no solution for this at the moment.
To check if the emulator is running the required GPU emulation take a look at the arrow to open the application list and if it points to the right or left. If it points to the left, NO GPU is available - if it points to the right (as on the hardware phone itself) the GPU is available and rendering should work as expected.
See also this page in the msdn.
You haven't said if you're testing a local/private page or one on the web.
Also test other pages on the web. Can you view anything or just your own page.
If you can't see pages on the public web then you have a networking issue
If you can see public pages but not locally hosted ones then you probably have a different networking issue. If you're on an actual device or the emulator will likely greatly affect this.
The other things it may are:
you're trying to view a page that is to compilcated to be displayed (if there is such a thing - test with a very simple static page first)
the page uses useragent detecction and doesn't recognise the user agent and so is serving nothing
the page has complex javascript which runs before the page is rendered and the javascript is failing and so the page is never displayed.

Can I embed a browser inside a screensaver? On both Windows and Macs?

Here's the deal. I've animated + coded a variety of 'screensavers' in Actionscript3/Flash. They make extensive use of the timeline, AS3 code, the TweenLite library, and embedded fonts. That's the limit of my programming knowledge. I've tried, to no avail, to convert my .SWFs into screensaver files using a variety of software, such as InstantStorm. Somehow it never works, the code never executes properly, it's a disaster.
So, I'm wondering if it's possible to make a screensaver that simply contains an embedded browser, and have it point to my .SWF file, hosted on my web-server. Basically, imagine a full-screen website acting as a screensaver.
If this is possible, what is the EASIEST and FASTEST way for me to whip up a solution for both PCs and Macs? Language, etc. I'm hoping something that has a library I can simply draw from to embed the browser view :)
My startup is developing a product to do exactly this, it's called Screensaver Ninja and you can find it at https://Screensaver.Ninja.
You can set many different web pages with different timers. The configuration tool allows you log in and navigate to the page you want to display:
It uses WebKit, on Mac OS X it uses Safari's and on Windows it uses Chrome's and in both cases it has a separate session from any other browser installed on the computer.
Here's a small Windows-only solution:
https://github.com/cwc/web-page-screensaver/releases
You could modify this open-source one for the Mac so that it's hard-coded to your URL:
http://www.liquidx.net/blog/2010/11/13/webviewscreensaver-for-mac/
Modify hasConfigureSheet() to return NO and change the URL in kScreenSaverDefaultURL. And change the name!

Resources