Cross-Browser Testing

Standards

We generally target the latest version of the top four web browsers of the following two breakpoints...

• Desktop
  • Chrome
  • Firefox
  • Safari
  • Edge
•  Mobile
  • Chrome (iOS & Android)
  • Safari (iOS)

These figures are brought down from statcounter.com .

Testing with BrowserStack

BrowserStack: https://www.browserstack.com

This service lets you test websites on REAL browsers via VMs on multipl OSes, as well as official mobile emulators.

Additionally, it will take screenshots across a configurable list of browser + OS combinations for a given URL and deliver them to you.

It provides automation possiblities via Selenium webdriver.

Usage

To generate a bunch of screenshots through BrowserStack...

1. Visit https://www.browserstack.com/users/sign_in
2. Ensure you're logged in using LastPass
3. Visit https://www.browserstack.com/screenshots/
4. Generate Screenshots from the given URL

To live test a site...

1. Visit https://www.browserstack.com/start
2. Select which device to test on and start the browser
3. Load up the URL and test away

Device List (Updated Nov 2022)

Here is a baseline list for modern devices with most used viewport sizes:

• iPhone 13 mini: viewport width - 375px
• iPhone 13 pro max: viewport width - 428px
• iPad Air 5: viewport width - 820px
• iPad mini 2021: viewport width - 744px
• Samsung S20: viewport width - 360px
• Samsung Galaxy Tab S8: viewport width - 753px

Device List

Here is a baseline list for maximum browser coverage:

• android Google-Nexus-4 4.2

• android Google-Nexus-5 5.0

• android HTC-One-M8 4.4

• android Samsung-Galaxy-S5 4.4

• ios iPad-Air 8.3

• ios iPad-Mini-2 8.3

• ios iPhone-4S-(6.0) 6.0

• ios iPhone-5S 7.0

• ios iPhone-6 8.3

• OS X chrome 42.0

• OS X firefox 37.0

• OS X safari 8.0

• win8 firefox 37.0

• win8 IE 10.0

• win8.1 chrome 42.0

• win8.1 firefox 30.0

• win8.1 IE 11.0