Pen Actions with Selenium

Simulating stylus input (pen pointer) for drawing and pointer events in web apps

Concept

In this practice lab, you will learn how to simulate a pen/stylus device in Selenium using the Pen pointer type.

A Pen in Selenium is a kind of pointer input (like mouse or touch) but with extra properties:

It behaves similarly to a mouse: Move, Press (contact), Release
It also supports pen-specific attributes like: Tilt (X/Y), Twist (rotation)

Important: Chromium-Only

Pen actions are Chromium-only (e.g., Chrome, Edge). They are not supported in Firefox or Safari.

Pen pointer basics

A Pen has 3 main button states:

0 — Touch Contact (default; equivalent to left click / pen tip touching)
2 — Barrel Button (equivalent to right click)
5 — Eraser Button (currently unsupported)

When to use it

When your web app uses pointer events and needs to distinguish pen vs mouse vs touch
When testing drawing canvases, signature pads, or apps that react to stylus tilt/twist

Using setActivePointer with Actions

This is the higher-level, easier approach:

setActivePointer(PointerInput.Kind.PEN,
"default pen")

Tells Selenium to use a pen pointer device for the next pointer actions.

Then you can call: moveToElement(), clickAndHold(), moveByOffset(), release(), perform()

Best Practice

Use this approach when you don't need to customize tilt, twist, etc. Think of it as "mouse Actions but with a stylus identity".

Low-level PointerInput with event properties

For advanced scenarios:

Create a PointerInput of type PEN
Build a Sequence of pointer actions:createPointerMove(), createPointerDown(), createPointerMove(..., eventProperties), createPointerUp()
Use PointerInput.eventProperties() to set:setTiltX(), setTiltY(), setTwist()

Best Practice

Use when your app reads tilt or twist from pointer events. Keep test values consistent to avoid flaky behavior. Start with a fixed offset and simple stroke shapes.

Interactive Practice

Imagine a page called "Pen Drawing Pad" with a simple drawing area:

Pen Drawing Pad

Draw with your pen here

Stroke info

No strokes yet

Draw on the canvas to simulate pen interactions! The stroke info shows the dimensions of your last stroke.

Manual interaction (how a user would do it)

With a real stylus:

Place the pen tip on the top-left side of the Pen Drawing Area.
Press down (touch) and hold contact with the screen.
Drag the pen diagonally down and right (forming a small "L" or diagonal stroke).
Release the pen tip to finish the stroke.
Observe that a line is drawn on the canvas and the Stroke info updates to show something like "Last stroke: 50x50".

Your Selenium script will simulate this exact behavior using pen actions.

Java Code Example

PenActions.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
WebElement pointerArea = driver.findElement(By.id("pointerArea"));

Actions actions = new Actions(driver);

actions
        .setActivePointer(PointerInput.Kind.PEN, "default pen")
        .moveToElement(pointerArea)
        .clickAndHold()
        .moveByOffset(50, 0)
        .moveByOffset(0, 50)
        .release()
        .perform();

driver.quit();

Code Breakdown

driver.findElement(By.id("pointerArea")): Locates the Pen Drawing Area element using its id="pointerArea".
Actions actions = new Actions(driver);: Creates a new Actions builder attached to the current WebDriver instance.
setActivePointer(PointerInput.Kind.PEN, "default pen"): Tells Selenium to use a pen pointer device (stylus) instead of a default mouse for the upcoming pointer actions."default pen" is an internal name for this virtual pen.
moveToElement(pointerArea): Moves the pen pointer to the center of the Pen Drawing Area. This is the starting point of the stroke.
clickAndHold(): Simulates pen contact with the drawing surface (button 0 down). Equivalent to pressing the pen tip down and keeping it in contact.
moveByOffset(50, 0): While still holding the pen down, moves the pointer 50 pixels to the right. Draws the first segment of the stroke.
moveByOffset(0, 50): Continues moving the pen, now 50 pixels down from the last position. Draws the second segment, forming a small "L"-shaped stroke.
release(): Simulates lifting the pen tip from the drawing area (button 0 up). Ends the stroke, which should trigger any "stroke complete" logic in the app.
perform(): Executes all the queued pen actions in order, as a single interaction sequence.
driver.quit();: Closes the browser and ends the WebDriver session once the pen interaction lab is complete.

Pro Tip

Chromium-Only Feature

Remember that Pen actions are Chromium-only—always run these tests on Chrome/Edge (or other Chromium-based drivers).

Test with Mouse First

Start by testing with a mouse-based version of the test (same moves, but default pointer), then switch to Pen when your app uses pointer events and cares about the device type.

Simple Deterministic Paths

Keep drawing paths simple and deterministic (fixed offsets like 50,0 then 0,50) to avoid flaky tests caused by tiny movement differences.

