Plus.garden NPM

Plus.garden!

Garden is a BDD testing framework for browser based apps and websites.

It's built on Node.js, Сucumber.js, Selenium WebDriver API.

Main Features
Simple API to manage browser (WebDriver)
Using CSS3 selectors to interact with DOM
All network interactions data are accessible within the tests (headers, body, size etc)
Built-in command-line test runner
Head and headless browser testing (phantom.js, chrome, firefox)

Requirements

node.js

Getting started

Make a new directory, and cd into it:
```
mkdir my-new-project && cd $_
```
Setup garden environment by generator-garden
```
npm install -g yo generator-garden
```
Then generate your new project:
```
yo garden
```

Run first test

NOTE: If you use plus.garden.webdriver, please start Selenium server first.
node garden.js test 

It execute next scenario

  Scenario: I want to see good health
    Given  I am on external host "https://twitter.com/"
    Then   status code should be 200
    Then   take screenshot

Usage

Generator of garden generates the simplest scenario by default:

your folder/features/Health.feature

@webdriver.init @webdriver.quit
Feature: Health feature

  @health
  Scenario: I want to see good health
    Given  I am on external hosts "https://twitter.com/" with element
    Then   take screenshot

with step defenitions that cover this, it looks like:

your folder/features/step_definitions/common.js

var {defineSupportCode} = require('cucumber');
defineSupportCode(function({ Given, Then }) {
    Given(/^I am on "(.+)"/, function (url, callback) {
        this.browser.visit(url).then(callback);
    });

    Given(/^I am on external host "(.+)"/, function (url, callback) {
        this.browser.visitExternal(url).then(callback);
    });

    Given(/^I am on homepage$/, function (callback) {
        this.browser.visit('/').then(callback);
    });

    Given(/^I should be on "([^"]*)" page$/, function(expectedTitle, callback) {
        this.browser.assertTitle(expectedTitle).then(callback);
    });

    Then(/^take screenshot$/, function (callback) {
        this.browser.saveScreenshot('.screen.png').then(callback);
    });
});

Full example of this you can find in features folder of Generator of garden:

features/Health.feature # feature file
features/step_definitions/common.js # javascript support
- More details about features and definitions
- Webdriver Module you can find here
- API Reference you can find here

Fixtures

Usually we need fixtures in our applications to have some sandbox. This functionality available via modules. For example mongodb fixtures looks like this:

    //users.js
    exports.users = [
        { name: 'Gob' },
        { name: 'Buster' },
        { name: 'Steve Holt' }
    ];

and garden loads this in tests and in CLI.

./garden.js fixtures.load
./garden.js fixtures.drop

For now garden supports mongodb and mysql fixtures via modules. Feel free to develop new ones.

For more examples please take a look:

MongoDB fixtures mongo fixtures loader
MySQL fixtures mysql fixtures loader

RESTFul API testing

When we develop web-service/micro-services we need to test RESTFul API. That is great ability to test api and have some user friendly specification for this. It looks like this one:

    # demo/get.feature

    Feature: Make a GET request
        In order to programmatically access
        As a Web Service User
        I need to have an ability to make a GET request and check response

        Scenario: Make a GET request to Fake Online REST API
          When I make GET request to "http://jsonplaceholder.typicode.com/posts/1"
          Then the status code should be 200
           And content type should be "application/json; charset=utf-8"
           And the JSON response should be:
           """
           {
             "userId": 1,
             "id": 1,
             "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
             "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
           }
           """