ScreenshotNeo

BlogHow-to

Puppeteer AutofillData: Autofill Forms with Puppeteer

AutofillData could not be matched to a verified project. Here’s what Puppeteer and Chrome can show about autofill, with runnable code and the method’s limits.

By the ScreenshotNeo team4 October 20267 min read

Direct answer: “AutofillData” could not be matched to an authoritative package or repository in the research for this guide, so there are no verified AutofillData installation steps or APIs to provide. If your goal is to inspect which form fields Chrome recognizes for autofill, a documented research method is to launch Puppeteer with Chrome’s show-autofill-signatures flag and inspect the resulting pm_parser_annotation attributes. This exposes Chrome’s client-side annotations; it does not reliably reproduce everything Chrome might autofill for a real user.

The method depends on Chrome’s new headless mode. The cited research says the annotations are available to Puppeteer crawlers using that mode, including Chrome code in the //chrome path, and not the older headless implementation. Read the research paper.

1. What “AutofillData” means here

The available research does not establish that AutofillData is a particular package. Treat that name as unidentified until you have a repository URL, package registry entry, or documentation from its maintainer. In particular, do not assume a package name, version, method signature, compatibility range, or maintenance status based on the title alone.

The verified adjacent technique is useful for browser research: Chrome can attach client-side parser annotations to form inputs. Examples in the paper include username_element and new_password_element. These are browser-derived signals about how Chrome classifies fields, not a promise that a user’s profile will fill them.

2. Inspect Chrome’s autofill annotations with Puppeteer

The following script launches Puppeteer’s bundled Chrome in new headless mode, enables the signature flag, visits a page, and prints annotated inputs. It reports the annotations as seen by that browser process. It does not enter credentials or submit the form.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: true, // Puppeteer's current headless mode
    args: ['--show-autofill-signatures'],
  });

  try {
    const page = await browser.newPage();
    await page.goto('https://example.com/login', {
      waitUntil: 'domcontentloaded',
      timeout: 30000,
    });

    const fields = await page.$$eval('input', (inputs) =>
      inputs.map((input) => ({
        type: input.type,
        name: input.name,
        id: input.id,
        autocomplete: input.getAttribute('autocomplete'),
        annotation: input.getAttribute('pm_parser_annotation'),
      })).filter((field) => field.annotation)
    );

    console.log(JSON.stringify(fields, null, 2));
  } finally {
    await browser.close();
  }
})().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

Replace https://example.com/login with a page you are authorized to inspect. The script uses the Puppeteer Node.js API; if Puppeteer is not already part of your project, consult its official setup instructions before adding it. The research does not identify an AutofillData package, so this example does not install or call one.

Read the output

An empty array means this run did not expose any annotated inputs matching the query. It does not prove the page has no autofillable fields. Check that the page finished rendering its form, that the target inputs are in the main document rather than a frame, and that the Chrome build and launch mode support the research method. An annotation value is a classification clue, not a filled value.

3. Important limits and edge cases

  • Client-side only: Chrome also has a server-side autofill component that outside researchers cannot access through this technique. The paper cautions that the client annotations may not match a user’s complete autofill experience.
  • Headless mode matters: use the new headless implementation described by the study. Do not assume the older headless implementation exposes the same annotations.
  • Dynamic forms: if the page adds or replaces inputs after navigation, wait for a stable selector or wait for the application to render before collecting fields.
  • Iframes: page.$$eval queries the main frame. For fields inside child frames, enumerate page.frames() and evaluate in the relevant frame.
  • Shadow DOM: a page-level input query may not see controls inside shadow roots. Inspect the component’s exposed DOM or use page-specific instrumentation.
  • Authorization and privacy: inspect only pages you have permission to access. Avoid logging real personal data or credentials; this example prints field metadata and the annotation only.

4. Chrome’s experimental autofill event is a separate feature

Chrome for Developers describes an autofill event that can signal an actual autofill attempt and expose proposed values through event.autofillValues. A page may call event.refill() after it updates dependent controls. The article describes this as an origin-trial feature starting in Chrome 147, so check the target Chrome version and origin-trial requirements before relying on it. It is not the same thing as reading pm_parser_annotation attributes in Puppeteer, and it is not a universally available stable API. Chrome for Developers: The autofill event is in origin trial.

document.addEventListener('autofill', (event) => {
  console.log('Autofill attempt for:', event.target);
  console.log('Proposed values:', event.autofillValues);

  // After updating dependent form controls, an eligible implementation
  // may call event.refill() as described by the Chrome origin-trial docs.
});

This page-side example illustrates the documented event shape; it does not enable the origin trial or make the feature available in browsers that do not support it.

5. Troubleshooting

Symptom Likely cause What to do
No pm_parser_annotation attributes The relevant flag was not passed, the form has not rendered, or this Chrome/headless configuration does not expose the annotations. Confirm the launch argument is --show-autofill-signatures, wait for the form selector, and use the new headless mode described in the paper.
The annotation is present, but Chrome would not fill the field for a user The annotation reflects client-side heuristics and does not include Chrome’s inaccessible server-side component or a user’s saved data and settings. Interpret it as research evidence only. Validate user-facing behavior separately in an appropriate interactive browser session.
The script reports no inputs The form may be inside a child frame, shadow root, or not yet loaded. Wait for the page’s form, inspect its frames, and account for component encapsulation.
Navigation times out The page may keep network connections open or take longer than the chosen timeout. Use a navigation condition suited to the page, such as domcontentloaded, and set a timeout appropriate for your environment. Then wait for the specific form selector.
The autofill event never fires The browser may not support the origin-trial feature, the origin may not be enrolled, or no autofill attempt occurred. Check Chrome’s current origin-trial documentation and test in a supported configuration. Do not treat missing events as proof the form is not autofillable.
“AutofillData” import or method cannot be found The title’s project identity is unresolved; package-specific instructions are not verified. Get the exact repository or package link and confirm its published documentation before using project-specific APIs.

6. Reliability, performance, and cost

This is browser automation, so each run depends on launching Chrome and loading the target page. For repeatable research, record the Chrome/Puppeteer environment, target URL, timestamp, navigation outcome, and whether annotations were found. Keep retries bounded, and distinguish a page-load failure from a successful inspection with zero annotations.

The research dossier provides no benchmark for this technique, so there is no substantiated runtime or accuracy figure to report. Operational cost depends on the compute used to run browser instances and the number of pages inspected. Reuse browser processes where appropriate for a crawler, but isolate sessions when pages or credentials require it. Do not interpret a faster load or a higher annotation count as improved autofill accuracy without a separate evaluation.

7. Or skip the browser setup

If you need a screenshot of a page for visual review rather than Chrome’s autofill annotations, ScreenshotNeo is a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF. A screenshot does not reveal or test Chrome’s autofill annotations, so use the Puppeteer method above for that task.

For a screenshot, see the ScreenshotNeo API docs and make one request:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots, and 1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card.

8. FAQ

Can Puppeteer use Chrome Autofill?

Puppeteer can launch Chrome to inspect browser behavior. The cited research method exposes client-side autofill annotations under the specified flag and new headless mode; it does not guarantee that Chrome will fill a field for a user.

Does this guide document the AutofillData package?

No. The project could not be identified from the available research. Provide its exact repository or package listing to establish project-specific instructions.

Can I use the annotations to test saved passwords?

The annotations indicate Chrome’s client-side field classification. They are not a report of a user’s saved credentials, and this example neither retrieves nor submits credentials.