More advanced badges for your projects using Travis or Sauce Labs.
See it in action over at the script-atomic-onload
project.
Did this project bring you joy? Want to support updates? Check out my GitHub Sponsors page.
Alternatively…
File size for any file on GitHub or npm
Slice your Travis build matrix by environment
Browser support matrix from Sauce Labs
Beautiful and customizable!
Using something other than Sauce Labs? Just construct a URL with results from your browser tests.
Deployed at: https://badges.herokuapp.com/
You may also run your own instance using this package. See the Deployment section.
Render browser matrix badge based on support specified in the query
parameters, for cases where your testing is done with a service other than
Sauce Labs (otherwise use the /sauce
endpoint), or you don’t have CI and
just want to show your intended support.
Query parameters
-
android
,firefox
,googlechrome
,iexplore
,ipad
,iphone
,microsoftedge
,opera
,safari
A comma-separated list of version numbers that were tested for the given browser, e.g.
firefox=20,26
.Prefix a version number to indicate status:
+
or no prefix: Passed.-
: Failed.!
: Error.
-
logos
,labels
,versionDivider
,style
Same as the
/sauce/:user
endpoint below.
Render browser support matrix badge for the Sauce Labs account at :user
.
Query parameters
-
build
Build number, it should match the
build
string of one or more jobs. By default, try to find the most recent build. The build can be from any CI service, not just Travis.Sauce Labs’ API doesn’t allow filtering by build, so finding the jobs for a build can be a bit of a hassle:
- If the requested build is not in the first 500 results returned by the
API, then you should specify
from
andto
to limit the query window to the time span of the build. - If no
from
is given, then stop fetching more jobs from the API when a different build number is encountered.
Jobs with a
null
value forbuild
are never included. - If the requested build is not in the first 500 results returned by the
API, then you should specify
-
name
Name filter, it should match a whitespace separated substring in the
name
of one or more jobs. Only jobs matching the filter will be included in the result. -
tag
Tag filter, it should match a string in the
tags
array of one or more jobs. Only jobs matching the filter will be included in the result. -
from
Start time (Unix epoch) of the window in which to find jobs. Passed along to the Sauce Labs API.
-
to
End time (Unix epoch) of the window in which to find jobs. Passed along to the Sauce Labs API.
-
skip
Number of initial jobs to skip. Passed along to the Sauce Labs API.
-
source
Data source from which to render results, defaults to
svg
.- api: Fetch results from the Sauce Labs API. This allows you to specify any of the above query parameters for filtering jobs.
- svg: Fetch Sauce Labs’ own browser matrix SVG widget and transform it
into our slimmer, beautified version. If you aren’t using any of the
options above, and just want the same results as their own widget would
render, use this. If you try specifying any of the options above, the
server will automatically change
source
toapi
. This is probably much faster than talking to the API, but it’s a bit more fragile since their SVG output could change.
-
logos
How to render browser logos, defaults to inside.
- inside or true: Show logos in the label part of the badge.
- none or false: Don’t show logos.
-
labels
How to render browser labels, defaults to shortName.
- shortName or true: Short names, e.g. "Chrome", "FF", "IE".
- name: Medium names, e.g. "Chrome", "Firefox", "Internet Explorer".
- longName: Long names, e.g. "Google Chrome", "Mozilla Firefox", "Microsoft Internet Explorer".
- sauceName: Browser identifiers used by Sauce Labs, e.g. "googlechrome", "firefox", "iexplore".
- none or false: Don’t show labels.
-
versionDivider
How to render the divider between browser version numbers, defaults to none.
- none or false: Don’t show a divider.
- line or true: Show a subtle beveled line between version numbers.
-
style
Badge style, defaults to flat. Styles match shields.io.
- flat: Round and smooth.
- flat-square: Square and flat.