Lesson · 20 min

Click, type, and press keys

What a test can do

A test does what a person does. These are the actions that you will use most.

Action	What it does
`click()`	Clicks the element.
`dblclick()`	Clicks two times quickly.
`hover()`	Moves the pointer over the element.
`fill('text')`	Clears a text field and sets its value to the text.
`clear()`	Clears a text field.
`pressSequentially('text')`	Types the text one key at a time.
`press('Enter')`	Presses one key, or a key combination such as `Control+A`.
`check()` and `uncheck()`	Ticks or unticks a checkbox.
`selectOption('value')`	Chooses an option in a `<select>` list.
`focus()` and `blur()`	Moves the focus into the element, or out of it.

fill sets the whole value at once. Use it in most cases. Use pressSequentially when the page reacts to each key, for example a search box that shows suggestions while you type. After you use fill, the page has one input event. After you use pressSequentially, it has one event for each key.

press accepts the name of a key, such as Enter, Tab, Escape, ArrowDown, Backspace, or one character. Join keys with + to press them together: Shift+Tab, Control+A.

selectOption takes the value of an option, or its text: selectOption({ label: 'Price: low to high' }).

What Playwright checks before it acts

You do not write a pause before an action. Before Playwright clicks, it checks that the element:

is visible, so it has a size and is not hidden,
is stable, so it is not moving,
is enabled, so it is not a disabled button,
receives events, so no other element covers it.

For fill, the element must also be editable. When one of these is not true, Playwright waits and checks again. It gives up after a time limit, and the test fails with a message that tells which check did not pass. You will use this in lesson 7.

Wait for the result of an action

An action returns when the click has happened. It does not return when the page has finished its reaction. When you click Add to cart, the shop sends a request to its server, and the cart count changes a moment later. If your test goes to the cart page at once, the request may not have arrived.

The fix is an assertion. Check the result of the action before the next step.

await card.getByRole('button', { name: 'Add to cart' }).click();
await expect(page.getByTestId('cart-count')).toHaveText('1');

Your turn

The sample app is a small shop. Write four tests.

Tasks

4 to do

Task 1, not checked yet. Add a test named searches for a product. Fill the search box with lamp and press Enter in it. Check that there is one product card (getByTestId('product-card')) and that the heading Desk Lamp is visible.
Task 2, not checked yet. Add a test named sorts by price. Choose the option price-asc in the list with the label Sort by, with selectOption. Check that the first heading of level 2 has the text Sticker Pack.
Task 3, not checked yet. Add a test named changes the quantity. Click Add to cart on the card of Blue Mug. Wait until the cart count is 1. Open the cart, set the quantity of Blue Mug to 3, and check that the subtotal is $36.00.
Task 4, not checked yet. Add a test named types one key at a time. Type lamp into the search box with pressSequentially. Press Backspace once. Check that the box has the value lam.

Task 1 of 4

Add a test named searches for a product. Fill the search box with lamp and press Enter in it. Check that there is one product card (getByTestId('product-card')) and that the heading Desk Lamp is visible.