Get to know your practice website

Before you automate a page, use it yourself. Knowing how the page behaves makes it much easier to notice when your test does the wrong thing.

Open the practice page in a new tab. Keep this lesson open beside it. The page is a small form called Browser smoke test. It is a learning example: submitting it changes the page in your browser and does not create a project on a server.

Meet the five controls

A control is a part of a page you can use, such as a text field or button. Our practice page has five important controls:

1. Your name: a text field. You can type Ada Lovelace here.
2. Project: another text field. You can type Bruster here.
3. Workflow: a dropdown with three choices. It starts on Navigation check.
4. Include screenshots: a checkbox that starts unchecked.
5. Create smoke test: the button that submits the form.

The name and project fields are required. Required means the form expects you to provide a value before it can be submitted. We will test that rule in a later lesson.

The preview and the receipt are different

The section labeled Form state is a live preview. It changes as you edit the fields. Its text uses a format called JSON, which is simply a way to write named values. You do not need to learn JSON to follow the course.

The preview might contain "project": "Bruster". Read that as “the current project value is Bruster.” For the screenshots setting, true means the checkbox is on; false means it is off.

The receipt appears after a successful submission. It has a heading and a detail line. Unlike the live preview, it describes the last submitted values. If you edit Project afterward, the old receipt stays until you submit again.

This difference gives us two useful questions to test: does the preview show your current edits, and does the receipt show the values you submitted?

Walk through a complete submission

1. Enter Ada Lovelace in Your name.
2. Enter Bruster in Project.
3. Choose Form submission from Workflow.
4. Turn on Include screenshots.
5. Press Create smoke test.

The receipt heading should say Smoke test created for Bruster. The detail line should say Ada Lovelace · Form submission · Screenshots: on. If you are on a small screen, scroll down to find it.

The screenshot checkbox is a value in this demonstration form. Turning it on changes the preview and receipt. It does not itself save an image to your computer. Later, the Bruster screenshot command will do that.

Start over deliberately

Reload the practice page to remove the receipt. Some browsers restore values in form fields after a reload. If that happens, clear the name and project, choose Navigation check, and uncheck Include screenshots yourself.

When Bruster runs separate tests later, it starts each one in a fresh browser session. For now, resetting the page by hand helps you practice describing a known starting point.

Try it: watch the two kinds of state

Submit a project called Garden club. Then change the Project field to Book club without pressing the button. Look at the preview and receipt.

What should you see?

The preview should show Book club. The receipt should still name Garden club. After you press Create smoke test again, the receipt should name Book club.

Before you move on

Be able to point to the name field, project field, dropdown, checkbox, button, live preview, and receipt. You will use those same parts throughout the course.