如何为Laravel Dusk的attach方法设置参数以定位无标识图片输入框？

嘿，这个问题我之前也碰到过！当多个文件上传input没有id或类名的时候，确实不能只靠input标签名来定位——那样只会匹配到第一个元素。下面给你几个实用的方案，帮你精准定位到第二个或第三个上传框：

方法1：用CSS伪类按顺序定位 #

如果这三个上传input是同层级的元素，或者在页面结构里是第n个file类型的input，直接用CSS的:nth-of-type伪类就能指定位置：

• 定位第二个上传框：

  attach_file("input[type='file']:nth-of-type(2)", filepath)
  

• 定位第三个上传框：

  attach_file("input[type='file']:nth-of-type(3)", filepath)
  

要是input不在同层级，还可以结合页面里已有的父元素类名来缩小范围（比如你给出的页面里有_qdmzb、_mesn5这些类），让选择器更精准：

# 定位._qdmzb容器下的第二个file input
attach_file("div._qdmzb input[type='file']:nth-of-type(2)", filepath)

方法2：用XPath定位 #

XPath的灵活性更高，适合结构复杂的页面。比如直接选择页面上第n个file类型的input：

• 第二个上传框：

  attach_file(:xpath, "//input[@type='file'][2]", filepath)
  

• 结合父元素的更精准写法：

  # 定位article._mesn5下的第三个file input
  attach_file(:xpath, "//article[@class='_mesn5']//input[@type='file'][3]", filepath)
  

方法3：先找到元素再上传 #

你也可以先用find方法定位到目标input元素，再把元素传给attach_file，这种方式可读性更强：

# 找到第二个file类型的input
second_upload_input = find("input[type='file']", index: 1)
attach_file(second_upload_input, filepath)

小提醒 #

一定要在选择器里加上[type='file']，这样不会误匹配到页面里其他类型的input（比如文本输入框）；另外如果页面有很多无关input，结合父元素的类名来写选择器，能避免定位错误哦~

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