Giter Club home page Giter Club logo

airtap's Introduction

airtap

Run TAP unit tests in 1789+ browsers. Airtap is a command-line interface to unit test your JavaScript in browsers, using a TAP-producing harness like tape. Start testing locally and seamlessly move to browsers in the cloud for full coverage. Airtap runs browsers concurrently and lets you iterate quickly during development. Don't just claim your JavaScript supports "all browsers", prove it with tests!

npm Node version Test Standard Common Changelog

Table of Contents

Click to expand

Install

With npm do:

npm install airtap --save-dev

If you are upgrading or migrating from zuul: please see the upgrade guide.

Getting Started

You'll need an entry point for your tests like test.js. For a complete example see airtap-demo. If you already have an entry point, go ahead and run it with:

airtap test.js

Out of the box, this will launch the default browser on your system. To keep the browser open and automatically reload when you make changes to your test files, run:

airtap --live test.js

Adding Browsers

In order to run other (and more than one) browsers, create a .airtap.yml file in your working directory, containing at least one provider and at least one browser. For example:

providers:
  - airtap-system

browsers:
  - name: chrome
  - name: ff

Providers discover browsers on a particular platform or remote service. In the above example, airtap-system finds browsers installed on your machine which Airtap then matches against the browsers you specified.

You can include multiple providers and let Airtap find the best matching browser(s):

providers:
  - airtap-playwright
  - airtap-system

browsers:
  - name: ff
    version: 78

You can also match browsers by provider:

Click to expand
browsers:
  - name: ff
    provider: airtap-system

Airtap, providers and browsers are tied together by manifests. They define the name and other metadata of browsers. You can see these manifests by running airtap -l or -la which is short for --list-browsers --all. For example:

Click to expand
$ airtap -la
- name: electron
  title: Electron 9.0.5
  version: 9.0.5
  options:
    headless: true
  provider: airtap-electron

Airtap can match browsers on any manifest property, with the exception of options which exists to customize the browser behavior. Options are specific to a provider. For example, the airtap-playwright provider supports disabling headless mode and setting custom command-line arguments:

browsers:
  - name: chromium
    options:
      headless: false
      launch:
        args: [--lang=en-US]

For more information on the browsers field, see Configuration.

Available Providers

Providers must be installed separately.

Package Description
airtap-system Locally installed browsers on Linux, Mac & Windows
airtap-playwright Playwright (headless Chromium, FF and WebKit)
airtap-sauce Remote browsers in Sauce Labs
airtap-electron Electron
airtap-default Default browser
airtap-manual Manually open a URL in a browser of choice

Cloud Testing With Sauce Labs

The airtap-sauce provider runs browsers on Sauce Labs. Sauce Labs offers quite a few browsers, with a wide range of versions and platforms.

Open source projects can use the free for open source version of Sauce Labs.

1. Set Credentials

Airtap needs to know your Sauce Labs credentials. You don't want to commit these sensitive credentials to your git repository. Instead set them via the environment as SAUCE_USERNAME and SAUCE_ACCESS_KEY.

2. Select Browsers

Add the airtap-sauce provider and wanted browsers to .airtap.yml:

providers:
  - airtap-sauce

browsers:
  - name: chrome
  - name: ios_saf
  - name: ie

3. Set Hostname

Airtap runs a server to serve JavaScript test files to browsers. The airtap-sauce provider establishes a tunnel to your local machine so that Sauce Labs can find that server. For this to work, some browsers need a custom loopback hostname, because they don't route localhost through the tunnel. Add the following to your hosts file:

127.0.0.1 airtap.local

You are now ready to run your tests in the cloud with airtap test.js.

Continuous Integration

After making sure your tests pass when initiated from your local machine, you can setup continuous integration to run your tests whenever changes are committed. Any CI service that supports Node.js will work.

Sauce Test Status

Travis CI

1. Setup Travis

Take a look at the Travis getting started guide for Node.js. At minimum we need to create a .travis.yml file containing:

language: node_js
node_js:
  - 12
addons:
  hosts:
    - airtap.local

2. Add Test Script

Add the following to your package.json:

{
  "scripts": {
    "test": "airtap test.js"
  }
}

3. Enable Code Coverage

Optionally enable code coverage with the --coverage flag. This will collect code coverage per browser into the .nyc-output/ folder in Istanbul 1.0 format. Afterwards you can generate reports with nyc report, which takes care of merging code coverage from multiple browsers.

A typical setup for Travis looks like:

{
  "scripts": {
    "test": "airtap --coverage test.js"
  }
}

You can choose to post the results to coveralls (or similar) by adding a step to .travis.yml:

after_success: npm run coverage
{
  "scripts": {
    "test": "airtap --coverage test.js",
    "coverage": "nyc report --reporter=text-lcov | coveralls"
  }
}

4. Set Credentials

Skip this step if you're not using the airtap-sauce provider. Same as when initiating tests locally, we need to get Sauce Labs credentials to Travis. Luckily Travis has a feature called secure environment variables. You'll need to set 2 of those: SAUCE_USERNAME and SAUCE_ACCESS_KEY.

GitHub Actions

Should work in theory :)

CLI

Usage: airtap [options] <files>. Supports multiple files. They can be paths relative to the working directory or glob patterns (e.g. airtap test/*.js). Options:

-v --version          Print version and exit
-l --list-browsers    List (effective or --all) browsers
-a --all              Test or list all available browsers
   --coverage         Enable code coverage analysis
   --live             Keep browsers open to allow repeated test runs
-c --concurrency <n>  Number of browsers to test concurrently, default 5
-r --retries <n>      Number of retries when running a browser, default 6
-t --timeout <n>      How long to wait for test results, default 5m. Can
                      be a number in milliseconds or a string with unit.
-p --preset <preset>  Select a configuration preset
-s --server <script>  Path to script that runs a support server
   --loopback <host>  Custom hostname that equals or resolves to 127.0.0.1
   --verbose          Enable airtap debug output
   --silly            Enable all debug output
-h --help             Print help and exit.
Examples (click to expand)

List all available browsers:

airtap -la

Test browsers specified in .airtap.yml:

airtap test.js

Test all available browsers (careful):

airtap -a test.js

Test multiple files:

airtap "test/*.js"

Configuration

Airtap consumes a YAML config file at .airtap.yml in the working directory. The following fields are available.

providers (array)

browsers (array)

List of browsers to test in the cloud. Each entry should contain a name property. Additional properties like version and platform may be specified depending on the provider.

The version property defaults to latest and can be a specific version number, the keyword latest, the keyword oldest, or (for Firefox and Chrome) one of the keywords beta or dev.

browsers:
  - name: chrome
  - name: firefox
    version: beta

Specific version of a browser on a specific platform

Only supported by the airtap-sauce provider at the time of writing, as other providers do not run browsers on a particular platform.

browsers:
  - name: chrome
    version: 28
    platform: Windows XP

Range of versions of a browser

browsers:
  - name: firefox
    version: 14..latest
  - name: ie
    version: 9..11

Range of versions with negative start index.

This example would test the latest three stable versions of Firefox (latest - 2, latest - 1, latest).

browsers:
  - name: firefox
    version: -2..latest

Disjoint versions

browsers:
  - name: firefox
    version: [19, 20]

Disjoint with ranges

browsers:
  - name: firefox
    version: [19, 20, 23..latest]
  - name: chrome
    version: [-1..latest, beta]

Float version numbers

browsers:
  - name: ios_saf
    version: '8.0..latest'

Float version numbers should be quoted.

browserify (array)

You can set any of the items in the following list, and they'll be passed to browserify.

  • plugin
  • external
  • ignore
  • exclude
  • transform
  • add
  • require

They can be repeated and accept options.

browserify:
  - require: ./some-file.js
    expose: intimidate
  - transform: brfs
  - transform: jadeify

You can also customize what's passed to browserify(options).

browserify:
  - options:
      node: true

IE < 11 support

To support IE < 11, an older version of the buffer polyfill is required. Use the following configuration and run npm install buffer@4:

# Use buffer@4 to support IE < 11
browserify:
  - require: 'buffer/'
    expose: 'buffer'

server (string or object)

This field can point to an optional shell command or JavaScript file to run as a support server. It will be started before all tests and stopped afterwards. This allows testing websockets and other network requests. Your command will be run with the AIRTAP_SUPPORT_PORT environment variable set to a port number you must use. If your server does not listen on this port it will be unreachable (on browser providers that use a tunnel).

server: ./test/support/server.js

We recommend writing simple support servers using http or express. For shell commands you can use $AIRTAP_SUPPORT_PORT in the arguments, which will be substituted:

server: "python -m SimpleHTTPServer $AIRTAP_SUPPORT_PORT"

Firefox Profile

The airtap-sauce provider supports running Firefox instances with custom user profiles. This allows you to configure anything you can change in about:config programmatically for a test run. You can set these options with a section under any Firefox browser entry:

browsers:
  - name: firefox
    options:
      profile:
        webgl.force-enabled: true

Who Uses Airtap?

Lots of folks! Collectively, packages that depend on Airtap get 100's of millions of downloads per month!

Contributing

Airtap is an OPEN Open Source Project. This means that:

Individuals making significant and valuable contributions are given commit-access to the project to contribute as they see fit. This project is more like an open wiki than a standard guarded open source project.

See the contribution guide for more details.

License

MIT ยฉ Roman Shtylman, Zuul contributors and Airtap contributors.

airtap's People

Contributors

andreypopp avatar bengourley avatar bevacqua avatar brycekahle avatar danielstjules avatar defunctzombie avatar dependabot[bot] avatar domenic avatar eshao avatar feross avatar goto-bus-stop avatar greenkeeper[bot] avatar jameskyburz avatar lpinca avatar mcollina avatar mcous avatar minuteman3 avatar moondef avatar nolanlawson avatar phated avatar ralphtheninja avatar rase- avatar thlorenz avatar tinchoz49 avatar tmcw avatar tootallnate avatar vvo avatar vweevers avatar warbrett avatar yeskunall avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

airtap's Issues

Remove Zuul.browser method, move functionality to Zuul.run

Currently, you need to first do zuul.browser(info) x number of times and once you're done you call zuul.run(cb). It feels a bit clunky that you need to store browser state in the zuul object before calling zuul.run when you might as well do zuul.run(browsers, cb).

Also, the browsers array could be completely decoupled from zuul, which currently knows about SauceBrowser, PhantomBrowser and Electron.

It would be much nicer if we had an AbstractBrowser, which e.g. SauceBrowser could inherit from (sort of like abstract-leveldown style) and you simply provide an array of AbstractBrowser to zuul.run() which should be oblivious of the browser implementation.

This way you can imagine other browser implementations using zuul and a more modular approach.

Add changelog

Similar to the changelog of airtap-browsers, where the first entry describes the differences from upstream.

rewrite README

  • Badges
  • Remove Frameworks section
  • Add short description
  • Replace images with local ones
  • Remove Credits section
  • Add copyright notice (without year) and Zuul credits to License section
  • And most importantly: #10

Remove JSON2

It's probably for some old IE that doesn't support JSON.

consider removing the browser ui in favor of moving parsers to the server

Currently tap-parser resides in the client in order for the reporter to be able to generate DOM elements for the test results in the browser ui.

If there wasn't any browser ui, the parser could be moved to the server, which would mean less demands on the actual browser capabilities for es6 features and what not.

See initial discussion here #54

Document recommended concurrency options

That is: 1 concurrent Travis build and 5 concurrent browser tests (airtap --concurrency 5) for Sauce Labs OSS accounts. For free accounts, 2 concurrent browser tests.

Remove bulk-require

Simply use multiple require calls. May not even need that, when we migrate to tape (#19).

Add license file

MIT, with a copyright notice along the lines of Copyright (c) 2018 Roman Shtylman, Zuul contributors and Airtap contributors.

Update screenshot

A request from Sauce Labs:

If possible, it would be great if you could also update this screenshot to reflect our current branding:
image

Configure CI and get tests passing

  • Create GH machine user
  • Create Sauce Labs account
  • Send email to Sauce Labs to make it an open source account (I ran out of minutes)
  • Exit early in test/auth.js if credentials are missing later
  • Use cross-env in npm test
  • Change tunnel config in mocha-qunit-sauce.js to { type: 'ngrok', bind_tls: true } (I'll explain)
  • Fork browzers to airtap/browsers
  • Use airtap-browsers
  • Activate Travis
  • Put Sauce Labs credentials in .travis.yml Add through Travis settings

Give credit to Sauce Labs

A request from Sauce Labs:

We would also like to request that you give credit to Sauce Labs, via either a text link and/or logo and link on your repo and project website, should there be a pubic-facing site; I've attached logo artwork and a MD file with text. If you'd like to write a blog post about your project we're happy to publish it on the Sauce Labs website, and shoutouts on Twitter are always appreciated!

Files (SVG, PNG and MD files): sauce labs assets.zip

Default to not running sauce labs tests on Travis/CI?

Travis doesn't make encrypted environment variables available when receiving PRs from external contributors. This is a security feature to prevent a random user from making a PR that prints out the environment variables and stealing them.

The problem is that this default behavior means that any test suite that includes airtap automatically fails on every PR from external contributors. So you have to write a custom test script that detects Travis PRs and doesn't run airtap. For example:

var shouldRunBrowserTests = !process.env.TRAVIS_PULL_REQUEST ||
  process.env.TRAVIS_PULL_REQUEST === 'false'

Could airtap be opinionated and handle this common case? Specifically, when running on CI and the Sauce Labs env variables are missing (which happens on PRs), default to just skipping the tests and exiting cleanly?

Or how about a flag to do that? --skip-missing-credentials or --skip-pr

Not compatible with tests using webworkify

I have a test that was working using zuul that uses webworkify to test inside a web worker. With airtap, I get Uncaught TypeError: Cannot read property '0' of undefined inside the browserify headers:

"/Users/jhiesey/Projects/node/stream-http/node_modules/browser-resolve/empty.js":[function (require,module,exports){
arguments[4]["/Users/jhiesey/Projects/node/stream-http/node_modules/airtap/node_modules/browserify/lib/_empty.js"][0].apply(exports,arguments)
},{}]

Hopefully I will have a chance to debug this tomorrow.

Hi everyone!

Hi @mcollina @yoshuawuyts @feross,

Because zuul is unmaintained, @mcollina suggested we spin up a new project (nodejs/readable-stream#320 (comment)). To get us started I forked zuul to this new org (for isolated Travis and Sauce Labs accounts). I also considered smokestack as a starting point but it is not feature-complete when it comes to testing multiple browsers on Sauce Labs.

Possible consumers include readable-stream, memdown and abstract-leveldown.

The main goal, besides basic maintenance like updating node versions, is to reduce the scope. Build something that is easy to maintain. I think we will mostly remove features, not add new ones like BrowserStack support. At the very least, let's remove localtunnel in favor of Sauce Connect (will need defunctzombie/zuul#323) which has proven to be more reliable.

Maybe we can also remove phantomjs, electron and frameworks other than tap(e)? I'll open issues to discuss this.

@mcollina I did not know who you meant by "add all of us", so can you please add
whoever you think is willing to help out? Thanks!

@ralphtheninja @juliangruber want to join? :)

Releases

I think there will be a lot of changes now in the beginning and I just want to communicate that I think it's important that we release often, until we feel the API has stabilized and we're ready for 1.0.0.

We have memdown using it already and maybe we should try getting some other projects running it as well, so we can get feedback if there's any problems.

Use `husky` with `lint-staged` as a precommit hook

It'll help ensure that the files are linted before being pushed to remote (or any other branch, for that matter!)

I have not had the pleasure of using StandardJS yet in any of my projects, but I'm sure this can be done. ๐Ÿ˜…

Motivation

To avoid commits like 4b60f02. ๐Ÿ˜ฌ

/cc @feross

Improve error handling in Zuul.run()

The error handling in Zuul.run() is a bit flakey. It takes a callback but it's used for both reporting error and results. It should be a plain cb(err, result) callback.

Also, there are multiple error paths that aren't handled properly.

standard will complain ๐Ÿ˜„

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.