Playwright Tutorial for Beginners 5 - Performing Actions
Tags: testing, softwaretesting, qualityassurance, playwright
Published: 2023-04-16 17:07:15

---
title: Playwright Tutorial for Beginners 5 - Performing Actions
published: true
date: 2023-04-16 13:05:00 UTC
tags: testing, softwaretesting, qualityassurance, playwright
canonical_url: https://blog.zt4ff.dev/playwright-tutorial-for-beginners-5-performing-actions
series: Testing with Playwright
---

## Test input

You can easily fill-out form fields with `page.fill()`.

`page.fill()` focuses on the element and triggers an `input` event with the specified text. It works on `<input>`, `<textarea>`, `[contenteditable]` and `<label>` associated with an input or text area.

```
const { test } = require('@playwright/test');

test('input text into a test element', async ({ page }) => {
  await page.goto('https://demoblaze.com');
  await page.click('#signin2');
  await page.fill('#sign-username', 'zt4ff');
});

```

> To view how the test ran, you can set the `headless` and `slowMo` property in the `playwright.config.js` file. For instance:

```
// playwright.config.js

// ...
use: {
    launchOptions: {
      slowMo: 400,
      headless: false
    }
// ...

```

`page.type()` can also be used but it differs to `page.fill()` in sense of it sending a `keydown`, `keypress/input` and `keyup` event for each character of the text while `page.fill()` fires only an `input` event on the focused element with the specified text.

`page.type()` fires every necessary keyboard event and you can even set the `delay` of the typing.

## Checkboxes and radio buttons

When working with checkboxes and radio buttons, `page` provide some methods to check, uncheck and get the state of theses input elements (`input[type=checkbox]`, `input[type=radio]` or `[role=checkbox]`.

```
// Check the checkbox
await page.check('#agree');

// Assert the checked state
expect(await page.isChecked('#agree')).toBeTruthy();

// Uncheck by input <label>.
await page.uncheck('#subscribe-label');

// Select the radio button
await page.check('text=XL');

```

## Selecting options from `<select>`

```
// Single selection matching the value
await page.selectOption('select#colors', 'blue');

// Single selection matching the label
await page.selectOption('select#colors', { label: 'Blue' });

// Multiple selected items
await page.selectOption('select#colors', ['red', 'green', 'blue']);

// Select the option via element handle
const option = await page.$('#best-option');
await page.selectOption('select#colors', option);

```

## Using the mouse

You can perform different types of mouse clicks using Playwright. The `.click()` method takes an argument of the element you want to click and optional arguments to define the options for the click event. Some examples use cases:

```
// generic clicking
await page.click('#edit-button');

// double click
await page.dblclick('#edit-button');

// right click
await page.click('#edit-button', { button: 'right' });

// using modifiers (like shift, control...) with the click
// shift + click
await page.click('#edit-button', { modifiers: ['Shift'] });
// ctrl + click
await page.click('#edit-button', { modifiers: ['Control'] });

// define the position point of click on the element
await page.click('#edit-button', { position: { x: 0, y: 0 } });

```

## Using `.dispatchEvent()`

For cases where you want to just trigger events programmatically or trigger a custom event that is not directly implemented in the Playwright API, you can make use of the `.dispatchEvent()` method.

> You can read about creating and triggering events [here](https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events)

```
// trigerring a custom event 'build'
// .dispatchEvent(selector, type[, eventInit, options])
await page.dispatchEvent('#edit-button', 'build')

```