byte-design select 组件的隐藏坑 — placeholder 不是 input.placeholder

在做 juejin 发布自动化时, 一直命中不了"添加标签"输入框. Playwright 反复 timeout. 我先后试了 input[placeholder*="搜索添加标签"] 和 input[placeholder*="标签"], 都没匹配上. 最终 F12 真实 DOM 实证才搞明白根因.

真实 DOM 结构

<div class="tag-input select">
  <div class="byte-select__wrap">
    <div class="byte-select__content-wrap">
      <div class="byte-select__placeholder">请搜索添加标签</div>
      <input class="byte-select__input">
    </div>
  </div>
</div>

关键发现

byte-design select 组件用 div 模拟 placeholder, 真 input.placeholder 属性是空字符串. 因此所有 input[placeholder*=...] selector 全 miss.

治本 selector

.tag-input input.byte-select__input — 通过容器类 + 真 input 类组合定位. 多个 .tag-input 共存时 (标签和话题用同类), .first 取第一个就是标签 (DOM 顺序稳定).

心法: 真实数据驱动 vs 盲调

盲调 = 业内常识猜 selector. 命中率不到 30%. 真实数据驱动 = F12 看真实 DOM → outerHTML → 写精准 selector. 命中率 95%+.

慢就是快. 5 分钟 F12 顶过 30 分钟猜 selector.

#Playwright #自动化测试 #byte-design #微鹏科技