Interactions

Element Interactions

Playwright can interact with HTML items, simulating user actions like clicking, entering text and selecting options.

##Input text The fill method can be used to simulate entering text On HTML elements that accept this action, like <textarea>, <input > and associated <label>.

This method needs two arguments: page.fill(selector, text)

Examples

await page.fill('#name', 'Peter');
await page.fill('#date', '2020-02-02');
await page.fill('#time', '13-15');
await page.fill('#local', '2020-03-02T05:15');
await page.fill('text=First Name', 'Peter');

fill can also be called from a selected element:

const element = await page.$('#name');
element.fill('Vote for Pedro');

Checking Checkboxes and Radio Buttons

The check and uncheck methods can be used check an uncheck input[type=checkbox], input[type=radio], [role=checkbox] and associated labels.

These methods needs two arguments: page.check(selector) page.uncheck(selector)

Examples

await page.check('#agree');
await page.uncheck('#subscribe-label');
await page.check('text=XL');

check and uncheck can also be called from a selected element

Dropdowns

The selectOption method is used to select one o several options on a dropdown.

This method needs two arguments: page.selectOption(selector, value) page.selectOption(selector, [values])

Examples

Select by option value

await page.selectOption('select#colors', 'blue');

Select by option label

await page.selectOption('select#colors', { label: 'Blue' });

Selecting several options

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

selectOption can also be called from a selected element:

const option = await page.$('#best-option');
await page.selectOption('select#colors', option);

Mouse operations

Playwright can emulate common mouse operations, like clicking, double clicking and hovering.

Examples

Single click

await page.click('button#submit');

Double click

await page.dblclick('#item');

Right click

await page.click('#item', { button: 'right' });

Shift and click

await page.click('#item', { modifiers: ['Shift'] });

Hover over element

await page.hover('#item');

Click on specific position

await page.click('#item', { position: { x: 0, y: 0} });

##Typing characters The type method can be used to simulate entering one character at a time, in cases where such an event is needed.

This method needs two arguments: page.type(selector, text)

Examples

await page.type('#area', 'Hello World!');

##Key press The press method can be used to simulate entering special keys, such as Enter, Shift, and their combinations

This method needs two arguments: page.press(selector, key) page.press(selector, keyCombination)

Key list

This is the list of the most used valid key names:

  • Alt
  • AltGraph
  • CapsLock
  • Control
  • F1 - F12
  • FnLock
  • Hyper
  • Meta (Windows Logo)
  • NumLock
  • ScrollLock
  • Shift
  • Enter
  • Tab
  • " " (Space)
  • ArrowUp
  • ArrowDown
  • ArrowLeft
  • ArrowRight
  • End
  • Home
  • PageDown
  • PageUp
  • Backspace
  • Insert

The full key list can be found here

Examples

await page.press('#name', 'Shift+A');
await page.press('#name', 'Shift+ArrowLeft');

##File upload The setInputFiles method can be used to upload files to the proper HTML component.

This method needs two arguments: page.fill(selector, filenamePath) page.fill(selector, [filenamesPaths])

the default file path is the working directory

Examples

await page.setInputFiles('input#upload', 'myfile.pdf');

await page.setInputFiles('input#upload', ['file1.txt', 'file2.txt']);

await page.setInputFiles('input#upload', []);

// From memory
await page.setInputFiles('input#upload', {
  name: 'file.txt',
  mimeType: 'text/plain',
  buffer: Buffer.from('this is test')
});
← NavigationAuditing →