5 ms·

The virtual device farm for rendering websites on multiple devices

104 points by seleniumbase 6y ago

camillomiller 6y ago
Nice. But there will always be that client browsing on a corporate install of Internet Explorer that will complain about an obscure bug. In that case, avoid any bickering and counterstrike surgically with a well written and sourced explanation on why their browser is a safety risk for the entire company and that the problem should be escalated quickly to IT because that’s much more worrying than a simple website bug most people’s browsers won’t display. Attach a couple of links to layman-friendly articles about Explorer not being considered a browser anymore even by Microsoft (it’s officially a “legacy solution”) and send. I did it a few times and each and every time I had follow ups thanking me, telling me how much they hated Explorer but they were forced to use it, and that they didn’t know about the risks of using it.
- 6510 6y ago
  If the bug they suffer is bad enough I just make a page describing the issue and redirect all user agents of the type.
  - camillomiller 6y ago
    I like the passive-aggressive flair of this one.
Santosh83 6y ago
I tried opening my test site and it was displayed without CSS styles or images. Could this be because I have a restrictive content security policy set?
- Gys 6y ago
  I had the same problem. My website has no https. How about yours?
  - Santosh83 6y ago
    It does via Cloudflare. But another site with https seems to load okay. I'm at work now but will test later with the CSP header disabled.
- spzb 6y ago
  Doesn't work for me either.
LoSboccacc 6y ago
> you no longer need random time.sleep() you never needed that, selenium always had multiple method available to wait for page loads or to wait for specific div to become available in the dom or visible in the viewport. anyway, I don't understand the usefulness of a mobile web render into a browser: a tall, narrow frame is no substitute of a mobile device. for one the rendering engine is not the same, secondly you don't get touch events generated for it, thirdly hover and pixel density media queries straight up won't work
- onion2k 6y ago
  Selenium can use Chromedriver's device emulation mode (eg "add_experimental_option("mobileEmulation", {"deviceName": "iPhone X"})") to enable touch events, pixel density, etc. It's not the same as testing on a real device but it's still useful to have as part of a test pipeline if you don't have the budget for every device you need to test on. https://chromedriver.chromium.org/mobile-emulation https://chromedriver.chromium.org/mobile-emulation
anshukg 6y ago
It supports only 3 levels of inception, virtual inside virtual inside virtual .
FerretFred 6y ago
This is really good! Just tried my sites out on it and pleased to say they look consistent.
exyi 6y ago
It just seems to be a bunch of iframes and it renders the website in your browser. HTML is just downloaded through CORS proxy...
- mintzworld 6y ago
  Some websites have a Same-Origin policy that won't allow rendering in an iframe. The CORS proxy lets you bypass the restriction.
  - capableweb 6y ago
    But this is a tool for development. So if you're loading up a site for development, don't you work on that site and can control the Same-Origin policy?
    - mintzworld 6y ago
      It's possible to be testing a live version of your own site when you can't easily change the Same-Origin policy for just yourself.
      - capableweb 6y ago
        Not sure if people still do the "upload PHP file automatically to production server via FTP on save" way of development. Most web developers I know run servers locally for development, where you can easily set your own headers and/or meta tags.
eithed 6y ago
How is it different from running Selenium yourself?
- ape4 6y ago
  There are many things on the internet you can run yourself - eg calculators.
rhplus 6y ago
Tried some sites like https://www.whatismybrowser.com/detect/what-http-headers-is-my-browser-sending https://www.whatismybrowser.com/detect/what-http-headers-is-... and User-Agent is “axios/0.19.2”.
Eduard 6y ago
The tablet and smartphone incorrectly have hover functionality.
secondcoming 6y ago
twitter.com doesn't support that browser any longer!
- mintzworld 6y ago
  There are a few websites that will detect unusual behavior from browsers living inside of browsers. Although it does seem to work for most websites.
cedricd 6y ago
Interesting. It breaks on my site. https://seleniumbase.io/devices/?url=www.narrator.ai https://seleniumbase.io/devices/?url=www.narrator.ai Tried again and now it doesn't load. Maybe I'll try later. Looks cool though
- lpellis 6y ago
  It looks like it is just loading the pages in an iframe (through a proxy). It would be more useful if it at least set the user agent, should be easy enough to add. I built a tool that does something similar, here is your site: https://app.pagewatch.dev/62189ac2393594d963561b5426c1215055cc5e8c/explore/pages/details?url= https://app.pagewatch.dev/62189ac2393594d963561b5426c1215055...
yboris 6y ago
My favorite tool: http://ami.responsivedesign.is/ http://ami.responsivedesign.is/
yboris 6y ago
Can't seem to render 2 out of 4 of my Gatsby websties: Failing: https://seleniumbase.io/devices/?url=videohubapp.com https://seleniumbase.io/devices/?url=videohubapp.com https://seleniumbase.io/devices/?url=healthimpactfund.org https://seleniumbase.io/devices/?url=healthimpactfund.org Passing: https://seleniumbase.io/devices/?url=yboris.dev https://seleniumbase.io/devices/?url=yboris.dev https://seleniumbase.io/devices/?url=yboris.com https://seleniumbase.io/devices/?url=yboris.com
- mintzworld 6y ago
  "Service workers can only be used over HTTPS, or on localhost for development" - That's a known Gatsby issue: https://github.com/gatsbyjs/gatsby/issues/10369 https://github.com/gatsbyjs/gatsby/issues/10369

