Как я могу отправить значение входному классу с тем же именем, что и 2 других класса?

Question

Я новичок с точки зрения автоматизации тестирования (пожалуйста, прости меня, если мои попытки плохие, я попытался Google и прошел через кучу вещей, которые, казалось, имеют смысл для меня), и у меня есть проект, который имеет Реактивный / редукционный интерфейс. Я использую webdriver.io для автоматизации, потому что другие решения, такие как testcafe или cypress, не работали с нашим потоком авторизации.

Внешний интерфейс грязный, у него еще нет идентификаторов, а классы имеют идентичные имена для несколько вещей, но я создаю запрос функции для этого.

Тем временем, я хочу отправить значения в 3 различных поля. Вот элементы из вкладки Chrome elements:

<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');

Но это не имеет особого смысла для меня, и это не работает. Я изо всех сил пытаюсь понять эти селекторы и отсутствие идентификаторов или несколько уникальных имен классов, безусловно, не поможет.

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

Отсюда вы получаете / устанавливаете входные значения. Вероятно, это могут быть рефакторы, но для тестирования качества это должно работать нормально. Очевидно, что большая проблема заключается в том, что вы должны сообщить разработчику, что он должен следовать другой практике при создании форм.

Answer 2

Попробуйте этот код.

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

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

Он установит все значения входного элемента в 'value'