Выбор поля формы на html-странице

Я пытаюсь подготовить свой первый скрипт Greasmonkey (без опыта работы с технологиями javascript / вебсайтов), и у меня проблема с выбором поля на странице. Это:

<input data-testid="user/fullName" autocomplete="name" class="form-control u-text-normal">

Я проверил:

document.querySelectorAll("input.form-control");
document.querySelectorAll("input.form-control.u-text-normal");
document.getElementById("user/fullName").value

но ни один из них не возвращает то, что мне нужно ... и что мне нужно, так это возможность заполнить поле формы скриптом. Не могли бы вы помочь, пожалуйста?

РЕДАКТИРОВАТЬ: методы, приведенные в следующих ответах, я пытаюсь запустить в консоли браузера, и они не возвращают мне ни одного элемента. Может быть, кто-то может попытаться запустить его и сказать мне, что я делаю не так? Веб-сайт представляет собой корзину для покупок на сайте пиццы :) Но чтобы увидеть ее, вам нужно добавить пиццу в корзину («Do koszyka») минимум на 20 злотых, а затем перейти к оплате («Do kasy»). Тогда первое поле «Imie i nazwisko» - это то, что я хотел бы заполнить в начале.

javascript html xpath

Всего 5 ответов

Если вам нужно получить один элемент, дайте элементу html пример id:

<html>
<input id='id_here'data-testid="user/fullName" autocomplete="name" class="form-control u-text-normal">
</html>

затем получить элемент с помощью

document.getElementById('id_here');

Для нескольких элементов, которые используют один и тот же класс, вы можете использовать селектор запросов

document.querySelector('.form-control')

Это то, что вы хотели?

 var example = document.querySelector('.form-control').value; document.write(example);

 <input data-testid="user/fullName" autocomplete="name" class="form-control u-text-normal" value="test">

Если вы хотите выбрать только этот элемент, используйте наиболее конкретную вещь, в данном случае data-testid :

var x = document.querySelectorAll("[data-testid='user/fullName']")
console.log(x[0].value)

выбрать элемент (здесь мы выбираем класс и свойство данных, чтобы быть наиболее точным) =>

var element = document.querySelector('.form-control[data-testid="user/fullName"]');

После, если вы хотите добавить некоторое значение в этот вход =>

element.value = "My_value";

С уважением

Вы можете добавить 'id' или выбрать свое поле по querySelector

 let input = document.querySelector('[data-testid="user/fullName"]') input.value='abc'; myField.value += '123';

 <input id="myField" data-testid="user/fullName" autocomplete="name" class="form-control u-text-normal">

Обновить

Я пробую свой метод, и он работает на сайте пиццы, который вы упоминаете в своем обновлении вопроса:

Но похоже, что консоль «видит» элемент ввода dom после того, как вы нашли его, используя right click> inspect element - странно