如何將值發送到與其他 2 個類同名的輸入類？

Question

我是自動化測試方面的初學者（如果我的嘗試不好，請原諒我，我嘗試谷歌並經歷了一堆對我來說似乎有意義的事情），並且我有一個有反應的項目/ 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 個元素，如何實現相同的目標？

我也為前 2 個元素嘗試了這個，因為我認為它可以工作：

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

但這對我來說沒有多大意義，也不起作用。 我正在努力理解這些選擇器，並且沒有 ID 或有些獨特的類名肯定無濟於事。

Answer 1

編寫表單 HTML 的人讓您處於明顯的劣勢。 充分識別表單輸入應該是作者的主要考慮因素。 如果您處於執行 QA 測試的位置並且沒有能力自己修改代碼，則必須利用 JS 來獲取元素。 但是，您似乎不具備這樣做所需的所有 JS 編碼技能。

根據您提供的示例方法，您可以嘗試以下操作：

純 HTML/JS
JSFiddle 示例

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 示例

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";
}

它將所有輸入元素值設置為“值”