Browser testing using Cypress and BrowserStack

A step-by-step process for UI testing & automation

4 min readOct 15, 2021

TLDR; This tutorial is for testing beginners. For QA & advanced developers, you can get started with BrowserStack automation here.
Sample App here

Why automation?

The biggest problem front-end developers face is the rendering inconsistency of our websites and applications in different browsers, OS, and mobiles. We can try to test our app manually but the combination of possibilities is overwhelming. If you care about your users from other platforms, you cannot afford to show a broken UI or functionality to them, and a lot of us promise to support older browsers. In this post, we will go through a simple step-by-step process to automating the UI testing of your app in any browser and OS.

Introducing Cypress

We’ve come a long way since hideous headless browser testing with phantom.js. There are a ton of UI automation libraries out there and if you are comfortable with JS, Cypress would be a great place to start. It’s easy to set up, easy to write tests on, easy to run, and easy to integrate. If you don’t have npm setup in your repository, check here.

npm install cypress --save-dev

Writing the test cases

Start with writing a simple case and test it.

describe('My app', () => {
  it('should load', () => {
    cy.visit('https://your-app-or-webpage.com/')
    cy.get('.important-element').should('exist')
  })
})

Then you can run it as,

npx cypress open

You can go through this documentation to get started about cypress.

The next step is to list down the test cases you would want to implement. Here is an example…

Sometimes it’s better to write tests before development. It’s called TDD

Defining all the cases first gives us clarity on what we want to test, how much, and at what depth. Once you have that list, you can start implementing the cases one by one. You can use check cypress docs for testing based on the use case. Once you have written all the test cases, it should look something like this.

Awesome! you have crossed the biggest step in the testing process. The next part (automation) is a cakewalk in comparison, thanks to BrowserStack.

Introducing BrowserStack

BrowserStack is a cloud platform for seamless App & Browser testing. They provide a portal to 3000+ real devices and browsers. And if you’re writing open source, you can opt here for sponsorship. Regardless, signup for an account and get your Username and Access Key from your account settings, we would soon be needing this.

npm install browserstack-cypress-cli
npx browserstack-cypress init

This would install BrowserStack cypress client and create a config file ./browserstack.json. Paste your username and access_key it the appropriate fields. You can read more about the config file here, it includes the browser list you want to test, local testing, and more. Let’s run our tests…

npx browserstack-cypress run --sync

This will start testing your app with the config you’ve mentioned. Once the run has started, you can check your status here.

You can click on each test and see the test video and the details of the test too. You can debug the browsers and test cases that have failed. You can integrate this report into your pipeline to make sure UI tests pass before deployments. You can also add a cool badge to your repo (more here).

More from BrowserStack

BrowserStack also provides live testing on any real device, screenshot, and visual testing, live and automated mobile app testing, and a lot more. It is also very easy to integrate BrowserStack into your pipeline using the extensive list of integrations available.

You can take a look at this Sample App to understand more.

Summary

This journey shows us how easy it is to write UI tests, with the help of amazing frameworks like cypress and systems like BrowserStack. I hope this motivates you to write strong tests and thus build resilient and reliable interfaces, which in turn helps you capture a much wider set of audience and customers. If you face any problems or you find this useful, you can find me lurking on Twitter. Feel free to say hi, I’d love to hear from you 👋🏼

Cheers and Happy coding ❤️