If you’re a designer at heart, you might get nostalgic for the “old days.” It was that period in the early 2000s when web design was unique, eccentric, sometimes weird, and often outlandishly creative.

Those were simpler times, when things seemed a little less unruly – well, maybe with the exception of Adobe Flash – and desktops and laptops were the only stages to play on.

There was something exciting about that period. We were browsing the unknown, stumbling upon websites with real personality and design flair. Nothing fit into a “box” or obeyed a specific navigation style, like the movie site for Donnie Darko or MTV.com.

(If you have any personal favorites, you can always take a walk down memory lane using the Wayback Machine. It’s true: the Internet never forgets.)

Then came the iPhone… and smartphones… and tablets… and chaos.

Today, we'll be reviewing BrowserStack – and how it brings control to (at least some) of that chaos. It's a fantastic tool with an expansive set of testing capabilities. There's a lot to cover, but before we dive into the details and share our two cents, let's make like the Wayback Machine and take a look at how we got here.

The birth of mobile responsive web design

Apple might have started the small screen revolution, but the market quickly followed suit. And while the iPad ushered in the tablet craze, everyone from Amazon to Google to Samsung was introducing a different screen size for delivering content.

With so many screens to serve, it’s no wonder that responsive design was born. Created by Ethan Marcotte in 2010, responsiveness brought order to the chaos. It provided an architectural system to help ameliorate the burden of managing both desktop and mobile websites (remember the “.mobi” extension?) across multiple form factors.

There are some that say responsive design killed creativity. Now, before you get defensive, remember that a vocal minority out there still maintains that the real death of the modern web can be traced back to CSS. So… haters gonna hate.

Back to responsiveness. It’s not a leap to suggest that frameworks like Bootstrap have essentially “handcuffed” web design with very explicit standards – all in an effort to maintain order.

But did it kill creativity? That’s debatable.

You might recall the line in Jurassic Park, the one where Jeff Goldblum finds the eggs that shouldn’t exist (remember that all dinosaurs on the island were bred as female). When he uncovers the nest, he says: “life finds a way.”

In that same sense – minus the genetic cloning – web designers find a way. They’re ambitious explorers who crave the structure of a tightly bound canvas to paint on. They work with available media, turn limitations into the limitless, and bend rigid rules towards beauty.

OK, so maybe creativity isn’t going the way of the dinosaurs. But despite having an abundance of ambition, it’s still a lot more complicated today to build uniform experiences across so many devices and browsers.

Swimming in an ocean of screens

While responsive design has brought some calm to the storm, the workload for designers and developers has steadily increased – particularly around testing.

If you think back even just a decade ago, a web developer could borrow a mobile device from one or two people to test a website’s mobile performance. There simply weren’t that many phones or browsers to worry about.

Today? There are 9000+ distinct devices shipped with 21 different operating systems, along with 8 major browser engines. Sure, choice might be good for consumers, but not so good for developers who pull out their hair to make it all possible.

Cross-browser testing

It goes without saying: cross-browser testing is an absolute necessity, not an option. It’s the only way to ensure that websites and apps work in all viewable formats, and that you’re delivering the best possible user experience. Modern testing regimens typically include:

Browsers and Operating Systems: Think Firefox, Chrome, Safari, Edge, and the dreaded old versions of IE (Internet Explorer) – as well as operating systems like Windows, macOS, iOS, and Android.
Different devices: The countless smartphones, tablets, desktops, laptops, and even large-format monitors and screens.
Assistive Tools: Compatibility with accessibility technologies like screen readers for individuals who are low vision or blind.

When it comes to cross-browser testing tools, there are many – but BrowserStack is one of the clear leaders. It elevates testing to a new level and provides rich features that aid designers and developers in their quest for multi-screen harmony.

What is BrowserStack?

Browserstack is a cloud-based web and mobile testing platform that lets you test your websites and mobile applications across popular browsers, operating systems, and even real devices. The platform provides access to 2,000+ real mobile devices and browsers, so you can test broadly on a single screen.

Founded in 2011 by Ritesh Arora and Nakul Aggarwal, BrowserStack powers over two million tests every day. BrowserStack also boasts over 25,000 customers and some big global brands including Microsoft, Twitter, Barclays, and Expedia.

Percy Acquisition

Before we get to the range of tools that BrowserStack offers, it’s worth mentioning that in July 2020, BrowserStack acquired Percy – a visual testing and review platform that captures screenshots, compares them against a baseline, and highlights visual changes.

With this acquisition, teams can now run more advanced visual, manual, and automated functional tests on BrowserStack’s infrastructure.

