Is there a way to test a website on a Windows as if I were using MacOS - cross-browser

As I have recently found out a web page can appear differently in Windows and in MacOS even if one uses the same browser on both OS. Is there a plugin or an application that can imitate MacOS on the PC?

You may use an online tool for cross browser testing.
They're numerous.
For example :
http://crossbrowsertesting.com/ (you have to pay)
http://spoon.net/browsers/ (not working now for Safari)
https://browserlab.adobe.com/ (registration required)
disclaimer : I don't use those sites any more, I'm not sure they're good enough

I use Adobe Browserlab and BrowserShots. Both of these services will take screenshots of any public facing URL that you enter.

Try https://browserlab.adobe.com/en-us/index.html#
A free cross-browser testing tool
If that isn't what you need, you can try some of the paid services
http://www.smashingmagazine.com/2011/08/07/a-dozen-cross-browser-testing-tools/

Related

How to open iOS share menu via HTML

I'm currently working on a webpage and I'd like to implement a function to share this website to friends of the website-visitor.
Therefore I've integrated the Whatsapp-sharing URL Scheme.
<a href="whatsapp://send?text=text-to-share" data-action="share/whatsapp/share">
share-button
</a>
But there is a better way in iOS - I'd like to open the iOS-share-menue:
iOS sharing-interface
Do you know, if there is any possibility to open this?
The iOS-Amazon-App does this within the product-pages.
I'm looking forward to your answers.
best regards,
Christoph
Google has introduced the Web Share API for Web applications in Chrome. I think your problem is similar to this question. https://stackoverflow.com/a/42081215/4711785
Here is a link to a page which provides information on how this can be done and also a link to an example of this working...
(I have not copied the code from the article or the W3C source into my answer in case this is some sort of copyright violation)
https://w3c.github.io/web-share/
I have tested this on safari, chrome, and edge on IOS and macOS as of Oct 2022 and it worked perfectly...
I also tested it on the Opera browser running on a Huawei phone running their OS (not android) and again it invoked the OS'es share menu...
I fully expect this to work just as well on Windows and Android devices but I don't have any to test with...
Info and code to make it work: Web.dev article
and,
An example page you can use to test your device/browser...
open device share menu using web page button demo

How does the Brave browser have Chrome's dev-tools?

Really Quick question:
Why does the Brave browser have Chrome's dev-tools?
Does this also mean that I don't need to test my website in Brave if it works in Chrome?
Thanks :)
Take a look at their github page. Especially the tags they added:
Notice the word "Electron", now I could explain to you what Electron is but they have an excellent explanation on their Electron Home page:
Electron is an open source library developed by GitHub for building
cross-platform desktop applications with HTML, CSS, and JavaScript.
Electron accomplishes this by combining Chromium and Node.js into a
single runtime and apps can be packaged for Mac, Windows, and Linux.
As you can see, Electron uses "Chromium". I could explain but.... you've guessed it they offer a great explanation themselves:
The Chromium projects include Chromium and Chromium OS, the
open-source projects behind the Google Chrome browser and Google
Chrome OS, respectively. This site houses the documentation and code
related to the Chromium projects and is intended for developers
interested in learning about and contributing to the open-source
projects.
So thats why you can access the chrome dev tools inside Brave.
On to your other question:
I don't need to test in Brave if my website works in Chrome?
Yes and no, you can be fairly certain that Brave will do everything Chromium does. But in the end we can't be certain what Brave does to the pages loaded through it. Having said that I won't be giving you a firm answer on this :)
(PS: if you set up automatic testing it doesn't really matter if you have to test another browser)

How to test a site for mobile friendliness?

I am working on writing my first serious website as a personal project and would like to test it for mobile friendliness and compatibility before I go through the process of actually configuring the FTP, etc. Is there a way to do this using just the files locally on my computer? I've tried to research a way to just upload all the site files and view how everything would look on a mobile browser, but I have not been able to find anything. Or, is there a way to open the HTML files on my phone in a browser, i.e. Chrome?
the best way -> https://www.google.com/webmasters/tools/mobile-friendly/
Google Offers Tips to optimize your site template and a higher quality of mind
You can test your website using google webmaster tool here.
If you wanted to test it locally then you can try different extension for different browsers.
for chrome check this extension it will help you a lot.
In addition to others - http://www.mobilephoneemulator.com/.
And of course, you can test your website with your smartphone.

Firefox OS 'HELLO WORLD' development

i want to develop apps for Firefox-OS but i simply cant understand where to start from. Okay i have firefox Os simulator installed, i got my notepad open, I know html 5, css3, JS, jQuery bla bla bla...I googled but simply couldnt find the tutorial for HELLO WORLD FIREFOX OS app. any help guys. thanks
As far as "Hello World!"-type of beginner-applications concerned, I think fxosstub is as close as it gets. Also as you will most definitely want to work with some of the Open Web API-s, so I'd recommend studying Robert Nyman's Firefox OS Boilerplate App, which itself, is based on the above mentioned fxosstub application, and is a great way to learn a thing or two about the Open Web API-s and about accessing the mobile device hardware through JavaScript API calls in Firefox OS.
Those two articles mentioned both appeared on Mozilla Hacks, mozilla's developer blog, which is treasure trove of - among other things - Firefox OS related articles and resources. Another great place to start would be the Quick start guide in the Developer section of the Firefox Marketplace.
For technical reference you should check out the Mozilla Developer Network - it contains a host of very useful information about Web Applications, Web API-s and general web development, too.
For Firefox OS UI-design samples, resources & best practices you might want to check out the Mozilla Brick Library (a successor to the former Building Firefox OS website) if you want your app to blend in visually with the core applications in Firefox OS.
Also there is a pretty active community at the Mozilla webapps mailing list where you might find lots of helpful chaps, well-versed in the intricacies of Firefox OS, and would gladly help you out whenever you might find yourself stuck during development.
This took me about a minute to find. A step by step guide. More info related to app development for FF OS can be found at their official page
Edit: A video tutorial with the use of the jQuery library.
Here is a BMI calculator webapp that follow Firefox OS build-in apps (Gaia) structure and use Firefox OS build-in styles. Check the demo to see how real hosted webapp looks like on any device.
(For a web platform, you can use whatever you are familiar with, but BMI calculator is a kind of hello world type app though...)
Or here is the webapplate project, which has preconfigured webapp template for hosted or package
reuse. BMI calculator webapp is modified from that.
(Note Firefox OS build-in styles are not cross-browser friendly yet. )
I think the above answers are a bit out of date. I think the fastest/easiest way to start development is to
1) Download Firefox Developer Edition and start it up
2) From Firefox developer edition, launch the WebIDE (click on the little spanner, and choose WebIDE). From there you can create a hello world application.
For more information see the WebIDE documentation

Tool/framework for automated web app testing in Google Chrome browser?

Is an opensource/commercial tool/framework, available for automated web app testing in Google Chrome browser on Windows XP / Vista? ( An alpha/beta Tool is also OK)
Thanks
Selenium supports Chrome pretty much out of the box because it works by injecting javascript in the web page. http://selenium-rc.openqa.org/
Webdriver has an early version of Chrome driver. http://code.google.com/p/webdriver/
Both are open source and works on Windows.
I found a tool called QA Agent (http://qaagent.com). This is a web based IDE where you can develop your tests using jQuery and javascript. Currently it supports only Chrome so may be it will be a good choice for you. And of course it is free.
For those who are not developers you could try FRET for automated web testing with Chrome. It's still in beta and even though it states that no programming is needed a basic understanding of HTML / CSS etc. is recommended.