puppeteer: [Bug]: `keyboard.press('Tab')` does not set active element

Bug expectation

I expect pressing the Tab key to behave as it does in the browser: focus the next focusable element in the document.

Instead, it does not set an active element.

Bug behavior

  • Flaky
  • PDF

Minimal, reproducible example

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.setContent('<input id="login">');

await page.waitForSelector('#login');

await page.keyboard.press('Tab');

const id = await page.evaluate(() => document.activeElement?.id);

if (id !== 'login') {
    throw new Error('login is not active')
}

await browser.close();

Error string

login is not active

Puppeteer configuration

Puppeteer version

19.4.1

Node version

18.12.0

Package manager

npm

Package manager version

8.19.2

Operating system

macOS

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 30

Most upvoted comments

@JakobJingleheimer you can use page.exposeFunction to expose a callback to the app and then synchronize based on that.

No, I don’t think Puppeteer builds lists of focusable elements. You can take a peek at Puppeteer’s code and see commands it sends to the browser using DEBUG=puppeteer:*. keyboard.press('TAB') just sends https://chromedevtools.github.io/devtools-protocol/tot/Input/#method-dispatchKeyEvent and the browser does its own thing.