What kind of testing tools does BrowserStack offer?

BrowserStack offers two main products: website testing and app testing. We’ve broken them down below:

Website Testing

Browserstack has three different tools for website testing: Live, Automate, and Percy. As mentioned, Percy is a relative newcomer but complements the suite of tools. We’ll go through each, so their purpose is clear.

Live

Live is the standard cross-browsing test in BrowserStack – and probably the most frequently used. With Live, you have access to thousands of real browsers and devices, with their complete functionality and behaviors. You can check out the full list of available browsers here.

Here's the key: BrowserStack has browsers installed on actual devices, so cross-browser testing is as authentic as testing your website on a real browser installed on your own device. Getting started is easy: just enter your website address and click on “Start Test.”

From there, you’ll have a screen where you can choose the browser and device you’d like to test your website on. Keep in mind that you can always change the parameters through the draggable left-side panel, including:

Browser and OS: Change the specified web browser and operating system.
Resolution: Shift between the most commonly used screen resolutions.
Location: Changes the device’s IP location to see how your website is viewed in other regions.
Integrations: If you’ve added any optional integrations to BrowserStack (such as Slack or Jira), a button appears that allows you to report any issues directly to the integrated platform. We’ll cover the integrations in more detail below.
Recommendations: This is a handy tab that shows your most frequently used browsers and devices for quick selection. It also features any new and trending devices such as the latest mobile smartphones that have been released.

You can also right-click anywhere inside the testing screen and it will function just like a local device. The best part here is that you can access the browser’s developer tools by clicking on “Inspect element,” and it happens right inside the testing environment – which makes debugging much easier.

Overall, the Live testing feature has everything you need to mimic an actual environment and perform any critical debugging.

Automate

Automate is an automatic testing application designed for desktop and mobile browsers. It uses Selenium – the most popular freeware and open-source tool for UI-based functional test cases. Selenium enables record and playback for testing web applications, making it easier to “shake out” any issues with less manual work.

One of the benefits of Automate is that it provides a single interface for writing custom Selenium test scripts in programming languages like Ruby, Java, NodeJS, PHP, Perl, Python, and C# (among others). With BrowserStack, you can configure and run Selenium testing with any of these languages and test multiple devices at the same time.

Automate is an incredible time and productivity saver. You can quite literally cut down your testing cycles from hours to minutes and run parallel tests across browsers and devices. A point of clarification: in the software world, "parallel testing" means running tests on two or more versions of software concurrently with the same input or test methods. When testing websites and apps, parallel tests indicate the number of automated tests that can be run simultaneously.

For example, let's say you have 50 test cases. If you run them sequentially, it will take you about 50 minutes to run all of the tests. But with BrowserStack automate, you can run up to 10 parallel tests at a time, meaning you will only spend 5 minutes to complete 50 tests instead of 50 minutes.

As they say, time is money – and this feature can save a lot of both.

Automate’s Selenium testing features include:

Parallel testing: As noted, you can run concurrent tests with custom scripts and save significant time.
Seamless integration: Use popular languages and frameworks such as Jenkins, Travis CI, TeamCity, Azure Pipelines, and more.
Test in development environments: You can run your Automate tests in development environments behind firewalls with zero setup or configuration.
Comprehensive debugging: Mitigate issues using video recordings and automated screenshots of errors, and access text, console, and network logs.
Security: Run your tests securely on physical devices and wipe everything clean after every session.

You can see the full list of features here.

Percy

As noted previously, Percy automates visual testing with cross-browser capabilities, rendering the same page in different browsers and highlighting the visual differences. It also captures screenshots and compares them to previously generated snapshots.

Here's how it works: in the example below, there are two screens comparing a dashboard. The red pixels highlight the visual changes underneath. Percy automatically matches and groups snapshots that have the same visual change. You can review and approve the changes for snapshots – and after all, snapshots are approved, your pull request will show that the visual review has been approved.

Mobile App Testing

Mobile app testing is the other side of the BrowserStack house. It brings together best-of-breed features that enable you to test and remediate issues in your app experience. Again, we’ve outlined the feature set below.

App Live

App Live is an interactive native and hybrid app testing tool. With App Live, you can instantly test on a wide range of real iOS and Android devices in the cloud.

App Live features include:

