Как удалить существующий текст из ввода с помощью Puppeteer? - PullRequest
Новая
       31

Как удалить существующий текст из ввода с помощью Puppeteer?

0 голосов
/ 03 октября 2018

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

Я знаю, что ямогу использовать await page.type('#inputID', 'blah'); для вставки «бла» в текстовое поле (которое в моем случае, при наличии существующего текста, добавляет только «бла»), однако я не могу найти какие-либо методы страницы 1 , которые позволяют удалять или заменятьсуществующий текст.

Ответы [ 4 ]

0 голосов
/ 19 июля 2019

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

Вы можете использовать page.evalute

let title = getTitle()
let selector = getSelector()

await page.evaluate(
  ({selector, title}) => {
    let el = document.querySelector(selector)
    if ('value' in el) el.value = title
    else el.innerText = title
  },
  {selector, title}
)
0 голосов
/ 03 октября 2018

Вы можете использовать методы page.keyboard для изменения входных значений, или вы можете использовать page.evaluate().

Заменить весь текст: 

// Using page.keyboard:

await page.focus( '#example' );
await page.keyboard.down( 'Control' );
await page.keyboard.press( 'A' );
await page.keyboard.up( 'Control' );
await page.keyboard.press( 'Backspace' );
await page.keyboard.type( 'foo' );

// Using page.evaluate:

await page.evaluate( () => {
    const example = document.getElementById( 'example' );
    example.value = 'foo';
});

Добавить текст: 

// Using page.keyboard:

await page.focus( '#example' );
await page.keyboard.press( 'End' );
await page.keyboard.type( ' bar qux' );

// Using page.evaluate:

await page.evaluate( () => {
    const example = document.getElementById( 'example' );
    example.value += ' bar qux';
});

Backspace Последний символ: 

// Using page.keyboard:

await page.focus( '#example' );
await page.keyboard.press( 'End' );
await page.keyboard.press( 'Backspace' );

// Using page.evaluate:

await page.evaluate( () => {
    const example = document.getElementById( 'example' );
    example.value = example.value.slice( 0, -1 );
});

Удалить первый символ: 

// Using page.keyboard:

await page.focus( '#example' );
await page.keyboard.press( 'Home' );
await page.keyboard.press( 'Delete' );

// Using page.evaluate:

await page.evaluate( () => {
    const example = document.getElementById( 'example' );
    example.value = example.value.slice( 1 );
});
0 голосов
/ 08 мая 2019

Если вы не заинтересованы в симуляции ключевых событий, вы можете также использовать страницу кукловода . Метод $ eval в качестве краткого средства для удаления значения текстовой области ... 

await page.$eval('#inputID', el => el.value = '');
await page.type('#inputID', 'blah');

или даже полностью заменить значение за один шаг, не имитируя последующего набора: 

await page.$eval('#inputID', el => el.value = 'blah');
0 голосов
/ 03 октября 2018

Вы можете использовать page.evaluate для управления DOM по своему усмотрению: 

await page.evaluate( () => document.getElementById("inputID").value = "")

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

Здесь мы нажимаем Backspace столько раз, сколько символов в этом поле: 

const inputValue = await page.$eval('#inputID', el => el.value);
for (let i = 0; i < inputValue.length; i++) {
  await page.press('Backspace');
}

Другое интересное решение - щелкнуть целевое поле 3 раза, чтобы браузер выбрал всетекст в нем, и тогда вы можете просто набрать, что вы хотите: 

const input = await page.$('#inputID');
await input.click({ clickCount: 3 })
await input.type("Blah");
...