webentwicklung-frage-antwort-db.com.de

Wie lösche ich vorhandenen Text mit Puppeteer aus der Eingabe?

Ich versuche, das Ändern von Text in einer bearbeitbaren Eingabe zu testen, die den Titel des aktuellen Datensatzes enthält - und ich möchte in der Lage sein, das Bearbeiten eines solchen Textes zu testen und ihn durch etwas anderes zu ersetzen.

Ich weiß, dass ich await page.type('#inputID', 'blah'); verwenden kann, um "blah" in das Textfeld einzufügen (das in meinem Fall bei vorhandenem Text nur "blah" anfügt), aber ich kann keine Seitenmethoden finden 1 zum Löschen oder Ersetzen von vorhandenem Text.

javascriptnode.jsgoogle-chrome-devtoolspuppeteerheadless-browser
12
Javier Arias

Sie können page.evaluate um DOM nach Belieben zu manipulieren:

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

Manchmal reicht es jedoch nicht aus, nur ein bestimmtes Feld zu bearbeiten (eine Zielseite kann ein SPA mit Ereignis-Listenern sein). Daher ist es empfehlenswert, echte Tastendrücke zu emulieren. Die folgenden Beispiele stammen aus der informativen Ausgabe in Puppenspieler Github zu dieser Aufgabe.

Hier drücken wir Backspace so oft es Zeichen in diesem Feld gibt:

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

Eine andere interessante Lösung besteht darin, dreimal auf das Zielfeld zu klicken, damit der Browser den gesamten Text darin auswählt und Sie dann einfach eingeben können, was Sie möchten:

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

Sie können die page.keyboard - Methoden verwenden, um Eingabewerte zu ändern, oder Sie können page.evaluate() verwenden.

Gesamten Text ersetzen: 

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

Text anhängen: 

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

Rücktaste Letztes Zeichen: 

// 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 );
});

Erstes Zeichen löschen: 

// 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 );
});
7
Grant Miller

Wenn Sie nicht daran interessiert sind, die wichtigsten Ereignisse zu simulieren, können Sie auch die Seite. $ Eval -Methode des Puppenspielers verwenden, um den Wert des Textbereichs zu entfernen ...

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

oder ersetzen Sie den Wert sogar vollständig in einem Schritt, ohne die nachfolgende Eingabe zu simulieren:

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

die obigen Antworten weisen ESLint-Probleme auf. Die folgende Lösung besteht die ESLint-Varifikation:

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

Nun, der Grund, warum Sie vorhandenen Text im Allgemeinen löschen möchten, kann sein, dass Sie ihn ersetzen möchten.

Sie können 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
levy9527