BrowserStack

BrowserStack is a cross-browser and cross-device testing platform that allows us to test websites on real browsers and real devices. It helps ensure that our FrontEnd work behaves consistently across different operating systems, browsers, and screen sizes.

At Terra, BrowserStack is mainly used during QA and final validation, especially when delivering FrontEnd modules or components.

---

Overview

Modern browsers and devices behave differently, even when using the same HTML, CSS, and JavaScript. BrowserStack allows us to catch issues that may not appear in local development or standard desktop testing.

We mainly use BrowserStack to:

• validate FrontEnd deliveries
• test real mobile devices (especially iOS)
• ensure compatibility across browsers
• support QA checklists required in ClickUp

---

QA checklist context

When you are asked to deliver a FrontEnd module or component, you’ll usually need to complete a QA checklist.

You can find it in ClickUp:

Action items → Create checklist → Use template → QA Checklist – FrontEnd

This checklist includes validation across:

• multiple browsers
• operating systems
• mobile and desktop devices

Responsive Viewer

In addition to BrowserStack, we also use Responsive Viewer, a browser extension that lets you quickly preview layouts across multiple screen sizes.

It’s useful for fast visual checks, but it does not test different browsers or real devices.

---

BrowserStack

BrowserStack access

BrowserStack is a shared account.

If you need to use it, ask first in the #browserstack Slack channel to check availability.
Logging in without coordination can close someone else’s session, so it’s important to keep usage organised.

BrowserStack allows testing on real browsers and real devices.

What we mainly test

Focus especially on:

• iOS (Safari on iPhone)
• Safari (macOS)
• Edge (Windows)
• Last versions of browsers

---

---

Best practices

• BrowserStack doesn’t work with local environments
  • Always test against a deployed version of the site.
• If the project includes forms with autofill, make sure to test them in Edge.
• Always test iPhone + Safari, especially when:
  • JavaScript animations are involved
  • scroll-based interactions are used
  • complex layouts or transitions exist
• Use Responsive Viewer for quick layout checks.
• Prioritise iOS, Safari, and Edge.
• Test on a deployed environment, not locally.
• Follow the ClickUp QA Checklist – FrontEnd before marking tasks as done.
• Don’t assume “it works in Chrome” means “it works everywhere”.