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

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

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

Ответ 1

Вы можете использовать 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");

Ответ 2

Вы можете использовать методы 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 );
});

Ответ 3

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

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

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

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

Ответ 4

Приведенные выше ответы имеют проблемы ESLint. следующее решение, передающее изменение ESLint:

await page.evaluate(
  (selector) => { (document.querySelector(selector).value = ''); },
  inputBoxSelector,
);

Ответ 5

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

Вы можете использовать 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}
)