Concept

In this practice lab, you will learn how to simulate a pen/stylus device in Selenium using the Pen pointer type.

A Pen in Selenium is a kind of pointer input (like mouse or touch) but with extra properties:

It behaves similarly to a mouse: Move, Press (contact), Release

It also supports pen-specific attributes like: Tilt (X/Y), Twist (rotation)

Important: Chromium-Only

Pen actions are Chromium-only (e.g., Chrome, Edge). They are not supported in Firefox or Safari.

Pen pointer basics

A Pen has 3 main button states:

0 — Touch Contact (default; equivalent to left click / pen tip touching)
2 — Barrel Button (equivalent to right click)
5 — Eraser Button (currently unsupported)

When to use it

When your web app uses pointer events and needs to distinguish pen vs mouse vs touch
When testing drawing canvases, signature pads, or apps that react to stylus tilt/twist

Using setActivePointer with Actions

This is the higher-level, easier approach:

setActivePointer(PointerInput.Kind.PEN,
"default pen")

Tells Selenium to use a pen pointer device for the next pointer actions.

Then you can call: moveToElement(), clickAndHold(), moveByOffset(), release(), perform()

Best Practice

Use this approach when you don't need to customize tilt, twist, etc. Think of it as "mouse Actions but with a stylus identity".

Low-level PointerInput with event properties

For advanced scenarios:

Create a PointerInput of type PEN
Build a Sequence of pointer actions:createPointerMove(), createPointerDown(), createPointerMove(..., eventProperties), createPointerUp()
Use PointerInput.eventProperties() to set:setTiltX(), setTiltY(), setTwist()

Best Practice

Use when your app reads tilt or twist from pointer events. Keep test values consistent to avoid flaky behavior. Start with a fixed offset and simple stroke shapes.

Interactive Practice

Imagine a page called "Pen Drawing Pad" with a simple drawing area:

Pen Drawing Pad

Draw with your pen here

Stroke info

No strokes yet

Draw on the canvas to simulate pen interactions! The stroke info shows the dimensions of your last stroke.

Manual interaction (how a user would do it)

With a real stylus:

Place the pen tip on the top-left side of the Pen Drawing Area.
Press down (touch) and hold contact with the screen.
Drag the pen diagonally down and right (forming a small "L" or diagonal stroke).
Release the pen tip to finish the stroke.
Observe that a line is drawn on the canvas and the Stroke info updates to show something like "Last stroke: 50x50".

Your Selenium script will simulate this exact behavior using pen actions.

Java Code Example

PenActions.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
WebElement pointerArea = driver.findElement(By.id("pointerArea"));

Actions actions = new Actions(driver);

actions
        .setActivePointer(PointerInput.Kind.PEN, "default pen")
        .moveToElement(pointerArea)
        .clickAndHold()
        .moveByOffset(50, 0)
        .moveByOffset(0, 50)
        .release()
        .perform();

driver.quit();

Code Breakdown

driver.findElement(By.id("pointerArea")): Locates the Pen Drawing Area element using its id="pointerArea".
Actions actions = new Actions(driver);: Creates a new Actions builder attached to the current WebDriver instance.
setActivePointer(PointerInput.Kind.PEN, "default pen"): Tells Selenium to use a pen pointer device (stylus) instead of a default mouse for the upcoming pointer actions."default pen" is an internal name for this virtual pen.
moveToElement(pointerArea): Moves the pen pointer to the center of the Pen Drawing Area. This is the starting point of the stroke.
clickAndHold(): Simulates pen contact with the drawing surface (button 0 down). Equivalent to pressing the pen tip down and keeping it in contact.
moveByOffset(50, 0): While still holding the pen down, moves the pointer 50 pixels to the right. Draws the first segment of the stroke.
moveByOffset(0, 50): Continues moving the pen, now 50 pixels down from the last position. Draws the second segment, forming a small "L"-shaped stroke.
release(): Simulates lifting the pen tip from the drawing area (button 0 up). Ends the stroke, which should trigger any "stroke complete" logic in the app.
perform(): Executes all the queued pen actions in order, as a single interaction sequence.
driver.quit();: Closes the browser and ends the WebDriver session once the pen interaction lab is complete.

Pro Tip

Chromium-Only Feature

Remember that Pen actions are Chromium-only—always run these tests on Chrome/Edge (or other Chromium-based drivers).

Test with Mouse First

Start by testing with a mouse-based version of the test (same moves, but default pointer), then switch to Pen when your app uses pointer events and cares about the device type.

Simple Deterministic Paths

Keep drawing paths simple and deterministic (fixed offsets like 50,0 then 0,50) to avoid flaky tests caused by tiny movement differences.