使用Puppeteer定位万豪网站动态ID的目的地输入框

• 修正属性选择器（后缀匹配）
  你之前用的[id^="-search-destination"]是匹配属性值开头包含指定字符串，而我们需要匹配ID结尾是-search-destination，正确选择器应该用$=（匹配后缀）：

  await page.type('[id$="-search-destination"]', "你的目的地");
  

  之前的错误是误用了前缀匹配符号^=，还错误地把$当成通配符使用，导致选择器格式无效，触发TypeError: selector.startsWith is not a function。

• 结合placeholder定位
  如果输入框的提示文本（placeholder）是固定的，比如包含“目的地”相关内容，可以直接用这个属性定位，稳定性更高：

  // 精准匹配placeholder文本
  await page.type('input[placeholder="输入目的地"]', "你的目的地");
  // 匹配包含指定文本的placeholder
  await page.type('input[placeholder*="目的地"]', "你的目的地");
  

• 基于父容器的层级定位
  找到输入框所在的稳定父元素（比如有固定类名或ID的容器），再通过层级选择器定位，彻底避开随机ID的影响：

  // 示例：假设父容器有固定类名search-destination-wrapper
  await page.type('.search-destination-wrapper input[id$="-search-destination"]', "你的目的地");
  

• 使用XPath定位
  XPath的ends-with函数可以直接匹配ID后缀，也能结合其他属性进一步精准锁定元素：

  // 匹配ID以-search-destination结尾的输入框
  await page.type('//input[ends-with(@id, "-search-destination")]', "你的目的地");
  // 同时匹配placeholder内容和ID后缀，双重校验
  await page.type('//input[contains(@placeholder, "目的地") and ends-with(@id, "-search-destination")]', "你的目的地");
  

内容的提问来源于stack exchange，提问作者Nelson Mak