https://github.com/featurist/browser-monkey

Reliable DOM testing
https://github.com/featurist/browser-monkey

browser browser-monkey css-selector dom electron karma mocha testing

Last synced: about 2 months ago
JSON representation

Reliable DOM testing

• Host: GitHub
• URL: https://github.com/featurist/browser-monkey
• Owner: featurist
• Created: 2015-06-09T14:18:41.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-01-11T19:04:20.000Z (almost 2 years ago)
• Last Synced: 2024-09-14T12:45:26.487Z (3 months ago)
• Topics: browser, browser-monkey, css-selector, dom, electron, karma, mocha, testing
• Language: JavaScript
• Homepage: https://browsermonkey.org
• Size: 2.67 MB
• Stars: 53
• Watchers: 14
• Forks: 6
• Open Issues: 44
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# browser monkey [![npm version](https://img.shields.io/npm/v/browser-monkey.svg)](https://www.npmjs.com/package/browser-monkey) [![npm](https://img.shields.io/npm/dm/browser-monkey.svg)](https://www.npmjs.com/package/browser-monkey) [![CircleCI](https://circleci.com/gh/featurist/browser-monkey.svg?style=svg)](https://circleci.com/gh/featurist/browser-monkey) [![Gitter chat](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/featurist/stack)

Reliable DOM testing

```bash

npm install browser-monkey

```

Browser Monkey is a DOM assertion library. It helps you write framework agnostic browser tests that are reliable in the face of asynchronous behaviours like animations, AJAX and delayed rendering. It also helps you to write tests that exhibit the semantic meaning of the page, as opposed to a jumble of CSS selectors.

* automatically waits for commands and assertions.

* create rich DSLs for your page structure.

* framework agnostic: works with React, Angular, jQuery, [Hyperdom](https://github.com/featurist/hyperdom) and many many more.

* can simulate text entry and clicks.

* returns promises that resolve when the elements are found.

Here is an [example project](https://github.com/dereke/web-testing) that demonstrates how to use browser-monkey with Karma.

[@dereke](https://github.com/dereke) has made an excellent [video](https://www.youtube.com/watch?v=WQZ2eIfmfEs) of a TDD session using browser-monkey.

# Docs

[Docs Website](https://browsermonkey.org)

# example

```js codesandbox: basic-example

import createMonkey from "browser-monkey/create";

import createTestDiv from "browser-monkey/lib/createTestDiv";

import hyperdom from "hyperdom";

import App from "./app";

describe("beer app", () => {

  let page;

  beforeEach(() => {

    const $testContainer = createTestDiv();

    hyperdom.append($testContainer, new App());

    page = createMonkey($testContainer);

  });

  it("greets me", async () => {

    await page.find("h1").shouldHave({ text: "Hello Lubbers" });

  });

  it("shows me beer", async () => {

    await page.click("Beer");

    await page.shouldHave({ text: "Punk IPA" });

  });

});

```

Run this example

## We're hiring!

Join our remote team and help us build amazing software. Check out [our career opportunities](https://www.featurist.co.uk/careers/).