A Browser Matrix Widget for the Open Source Community

We just released a new feature that will make your project pages much more informative. It is a widget that lets you present details about your last build. It's a more extended version of our badge that you're probably already familiar with:

Sauce Open Sauce Badge

The browser matrix widget takes that concept to the next level. It gives you and the whole community a fast and in-depth look into the status of all tests runs that you made against different platforms using Sauce. You will find there information about each operating system (and its version), browser version, and browser vendor your test was run on. Of course you will get an indication of the status of each one of these tests - so you'll know on which platform your test failed with a blink of an eye.

Here is how it looks:

New Sauce Labs browser matrix widget

You like it? Great! Let me tell you how to use in with your open source projects. The concept is the same as with standard status images. Just follow these few simple steps:

  1. Choose a Sauce account which corresponds to your project. If you just have one project, you can use your main Sauce account name. If you have multiple projects, you will want to create a sub-account for each project.
  2. Run your tests for a given project on Sauce using that account's username and access key (found on the account page).
  3. Make sure to set a build and pass/fail status for every test that runs. Use process.env.TRAVIS_JOB_ID as a build number if you're using Travis-CI. Also make sure every job is set to be publicly viewable (our Open Source Plan makes them public by default). If your tests don't have a build or pass/fail status, or if even one in a build is not public, you'll get the "Unknown" status for security reasons.
  4. Use the following HTML snippet in your GitHub readme or on your project site - just replace [ACCOUNT USERNAME] with your real Sauce username: <a href="https://saucelabs.com/u/[ACCOUNT USERNAME]"> <img alt="Selenium Tests Status" src="https://saucelabs.com/browser-matrix/[ACCOUNT USERNAME].svg" /> </a>
  5. Or if you like Markdown: [![Selenium Test Status](https://saucelabs.com/browser-matrix/[ACCOUNT USERNAME].svg)](https://saucelabs.com/u/[ACCOUNT USERNAME])

  There you go - your shiny new browser matrix widget has just been placed on your project webpage. See it in action on the WD.js open source project page. What to know more? Check out our documentation page.

Written by

Bernard Kobos

Topics

Open sourceCross browser