Cypress如何向Quantity字段的同级输入框输入数值？

问题原因 #

你之前的写法未生效是因为cy.contains('Quantity')匹配到的是显示「Quantity」文本的DOM节点，目标输入框并不在该节点的同级兄弟节点范围内，因此用siblings()方法无法定位到目标输入框，自然无法触发输入操作。

可行解决方案 #

• 方案1：先查找包裹Quantity文本和输入框的公共父容器，再在父容器内定位输入框
  根据实际DOM结构调整closest()方法内的选择器（比如对应表单组的类名、标签名等）即可，示例代码如下：

  cy.contains('Quantity')
    // 替换下方内容为实际的公共父容器选择器，比如带form-item类的div
    .closest('.form-item')
    .find('input')
    .type(123)
  

• 方案2：直接通过输入框自身属性定位，稳定性更高
  如果输入框有可唯一匹配的属性（如name、id、placeholder、class等），直接写选择器定位即可，示例：

  // 可根据输入框实际属性调整选择器，比如匹配id为quantity的输入框：cy.get('input#quantity')
  cy.get('input[name="quantity"]').type(123)
  

• 方案3：通过相邻节点跳转后查找
  如果输入框在Quantity文本节点的下一个兄弟节点的子元素内，可使用next()方法跳转层级后查找：

  cy.contains('Quantity')
    .next()
    .find('input')
    .type(123)
  

调试时如果不确定节点层级，可以在cy.contains('Quantity')后插入.then(console.log)打印匹配到的节点，在浏览器控制台查看实际节点层级后再调整查找逻辑即可。

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