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

Question

我是自动化测试的初学者（如果我的尝试不好，请原谅我，我尝试 google 并经历了一堆对我来说似乎有意义的事情），并且我有一个具有 react/redux 前端的项目。我正在使用 webdriver.io 进行自动化，因为 testcafe 或 cypress 等其他解决方案不适用于我们的授权流程。

前端很乱，它还没有 ID，而且 class 很多东西都有相同的名称，但我为此创建了一个功能请求。

与此同时，我想做的是将值发送到 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>

我想发送 "Phone"、"Agent Identifier"、"Password" 的值，但我可能也会与此选项卡上的其他元素（接收语音和更新按钮）发生冲突。

如果我尝试：

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 或有些独特的 class 名称肯定无济于事。

Answer 1

试试这个代码。

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

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

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

Answer 2

填写表格 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,
})

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

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

How can I send a value to an input class that has the same name as 2 other classes?

javascript

css

automation

webdriver-io