Блог

Главная - Вопросы по программированию - текстовое поле кукловода без идентификатора

текстовое поле кукловода без идентификатора

#node.js #puppeteer

#node.js #кукловод

Вопрос:

Я хочу использовать Puppeteer для ввода значения в поле ввода. Я сделал это для большей части веб-страницы, но у меня возникла реальная проблема с определенным полем, у которого нет идентификатора или хорошей метки.

вот элементы проверки

 <div class="retype-security-code"><input type="text" class="form-text mask-cvv-4" aria-label="Security code" placeholder="CVV2" value=""><img src="https://c1.neweggimages.com/WebResource/Themes/Nest/images/cvv2_sm.gif" alt="cvv2"></div>

<input type="text" class="form-text mask-cvv-4" aria-label="Security code" placeholder="CVV2" value="">

изображение кода выше

вот некоторый код, с которым я играл

     while (true) {

    try {
        await page.waitForSelector('#cvv2Code' , {timeout: 500})
        await page.type('#cvv2Code', config.cv2)
        break
    } 
    catch (err) {}

    try {
        await page.waitForSelector('#creditCardCVV2' , {timeout: 500})
        await page.type('#creditCardCVV2', config.cv2)
        break
    } 
    catch (err) {}

    try {
        await page.waitForSelector('#app > div > section > div > div > form > div.row-inner > div.row-body > div > div:nth-child(3) > div > div.checkout-step-body > div.checkout-step-done > div.card > div.retype-security-code > input' , {timeout: 500})
        await page.focus('#app > div > section > div > div > form > div.row-inner > div.row-body > div > div:nth-child(3) > div > div.checkout-step-body > div.checkout-step-done > div.card > div.retype-security-code > input')
        await page.keyboard.type('###')
        break
    } 
    catch (err) {}
}

Ответ №1:

Почему вы используете #cvv2Code и #creditCardCVV2 как селекторы, когда их нет ни в вашем HTML-коде, ни на картинке?

Этот класс form-text mask-cvv-4 кажется разумным вариантом для поля:

 await page.waitForSelector('.form-text.mask-cvv-4');

Эти селекторы в блоке последней попытки слишком длинные, их невозможно поддерживать и их трудно читать, избегайте написания таких селекторов.

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

Комментарии:

1. Извините, что не ясно написал это слишком поздно ночью. Первые 2 части кода, где можно перехватить любые другие версии, которые иногда появляются, и я больше не уверен, появляются ли они вообще. Причина отсутствия какого-либо сообщения об ошибке заключается в том, что я его не получаю, он просто сидит там, ничего не делая. Причина последнего селектора заключается в том, что когда вы щелкаете правой кнопкой мыши и копируете из элементов проверки и копируете селектор, это то, что вы получаете. спасибо за вашу помощь.

2. @AGenovez не могли бы вы поделиться сайтом, чтобы я мог попробовать? Я здесь немного слеп, попробовать было бы лучше.

3. его проверка в newegg

4. Это похоже на платную стену после завершения оформления заказа. Я не думаю, что смогу это сделать.

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

Ответ №2:

Я обнаружил, что вы можете найти элемент, используя querySelector , а затем использовать setAttribute , чтобы присвоить элементу идентификатор. Итак, что-то вроде

 await page.evaluate(() => {
    const inputBox = document.querySelector(".form-text mask-cvv-4");
    inputBoxes.setAttribute('id', 'inputBox1');
  });
await page.type("#inputBox1", "yourText");

Если у элемента есть дочерние элементы, вам просто нужно получить дочерние элементы из элемента. Если есть несколько элементов с тегом class, вы можете использовать querySelectorAll и перебирать этот список.