Tell the browser which thing you mean

You can point at a field with a mouse. A test file needs another way to say which field it means. That description is called a selector.

A page element is one part of a web page: a heading, text field, button, or message. A selector is a short description used to find an element. Bruster’s test commands use CSS selectors. CSS is the language websites use to style pages; its selectors also let a test identify a particular element.

Start with IDs

An element can have an ID, which is a name written into the page’s HTML—the code that defines the page’s structure. Think of it as a label attached to one particular element. The practice page shows useful IDs beside its controls so you can learn without searching through a large page.

The name field has the ID name. Its selector is #name. The # means “find the element with this ID.” It is part of the selector, not part of the value you type into the field.

In a test file, put the selector in double quotes. For example, fill "#name" "Ada Lovelace" means “find the name field and replace its contents with Ada Lovelace.” Without the quotes, the # would start a comment.

Find something inside something else

The receipt contains more than one piece of text. It has a heading and a paragraph. The selector #result h2 means “find an h2 heading inside the element whose ID is result.”

The space between the two parts means “inside”. You do not need to know every HTML tag. For these lessons, remember that h1 and h2 are headings, p is a paragraph, and button is a button.

This lets you check just the receipt heading rather than all of the text inside the receipt at once.

Find the submit button

Our button selector is button[type=submit]. Read it in two pieces: button chooses a button element, and [type=submit] asks for one whose type is submit.

The property written into the HTML, such as type="submit", is called an attribute. The square brackets are a CSS way to match that attribute. You can copy this selector for the practice page without memorizing the full CSS language.

How do you find selectors on another website?

1. Open the page in your normal browser.
2. Right-click the field or button and choose Inspect. The browser opens its developer tools near the corresponding HTML.
3. Look for an ID such as id="email". If it has a stable, unique ID, #email may be a useful selector.
4. If you are unsure, ask the website’s developer for a stable selector for that control.

A stable selector stays the same when someone changes the layout or colors. Avoid long copied selectors full of positions if a simple ID is available. “The third button in the second panel” can stop meaning the right thing when the page layout changes.

Also check that the selector identifies the control you intend. Some pages contain duplicate or hidden copies of a form. A very broad selector such as input may point to the wrong field.

Try it: translate the selectors

Describe #project, #result p, and button[type=submit] in ordinary words.

Read the translations

The element with ID project; a paragraph inside the element with ID result; and a button whose type is submit. On the practice page, those are the project input, receipt detail line, and submission button.

Before you move on

You know that a selector finds an element, while a value is the text you want to enter or check. They are different jobs, even when both appear inside quotes.