Javascript 如何向与其他两个类同名的输入类发送值？

我是自动化测试方面的初学者（如果我的尝试不好，请原谅我，我尝试了谷歌，经历了一系列对我来说似乎有意义的事情），我有一个项目，有一个react/redux前端。我使用webdriver.io实现自动化，因为其他解决方案（如testcafe或cypress）不适用于我们的授权流

前端很混乱，它还没有ID，而且类有多个相同的名称，但我为此创建了一个特性请求

同时，我要做的是将值发送到3个不同的字段。 以下是Chrome元素选项卡中的元素：

<div class="user-settings">
<div class="table">
    <div class="row">
        <div class="cell">
            <label class="textfield-with-label textfield-with-label--full-width"><span class="textfield-label">Phone</span>
                <input type="text" class="textfield textfield--valid-value textfield--raised textfield--full-width" value="">
            </label>
        </div>
    </div>
    <div class="row">
        <div class="cell">
            <label class="textfield-with-label textfield-with-label--full-width"><span class="textfield-label">Agent identifier</span>
                <input type="text" class="textfield textfield--valid-value textfield--raised textfield--full-width" value="">
            </label>
        </div>
    </div>
    <div class="row">
        <div class="cell">
            <label class="textfield-with-label textfield-with-label--full-width"><span class="textfield-label">Password</span>
                <input type="password" class="textfield textfield--valid-value textfield--raised textfield--full-width" value="">
            </label>
        </div>
    </div>
    <div class="row">
        <div class="cell">
            <label class="checkboxfield-with-label"><span class="checkboxfield-label">Receive voice calls</span>
                <input type="checkbox" class="checkboxfield">
            </label>
        </div>
    </div>
    <div class="row">
        <div class="update-action">
            <div class="update-button">
                <button type="text" class="action-button action-button--icon action-button--text action-button--settings action-button--tick" title="Update"><i class="icon-wrapper icon-tick" aria-hidden="true"><svg focusable="false" role="img" viewBox="0 0 48 48"><use xlink:href="#icon-tick"></use></svg></i><span class="action-button__text">Update</span></button>
            </div>
        </div>
    </div>
</div>

这是可行的，但只适用于第一个字段，可能是因为它是第一个元素。对于第二个和第三个，它将不起作用，如何实现相同的事情，但对于所有3个元素

我还尝试了前两个元素，因为我认为它可以工作：

const AgentID = $("span.textfield-label='Agent identifier'");
AgentID.setValue('value2');

但这对我来说没有多大意义，也不起作用。我正在努力理解这些选择器，没有ID或有点独特的类名肯定没有帮助

试试这段代码

const extension = document.getElementsByClassName('textfield--valid-value ');

for (let i = 0; i < extension.length; i++) {
  extension[i].value = "value";
}

const extension=document.getElementsByClassName（'textfield--valid value'）；
for（设i=0；i

---

它会将所有输入元素的值设置为“value”

无论是谁编写了表单HTML，都会让您处于一个非常不利的地位。充分识别表单输入应该是作者的首要考虑。如果您正在执行QA测试，并且自己没有能力修改代码，那么您必须利用JS来获取元素。但是，您似乎不具备完成此任务所需的所有JS编码技能

根据您提供的示例方法，您可以尝试以下方法：

纯HTML/JS

jQuery

---

从这里可以获取/设置输入值。这可能是重构，但对于QA测试，它应该可以正常工作。显然，这里更大的问题是，您必须与开发人员沟通，他们在生成表单时需要遵循不同的实践

仅供参考，类名将被多次重用。事实上，如果一个类名在应用程序中是唯一的，那就是一个危险信号。应为此目的使用ID。也许在添加ID之前开始自动化有点为时过早？我同意这太早了，但有人让我开始这样做。我在这场冲刺中有大约一周的时间无所事事。。这可能是一次很好的（看起来也很痛苦）学习经历。我的意思是，你可以使用类似

$（“span.textfield标签”）.filter（el=>el.textContent=='Agent identifier'）我猜？这不起作用，“（…）。过滤器不是一个函数”。这可能是一个误导性错误，问题是它找不到选择器，我在以前的测试中见过它，它有几乎相同的类，唯一的区别是它们有一个标题，所以我使用了longclassname[title='class title']但我不能在这里这样做，因为这些类没有标题。显然webdriver不是jQuery:）。对不起，我被
$（）
语法误导了。“文档未定义”。我认为webdriver.io不喜欢这种方法。哦，我看到你使用的是JS库。我尝试过这种方法，但不起作用，因为“文档未定义”。这可能是因为webdriver.io。你是绝对正确的，我提出了很多关于实践的问题，缺少ID是最新的一个问题，我将与产品所有者讨论，优先考虑它，因为如果不在一夜之间获得高级JS技能，我认为我无法“完全自动化”没有ID的产品。@LiviuAvram I添加了示例代码的jQuery版本。
const extension = document.getElementsByClassName('textfield--valid-value ');

for (let i = 0; i < extension.length; i++) {
  extension[i].value = "value";
}

const parentElements = Array.from(document.querySelectorAll('.textfield-with-label'))

const formUI = parentElements
.reduce((_formUI, parentElement) => {
  let spanText = parentElement.querySelector('span').innerHTML
  switch(spanText) {
    case 'Agent identifier': 
      _formUI.agentID = parentElement.querySelector('input')
      break
    case 'Phone':
      _formUI.phone = parentElement.querySelector('input')
      break
    case 'Password':
      _formUI.password = parentElement.querySelector('input')
      break
  }
  return _formUI
}, {
  phone: null,
  agentID: null,
  password: null,
})

const $parentElements = Array.from($('.textfield-with-label'))

const formUI = $parentElements
.reduce((_formUI, parentElement) => {
  let $parentElement = $(parentElement)
  let spanText = $(parentElement).find('span').text()
  switch(spanText) {
    case 'Agent identifier': 
      _formUI.agentID = $parentElement.find('input')
      break
    case 'Phone':
      _formUI.phone = $parentElement.find('input')
      break
    case 'Password':
      _formUI.password = $parentElement.find('input')
      break
  }
  return _formUI
}, {
  phone: null,
  agentID: null,
  password: null,
})