Git Product home page Git Product logo

burnside's Introduction

Burnside

Test your entire app, end to end, in pure JavaScript

Burnside is an easy to use, modular, and extendable End to End (E2E) testing tool. Burnside leverages the flexibility of JavaScript and the power of modern Browser APIs to inject logic and scripting into your website, without the slowdown of networking for every individual command.

Looking for something more hands on? Check out Burnside's interactive, Test-Driven Tutorial!

Installation

$ npm install --save-dev burnside-cli

Usage

{
  "scripts": {
    "burnside": "burnside ./path/to/tests.js --startup='./exampleServer.sh' --condition='start' --wait=5000 --browsers=chrome,firefox"
  }
}  

Command Line Options

Burnside's CLI supports the following flags:

.alias('b', 'browsers') .alias('t', 'timeout') .alias('s', 'startup') .alias('c', 'condition') .alias('k', 'karmaConfig') .alias('v', 'verbose')

Options Example Purpose
<default> ./path/to/tests.js Your Test File. Webpack is built in so use require for more files.
--verbose -v --verbose Turns up logging and adds request tracing
--startup -s --startup='./exampleServer.sh' An optional startup command for your application.
--condition -c --condition='startup' An optional startup message for Burnside to wait on
--wait -w --wait=500 The amount of time Burnside will wait for the startup condition to be reached, if specified. Defaults to 5000
--browsers -b --browsers=chrome,firefox The browsers Burnside should attempt to use when testing. You're responsible for making sure they are installed and configured. Available: chrome and firefox
--karmaConfig -k --karmaConfig=./burnside.karma.conf.js A relative path to an optional Karma configuration. You can use this to override settings, inject Karma plugins, and configure them while also allowing Burnside to add in its own required Karma configuration to be layered on afterward. For more information visit on how to work with Karma, visit its Documentation

Burnside is a modular ecosystem based on a core that runs inside of a Browser. The CLI bundles Karma and Webpack to load your tests within Chrome, but you can use Burnside's core with any Test Runner you'd like to set up.

If you'd like to configure your own test runner, we've included a Sample project configured to use Karma and Webpack directly.

Test usage

const Burnside = window.Burnside; // or `import Burnside` if you're not using the CLI

const burnside = new Burnside({
  host: 'http://localhost:3000',
  path: '/index.html'
});

// now you can execute any function and capture the result!
burnside
  .exec(['.header'], selector => {
    return document.querySelector(selector);
  })
  .then(value => {
    // assert on value here
  })

For more complete documentation of Burnside, check out our API and Architecture documentation.

Burnside Local Proxy Configuration

Burnside consists of two main moving parts: the Core JS and a Proxy that runs locally in the background that handles injecting Burnside's JS Client into the page. Because the proxy is used by the browsers for every outbound request, we've also added some additional features that can allow you to fine tune your testing.

Burnside's proxy is configured via a .burnside-localproxyrc at the root of your project. Below is a documented example:

{
  "key": "./certs/localhost.privkey.pem", // the key and certificate to use for SSL decryption
  "cert": "./certs/localhost.cert.pem",
  "port": 9888, // the port you want the Proxy to run on
  "extensions": [  // an array of names of Extensions for Burnside to use when injecting the client
    "burnside-dom"
  ]
  "replaceImages": true,  // enables a feature that replaces all images with a default for faster testing (also accepts an image filepath e.g. "./path/to/my/image.png" )
  "injects": [ // an array of urls mapped into injected javascript tags
    "https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.min.js"
  ],
  "request": { // headers to (over)write on outbound network requests
    "headers": {
      "secret-custom-header": "<SHARED-SECRET>"
    }
  },
  "response": { // headers to (over)write on network request responses
    "headers": {
      "Access-Control-Allow-Origin": "*"
    }
  }
}

Note: In order to intercept and decrypt SSL traffic Burnside's Local Proxy utilizes a simple self signed certificate. If you encounter issues decrypting SSL pages, consider regenerating these files with fresh credentials using the script found in /packages/burnside-localproxy/make-cert.sh as a base.

How It Works

Burnside runs your application inside an iframe and uses iframe messaging to communicate between test code and the application. This is in contrast to the approach taken by the Selenium webdriver, which instead uses HTTP to communicate interactions between tests and the application, introducing more network latency and inconsistency to your test suite.

overview.png

Tutorial Setup Instructions

The Burnside tutorial is a set of exercises designed to walk you through how to use Burnside properly and to give you some pointers in the process. To run it, you need to clone the repository and install its dependencies.

System requirements: Node Runtime Installed Matching the package.json specifications

git clone https://github.com/Nike-Inc/burnside.git

cd burnside && npm run tutorial

Now you're all configured! If you'd like to contribute to the Tutorial, please read our Tutorial Developers Guide

License

LICENSE

burnside's People

Contributors

arturoromeroslc avatar benahammond avatar mikethecanuck avatar mrsanz avatar stephendonner 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

burnside's Issues

Buggy scroll restoration on nike.com website

Could you please guide me on how to get in touch with Nike’s website developers regarding a usability bug on nike.com? I have a clear video reproduction of bug related to scroll restoration. That issue is really annoying for me as a customer.

File not found error on "npm run custom-install"

When I followed the following steps

git clone https://github.com/Nike-Inc/burnside.git

cd burnside
npm install && npm run custom-install
npm run tutorial

I got the following error on "npm run custom-install"
ENOENT: no such file or directory, stat '\burnside\packages\burnside-localproxy\lib\cli.js

Thanks in advanced.

What if I want to test against an Ionic app?

Currently I'm diving into some alternatives for e2e testing to decide which to go with in a new project on my company. And the environment consists in an Ionic 3 application with native features, so it's a mostly a webapp but must be run in the mobile device.

Actually I have a setup working to test it this way using Protractor + Appium, and now I'm trying to do the same with Nightwatch as suggested by some people on my team.

As you are proposing this framework to be alternative to Nightwatch I may ask you: does it have the capability to be executed testing against an ionic app right on the device?

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.