Real Device Cloud: Test your apps on actual Android and iOS devices such as iPhone, Samsung Galaxy, Pixel, Nexus, etc.
Real-world conditions: Access and test against 15+ native device features such as GPS, push notifications, Google Play, in-app purchase, network simulation, localization, and more features that replicate real user conditions.
Use natural gestures: Interact with your app on a remote device just like you would interact with one physically in hand: scroll, zoom, tap, swipe, and more.
Real-time debugging: Debug your app, view crash reports and logs, inspect UI elements, and optimize performance.
Test dev environments: The local testing feature allows you to test your apps on your development and staging environments out-of-the-box with no setup required.

App Automate

With App Automate, you can also test your native and hybrid apps on a wide range of physical devices for smartphones and tablets, including iPhone, iPad, Samsung Galaxy, Pixel, Nexus, and more. In addition, it offers all the features that App Live provides.

With App Automate, you can speed up your app testing cycles by running concurrent tests across thousands of devices. You can also fix bugs instantly through device logs, text logs, video recordings, and screenshots.

Integrations

BrowserStack’s integration library is surprisingly robust and filled with useful connectors. Want to report issues directly through Slack or Jira while testing? Simply add them as integrations and share your results with a click. From automation frameworks to CI/CD pipelines to project management, there are numerous tools and resources to make your workflow more productive.

With BrowserStack, you can also file issues directly in your GitHub repo, launch a browser from your Visual Studio IDE to test your website, or even test directly from CMS platforms such as WordPress and Shopify.

Pricing

BrowserStack offers five different pricing categories. Each of their tools – Live, Automate, Percy, App Live, and App Automate – has its own pricing model, so it helps to start with the tool you think you’ll be using the most.

All plans by default include:

Real Android and iOS devices for Live
Local testing
Native browser behavior
Team management
Security
2000+ real desktop browsers
Range of display resolutions
Pre-installed developer tools
Expert tech support & documentation
Support for Selenium, Cypress & popular frameworks

The Live plan starts at $29/month (billed annually) or $39/month (billed monthly). If you’re mainly doing manual cross-browser testing, this is most ideal and affordable option.

There are also available terms for Team (per user per month) and Enterprise Team, the latter requiring a call to their sales. The Enterprise plan includes priority support, IP whitelisting, advanced local testing and access control, and usage analytics.

The Automate plan starts at $129/month (billed annually) with 1 parallel test and $259/month for 2 parallel tests. If you want to add more parallel tests, the pricing goes up exponentially. Monthly billing starts from $169/month.

The Percy plan is the visual testing protocol – and it starts for free. You get access to Percy’s core features, which include unlimited users and 5000 screenshots/month. Of course, if you need more screenshots, you’ll have to purchase the Professional coverage, which starts at $99/month with 25,000 screenshots.

App live starts at $29/month for a single user, and Team plans start from $25/month per user.

App Automate for mobile app testing starts from $199/month for one parallel test.

Conclusion

We’ve seen a number of testing tools over the years, and platforms with integrated views for different devices. If there’s one thing that BrowserStack has on the competition, it’s the depth of their testing capabilities. They go wider and deeper than any other tool, and they provide downstream features for a single user – as well as intelligent automation and comprehensive support for the most demanding enterprise. All of this makes BrowserStack incredibly scalable across the board.

From a feature perspective, the biggest advantage of BrowserStack is that it emulates almost any browser or device. The ability to automate testing and use dev tools for debugging is also immensely useful. The fact that it covers so much ground – with thousands of possible form factors to test against – is truly awesome. But it’s also a stark reminder of how challenging it is to accommodate so many devices and browsers.

One of the major downsides we encountered was the load speed of browsers during testing. It’s not a dealbreaker by any stretch of the imagination, but it can affect the perception of an app’s performance.

Sure, BrowserStack can also get a bit pricey when going beyond simple live website testing, but that’s balanced by the presence of free resources and rich capabilities. That said, it’s a small price to pay to ensure the best experience from your websites and applications – so in our opinion, BrowserStack’s value is truly stacked in your favor.

If you’d like to try BrowserStack, you can kick the tires with their free trial.

About BrowserStack

BrowserStack is the world's leading software testing platform, powering over two million tests every day across 15 global data centers. They help Microsoft, Twitter, Barclays, Expedia, and over 25,000 customers deliver quality software at speed by moving testing to their Cloud. BrowserStack’s platform provides instant access to 2,000+ real mobile devices and browsers on a highly reliable cloud infrastructure that effortlessly scales as testing needs grow. With BrowserStack, Dev and QA teams can move fast while delivering an amazing experience for every customer.

Founded in 2011, BrowserStack is a privately held company backed by Accel with offices in San Francisco, Mumbai, and Dublin.

News

BrowserStack Review: Make Your Website and App Testing Simple and Scalable