104 points by seleniumbase 6y ago

Nice. But there will always be that client browsing on a corporate install of Internet Explorer that will complain about an obscure bug. In that case, avoid any bickering and counterstrike surgically with a well written and sourced explanation on why their browser is a safety risk for the entire company and that the problem should be escalated quickly to IT because that’s much more worrying than a simple website bug most people’s browsers won’t display. Attach a couple of links to layman-friendly articles about Explorer not being considered a browser anymore even by Microsoft (it’s officially a “legacy solution”) and send. I did it a few times and each and every time I had follow ups thanking me, telling me how much they hated Explorer but they were forced to use it, and that they didn’t know about the risks of using it.

6510 6y ago
If the bug they suffer is bad enough I just make a page describing the issue and redirect all user agents of the type.
- camillomiller 6y ago
  I like the passive-aggressive flair of this one.

Santosh83 6y ago

I tried opening my test site and it was displayed without CSS styles or images. Could this be because I have a restrictive content security policy set?

Gys 6y ago
I had the same problem. My website has no https. How about yours?
- Santosh83 6y ago
  It does via Cloudflare. But another site with https seems to load okay. I'm at work now but will test later with the CSP header disabled.
spzb 6y ago
Doesn't work for me either.

LoSboccacc 6y ago

> you no longer need random time.sleep() you never needed that, selenium always had multiple method available to wait for page loads or to wait for specific div to become available in the dom or visible in the viewport. anyway, I don't understand the usefulness of a mobile web render into a browser: a tall, narrow frame is no substitute of a mobile device. for one the rendering engine is not the same, secondly you don't get touch events generated for it, thirdly hover and pixel density media queries straight up won't work

onion2k 6y ago
Selenium can use Chromedriver's device emulation mode (eg "add_experimental_option("mobileEmulation", {"deviceName": "iPhone X"})") to enable touch events, pixel density, etc. It's not the same as testing on a real device but it's still useful to have as part of a test pipeline if you don't have the budget for every device you need to test on. https://chromedriver.chromium.org/mobile-emulation https://chromedriver.chromium.org/mobile-emulation

anshukg 6y ago

It supports only 3 levels of inception, virtual inside virtual inside virtual .

FerretFred 6y ago

This is really good! Just tried my sites out on it and pleased to say they look consistent.

exyi 6y ago

It just seems to be a bunch of iframes and it renders the website in your browser. HTML is just downloaded through CORS proxy...

mintzworld 6y ago
Some websites have a Same-Origin policy that won't allow rendering in an iframe. The CORS proxy lets you bypass the restriction.
- capableweb 6y ago
  But this is a tool for development. So if you're loading up a site for development, don't you work on that site and can control the Same-Origin policy?
  - mintzworld 6y ago
    It's possible to be testing a live version of your own site when you can't easily change the Same-Origin policy for just yourself.
    - capableweb 6y ago
      Not sure if people still do the "upload PHP file automatically to production server via FTP on save" way of development. Most web developers I know run servers locally for development, where you can easily set your own headers and/or meta tags.

eithed 6y ago

How is it different from running Selenium yourself?

ape4 6y ago
There are many things on the internet you can run yourself - eg calculators.

rhplus 6y ago

Tried some sites like https://www.whatismybrowser.com/detect/what-http-headers-is-my-browser-sending https://www.whatismybrowser.com/detect/what-http-headers-is-... and User-Agent is “axios/0.19.2”.

Eduard 6y ago

The tablet and smartphone incorrectly have hover functionality.

secondcoming 6y ago

twitter.com doesn't support that browser any longer!

mintzworld 6y ago
There are a few websites that will detect unusual behavior from browsers living inside of browsers. Although it does seem to work for most websites.

cedricd 6y ago

Interesting. It breaks on my site. https://seleniumbase.io/devices/?url=www.narrator.ai https://seleniumbase.io/devices/?url=www.narrator.ai Tried again and now it doesn't load. Maybe I'll try later. Looks cool though

lpellis 6y ago
It looks like it is just loading the pages in an iframe (through a proxy). It would be more useful if it at least set the user agent, should be easy enough to add. I built a tool that does something similar, here is your site: https://app.pagewatch.dev/62189ac2393594d963561b5426c1215055cc5e8c/explore/pages/details?url= https://app.pagewatch.dev/62189ac2393594d963561b5426c1215055...

yboris 6y ago

My favorite tool: http://ami.responsivedesign.is/ http://ami.responsivedesign.is/

yboris 6y ago

Can't seem to render 2 out of 4 of my Gatsby websties: Failing: https://seleniumbase.io/devices/?url=videohubapp.com https://seleniumbase.io/devices/?url=videohubapp.com https://seleniumbase.io/devices/?url=healthimpactfund.org https://seleniumbase.io/devices/?url=healthimpactfund.org Passing: https://seleniumbase.io/devices/?url=yboris.dev https://seleniumbase.io/devices/?url=yboris.dev https://seleniumbase.io/devices/?url=yboris.com https://seleniumbase.io/devices/?url=yboris.com

mintzworld 6y ago
"Service workers can only be used over HTTPS, or on localhost for development" - That's a known Gatsby issue: https://github.com/gatsbyjs/gatsby/issues/10369 https://github.com/gatsbyjs/gatsby/issues/10369