如何将值发送到与其他 2 个类同名的输入类？

Question

我是自动化测试方面的初学者（如果我的尝试不好，请原谅我，我尝试 google 并经历了一堆对我来说似乎有意义的事情），我有一个项目一个反应/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>

我想发送“电话”、“代理标识符”、“密码”的值，但我可能也会在此选项卡上的其他元素（接收语音和更新按钮）上遇到困难。

如果我尝试：

const Extension = $('input.textfield textfield--valid-value.textfield--raised.textfield--full-width');
Extension.setValue('value');

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

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

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

但这对我来说没有多大意义，也不起作用。我很难理解这些选择器，没有 ID 或有些独特的类名肯定无济于事。

Answer 1

无论谁编写了 HTML 表单，都让您处于极大的劣势。充分识别表单输入应该是作者的主要考虑因素。如果您处于执行 QA 测试的位置并且没有能力自己修改代码，那么您将不得不利用 JS 来获取元素。但是，您似乎并不具备这样做所需的所有 JS 编码技能。

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

纯 HTML/JS
JSFiddle Example

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,
})

jQuery
jsFiddle Example

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,
})

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

Answer 2

试试这个代码。

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

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

它将所有输入元素的值设置为'value'