Table of contents

How to Click, Type, and Hover with Playwright

Users normally access most website functionality through clicks, keystrokes etc. Playwright allows us to replicate these events by referencing elements on the page using User-first Selectors.

Clicking is the default way of selecting and activating elements on web pages, and will appear very often in most headless scripts.

import { test, expect } from '@playwright/test';

test('can click log in', async ({ page }) => {
 await page.goto('https://danube-web.shop/');
 await page.getByRole('button', { name: 'Log in' }).click();
});

For the times when even the humble click fails, you can try the following alternatives:

1. await page.click('#login', { force: true }); to force the click even if the selected element appears not to be accessible
2. await page.$eval('#login', elem => elem.click()); to run the click inside the webpage
3. await page.dispatchEvent('#login', 'click'); to directly dispatch the click event on the element

A popular pattern among web pages is exposing additional information or functionality when the user hovers the mouse cursor over a specific item. Examples include, menus, previews and dialogs containing extra information on the item.

test('hover over sign in', async ({ page }) => {
 await page.goto('https://danube-web.shop/');
 await page.getByRole('button', { name: 'Log in' }).click();
 await page.getByRole('button', { name: 'Sign In' }).hover();
});

Note that in this example we’re not asserting anything, since our web example doesn’t do any element updates on hover.

Focussing on specific UI elements allows the user to interact with them without clicks. It can also result in a proactive reaction from the webapp, such as displaying suggestions.

test('Focus on email field', async ({ page }) => {
 await page.goto('https://danube-web.shop/');
 await page.getByRole('button', { name: 'Log in' }).click();
 await page.getByPlaceholder('Email').focus()
});

We can simulate typing on a real keyboard using page.type():

test('testAlpha', async ({ page }) => {
 await page.goto('https://danube-web.shop/');
 await page.getByRole('textbox').focus();
 await page.getByRole('textbox').fill('catcher');
 await page.getByRole('button', { name: 'Search' }).click();
 await expect(page.locator('#app-content')).toContainText('Rye');
});

Single key presses can also be executed. For example, to press the Enter key:

• Playwright: await page.press('Enter');

Key presses can also be sent to a specific element:

await (await page.$('input[type="text"]')).press('Enter');

We can also hold down and release one or more keys, possibly combining them to use keyboard shortcuts:

await page.keyboard.down('Control')
await page.keyboard.press('V')
await page.keyboard.up('Control')

You can run (from the terminal) the above examples as follows:

$ node basic-click-type.js

1. The related official documentation of Playwright
2. Finding effective selectors