Skip to main content

Creating your first test

Tests are composed in markdown files and stored in the <project root>/testabulous/tests folder. Each file consists of an optional title, a set of "givens" which are global to all the tests in the file and a collection of tests. Each test has its own title and can have it's own set of givens. Whether top level or test specific, givens should always be introduced with the title Given: at the appropriate title level.

Note that the titles are hierarchical. In other words the top level title should have the highest level (fewest #) and test titles should be one level below e.g. if the top level title is # Authentication then test titles should be ## Test: Required fields. Any title with a lower level e.g. ### Comments will be ignored.

Both givens and test steps are specified as lists of statememts written in plain English. The first blank line after a block of statememts will end the block. Everything after the block is ignored until the next test title so this is a good place

Example test layout

Ideally you should start your test file with a title that describes the area of interest for the tests in the file. For example, if you're testing authentication features, then use the title "Authentication".

Next define any givens that are relevant to all the tests. Givens should be a list of single statememts. For example, you might want to explain how to find a button based on it's label or an input field based on its name. Use the title Given: to introduce a block of givens.

Once you've defined all your givens, then it's time to define your first test. The test should have a title prefixed with Test:. The test steps should be a simple list of statememtss where each statememts is a single step. Note that identifiers should be enclosed in quotes. Either single or double quotes are allowed.

# User Registration

## Given:

- A field is invalid if it has the class 'input-error'
- A field is valid if it does not have the class 'input-error'
- The "Signup" button has the ID "signup-button"
- The "name" field is identified by the name "name"
- The "email" field is identified by the name "email"
- The "password" field is identified by the name "password"
- The "password confirmation" field is identified by the name "password2"
- The "name" error message is in a label with the ID "name-error"
- The "email" error message is in a label with the ID "email-error"
- The "password" error message is in a label with the ID "password-error"
- The "password confirmation" error message is in a label with the ID "password2-error"

## Test: Required fields

- Go to http://demo.testabulous.com/signup
- The page title should be "testabulous - Signup"
- Click the "Signup" button
- The "name" field should be invalid
- The "name" error message should be "Your name is required"
- The "email" field should be invalid
- The email error message should be "Your email is required"
- The "password" field should be invalid
- The "password" error message should be "A password is required"
- The "password confirmation" field should be invalid

## Test: Password and confirmation length/match

- Go to http://demo.testabulous.com/signup
- Type "1234567" in the "password" field
- Click the "Signup" button
- Wait 1 second
- The "password" field should be invalid
- The password error message should be "The password is too short"
- Type "12345678" in the password field
- Click the "Signup" button
- Wait 1 second
- The "password" field should be valid
- The "password confirmation" field should be invalid
- The password confirmation error message should be "A password confirmation is required"
- Type "12345678" in the password field
- Type "12345678" in the "password confirmation" field
- Click the "Signup" button
- Wait 1 second
- The "password confirmation" field should be valid

## Test: Create a valid user

### Given:

- The "Get started" link has the ID "link-get-started"

### Test

- Go to http://demo.testabulous.com/
- Click on the "Get started" link
- The current url path should be "/signup"
- Store {{_random(10nlLs)}} in a variable called “password”
- Type “John Doe” in the name field
- Type “john-{{_random(8nl)}}@lingobot.io” in the email field
- Type “{{password}}” in the password field
- Type “{{password}}” in the password confirmation field
- Click the "Signup" button
- The page title should be "testabulous - Dashboard"

## Test: Login the test user

### Given:

- The "Login" button has has the aria label "login"

### Test

- Run the script create_test_user.mjs
- Store the environment variable TEST_USER_EMAIL in the variable "test_user"
- Store the environment variable $TEST_USER_PASSWORD in the variable "test_pass"
- Go to http://testabulous-local.com/login
- Type "{{test_user}}" in the email field
- Type "{{test_pass}}" in the password field
- Click the "Login" button
- Wait for navigation
- The page title should be "testabulous - Dashboard"

Here's an example testing the demo Svelte app (npm create svelte@latest my-app).

# First test script

## Test: Home page

### Given

* The plus button is a button with the aria label "Increase the counter by one"
* The result is the last child in the div with the class "counter-digits"

### Test

* Navigate to http://localhost:5173/
* Click on the plus button
* Wait 1s
* The result should show "1"