How to Click, Type, and Hover with Playwright

If you’re using Playwright for end-to-end testing, you should check out Playwright Check Suites and start testing in production.

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

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

basic-click.spec.ts

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()
})

Hovering

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.

basic-hover.spec.ts

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

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

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.

basic-focus.spec.ts

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

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()
});

Typing

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

basic-type.spec.ts

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

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:

npx playwright test basic-click-type.ts

Bugs don’t stop at CI/CD. Why would Playwright?

Sign up and start using Playwright for end-to-end monitoring with Checkly.

Further reading

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