Categories
Tools

BrowserStack (#4)

BrowserStack is the herculean all-platform solution for cross-browser testing. You can see and test your browser, quite literally, in every web browser.

Cross-browser testing is super complex, and thankfully the advancements in HTML and browser implementation have made cross-browser implementation take less time than it used to.

Nonetheless, only a fool wouldn’t test their website in a cross-section of the browsers they know are visiting their website. How do you know who’s visiting your website? An upcoming post on Google Analytics will show you how to see your traffic in a pie chart by web browser. I recommend you test any browser that shows 5% of more of your traffic, as a good starting benchmark. [Sign up for the email list now to keep up-to-date.]

When you sign up for BrowserStack’s free trial, it asks you to set a preference if you are testing first for web or mobile (a trick question, so click “Skip”)

Now you come to the main screen. Here you will see the Platforms on the left: Android, iOS, Windows, Windows Phone, and Mac OS/macOS:

You’ll want to start by selecting the platform you want to test on the left.

Next on the right, you’ll see a bunch of devices if you are selecting a mobile platform.

Desktop Browser Testing

When you choose Windows or Mac (which are desktop platforms, not mobile ones), you’ll also need to select which version of the operating system.

Finally, choose the browser to test against. Here, let’s select Firefox version 78

Next, BrowserStack will actually startup a real (virtual) instance of macOS Catalina for you! Then it will launch Firefox browser where you can test your staging (or development) site.

Mobile Browser Testing

On mobile, the most important thing to note is that there are two kinds of testing: (1) Simulated, and (2) on-device. Simulated means a computer in the sky runs a virtual session of your mobile operating system. On-device means that a real device is actually being remotely controlled (they are controlled via connections to computers) available to you as you test. It is really the real thing— sitting in a giant data cluster somewhere— and when you load web pages on it you get the true results. Simulated results aren’t quite as good, so it’s often best to use real devices.

You can see the real devices because they have a tiny little blue “device” icon next to them:

To see the similuated environments, you click here:

see simulated environments

Local Testing, Screen Recording, and More

As a developer, you can use BrowserStack to connect to your local machine running at 127.0.0.1:3000. It’s quite easy actually, it’s called “Interactive Testing” and it works great. From any environment, you’ll have a small control panel that will let you control BrowserStack. Look for the “Local testing” option

Local Testing

You will then need to download and install some software on your machine.

Once installed, launch BrowserStackLocal

Once installed & launched, from back within BrowserStack, you’ll just go directly to 127.0.0.1:3000

Here you can see I’m running the default Rails app on my local machine.

BrowserStack can even do screenrecording and more fancy things like Selenium testing against different browsers too.

Categories
Tools

Browseo (#3)

This tool will show you a hierarchy of particular elements as if you’re looking at your web page as though it is a web browser.

Start at https://www.browseo.net/

Let’s profile this website, blog.jasonfleetwoodboldt.com, to see how good I am at SEO.

Browseo will tell us a whole bunch of meta-information, like our title, our Twitter card, our viewport settings. It’s good to review these because they are easily left off (which will hurt your SEO rank). You will see your SERP preview (“Search engine results pages”) — that’s how your website looks in Google and other search listings.

This tool is useful for a quick analysis to check if you’ve missed any important settings, but it doesn’t offer much in the way of content analysis.