如何为属性相同的两个文本框输入值？输入第二个时第一个值同步变更

嗨，我之前也碰到过类似的坑！这种情况大概率是元素定位不够精准导致的——你写的XPath可能看似选了不同元素，但实际上要么指向了同一个，要么页面里有隐藏的同属性元素打乱了索引，咱们一步步来解决：

一、先排查定位是否真的准确 #

你可以先给每个定位到的元素加个打印验证，确认是不是两个完全不同的输入框：

WebElement firstBox = driver.findElement(By.xpath("(//input[@type='number'])[1]"));
// 打印输入框的name、id或者placeholder，看看是不是目标元素
System.out.println("第一个输入框的name: " + firstBox.getAttribute("name"));
firstBox.sendKeys("20000");

WebElement secondBox = driver.findElement(By.xpath("(//input[@required='required'])[2]"));
System.out.println("第二个输入框的name: " + secondBox.getAttribute("name"));
secondBox.sendKeys("3000");

如果打印出来的两个属性完全一样，那说明你的定位肯定错了，得换更精准的选择器。

二、优化定位方式，避免依赖通用属性 #

别只靠type='number'或者required='required'这种很多元素都有的属性，结合输入框的父容器、相邻元素或者唯一属性（比如name、id、placeholder）来定位：

示例1：结合父元素的class/id #

如果第一个输入框在class="salary-input"的容器里，第二个在class="expense-input"里，XPath可以这么写：

// 第一个输入框
driver.findElement(By.xpath("//div[@class='salary-input']//input[@type='number']")).sendKeys("20000");
// 第二个输入框
driver.findElement(By.xpath("//div[@class='expense-input']//input[@required='required']")).sendKeys("3000");

示例2：用CSS选择器结合唯一属性 #

如果输入框有name或者id（这俩通常是唯一的），直接用CSS选择器更靠谱：

// 假设第一个输入框name是monthly_income
driver.findElement(By.cssSelector("input[type='number'][name='monthly_income']")).sendKeys("20000");
// 第二个输入框name是monthly_expense
driver.findElement(By.cssSelector("input[required='required'][name='monthly_expense']")).sendKeys("3000");

三、如果是框架受控组件的问题（比如React/Vue） #

有些前端框架会把输入框做成受控组件，直接用sendKeys可能会和框架的状态管理冲突，导致值同步混乱。这时候可以试试用JavaScript直接给DOM赋值：

WebElement firstBox = driver.findElement(By.xpath("(//input[@type='number'])[1]"));
((JavascriptExecutor) driver).executeScript("arguments[0].value = '20000';", firstBox);

WebElement secondBox = driver.findElement(By.xpath("(//input[@required='required'])[2]"));
((JavascriptExecutor) driver).executeScript("arguments[0].value = '3000';", secondBox);

这种方式绕开了Selenium的模拟输入，直接修改DOM的值，能解决不少框架带来的奇怪问题。

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