Test sites for browser developers

3 min read Original article ↗

Working on the mobile Firefox team gives you the opportunity to touch on many different parts of the browser space. You often need to test the interaction between web content and the application integration's to another component, say for example, a site registering for a WebPush subscription and Firefox using Firebase Cloud Messaging to deliver the encrypted message to the end-user. Hunting around for an example to validate everything fine and dandy takes time.

Sometimes a simple test site for your use case is helpful for initial validation or comparison against other browsers.

Below is a list of tests that I've used in the past (in no particular order):

Forms and Autocomplete

There are various form types and various heuristics to trigger completion options, so they deserve their own section. The more (test sites) the merrier!

  • Registration, Login and Change Forms - MattN
    • Web forms come in all shapes and sizes. Some simple forms to see if we can detect a login/registration form and fill a login entry into them.
  • fill.dev
    • More forms, but also includes credit card and address form filling.
  • daleharvey.github.io/testapp
    • Good for sanity testing simple forms, links that have same/different origins, or (location) permission prompts.
  • Sign-Up & Login Forms - Dimi
    • Sign-up and login forms behave differently, so they are handy to test separately. For example, autofilling a generated password is useful on a registration form but not on a login one.

Make your own

If you need to make your own, try to write out the code yourself so you can understand the reduced test case. If it's not straight-forward, try using the Testcase Reducer by Thomas Wisniewski.

Comments

With an account on the Fediverse or Mastodon, you can respond to this post. Since Mastodon is decentralized, you can use your existing account hosted by another Mastodon server or compatible platform if you don't have an account on this one. Known non-private replies are displayed below.

Learn how this was implemented from the original source here.