murer / qunit-page

QUnit Page JS

QUnit Page

A QUnit extension that allows you to easily write clean UI tests.

https://www.npmjs.com/package/qunit-page

Features

• Avoid flaky tests - QUnit Page test structure induces you to think considering the user perspective. Your test is structured in wait for/do something because it helps you to avoid false negatives.

• Write your test in javascript - The browser knows only one language: JavaScript. So, why should we write our test in another language? When we write UI test in another language, we are introducing unnecessary layers. This layer makes it extremely hard to debug false negatives.

• Framework freedom - UI tests are created from the final user perspective. An user doesn't know how the app was made, so why an UI test should know?

• Browser freedom - You need to run tests in your CI tool, probably using a headless browser, like PhantomJS. But sometimes things go wrong... and you want to be free to choose your favorite browser in order to debug it.

Do you want to contribute?

All submissions are welcome. To submit a change, fork this repo, commit your changes, and send us a pull request.

qunit-page's Issues

Documentation

Write a API Documentation.

page.open step should appear on developer panel

We use INTERNAL-STEP for determine if this step should appear or not in developer panel. The step page.open should appear, but should not have this name and not show his function implementation.

Sometimes browser get stuck for a little while

The browser get stuck and you can't, for example, scroll down. I don't know why it happens, maybe it is not our fault :)

Show all function parameters

Currently we are just showing the first parameter of each function in developer panel.

Look in the code for 'FIXME - Show all function parameters'

Warning if there is more than one pageTestInDevelopment

Developer marks which test are being developed like this:

t.pageTestInDevelopment("teste", function(page) {

We should place a warning if we have more than one test in development.

Highlight each parameter that was find

When a function get stuck, the first thing that we like to now is: which parameter was not find?

Before and after in development panel

Show when test is paused and waiting for new steps

Create a more real scenario

I was thinking in a flow this:

1. login
2. include a new customer
3. search for this customer

This could be our site example

Add new step: we are adding more than one stepWaitForResume

The problem with this behaviour is that when you rerun a test they stop at the first stepWaitForResume

Use \t instead of ".." when showing the function in developer panel

Warning if there is more than one pageTestInDevelopment

The user should mark the test as 'in development' using the method below:

t.pageTestInDevelopment("teste", function(page) {

We should place a warning if we have more than one test in development.