咨询：如何在Puppeteer中为无name/id的输入框输入文本

I’ve run into this exact scenario plenty of times—inputs that don’t have a name or ID, leaving you scratching your head when standard selectors fail. Let’s break down reliable solutions using the title or value attributes you do have:

1. Targeting by Title Attribute #

Title attributes are often used for accessibility or tooltips, and they make great selectors when formatted correctly.

Exact Match #

Use a CSS attribute selector to target the input with an exact title match. Always wait for the element to be visible first—critical for dynamic pages:

await page.waitForSelector('[title="Your Exact Title Text"]', { visible: true });
await page.type('[title="Your Exact Title Text"]', 'Your Input String');

Partial Match #

If the title is long or includes dynamic text, use partial matching operators to broaden your target:

• *= : Contains the specified text anywhere in the title
• ^= : Starts with the specified text
• $= : Ends with the specified text

Example for a title that contains "Email":

await page.waitForSelector('[title*="Email"]', { visible: true });
await page.type('[title*="Email"]', 'user@example.com');

2. Targeting by Value Attribute #

Value attributes can be trickier because they often represent the initial default value, not the current input state. But they still work great for elements with fixed initial values.

Exact Initial Value Match #

Use a CSS selector for the exact initial value:

await page.waitForSelector('[value="Default Input Text"]', { visible: true });
await page.type('[value="Default Input Text"]', 'New Custom Text');

If the Value is Dynamic (Post-Load) #

If the value changes after the page loads, use page.evaluate() to directly manipulate the DOM element (since CSS selectors only target the initial value):

await page.waitForSelector('input[value*="Partial Default Text"]', { visible: true });
await page.evaluate(() => {
  const input = document.querySelector('input[value*="Partial Default Text"]');
  if (input) {
    input.value = 'Your New Input';
    // Trigger input/change events if needed (some sites require this for validation)
    input.dispatchEvent(new Event('input'));
    input.dispatchEvent(new Event('change'));
  }
});

3. Fallback: XPath Selectors #

XPath is super flexible for edge cases where CSS selectors fall short. Use it to target title or value attributes with precision:

XPath for Title #

// Exact title match
await page.waitForXPath('//input[@title="Exact Title"]');
const [titleInput] = await page.$x('//input[@title="Exact Title"]');
await titleInput.type('Your Input');

// Partial title match (contains "Search")
const [partialTitleInput] = await page.$x('//input[contains(@title, "Search")]');
await partialTitleInput.type('Search Query');

XPath for Value #

const [valueInput] = await page.$x('//input[@value="Initial Value"]');
await valueInput.type('Updated Value');

Pro Tips to Avoid Headaches #

• Always prioritize waiting for elements to be visible (not just present) — dynamic pages often load elements asynchronously, and trying to interact too early will fail.
• If the input is inside an iframe, switch to the iframe first with page.frame() or page.frames().
• Some sites rely on input or change events for validation or state updates—if typing alone doesn’t work, dispatch those events manually like in the dynamic value example.

内容的提问来源于stack exchange，提问作者Vinirdishtith Rana