web-dev-qa-db-fra.com

Comment supprimer du texte existant de l'entrée à l'aide de Puppeteer?

J'essaie de tester la modification du texte dans une entrée modifiable qui contient le titre de l'enregistrement actuel - et je veux pouvoir tester la modification de ce texte, en le remplaçant par autre chose.

Je sais que je peux utiliser await page.type('#inputID', 'blah'); pour insérer "bla" dans la zone de texte (qui dans mon cas, ayant du texte existant, n'ajoute que "bla"), cependant, je ne trouve aucune méthode de page 1 qui permettent de supprimer ou de remplacer du texte existant.

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

Vous pouvez utiliser page.evaluate pour manipuler le DOM comme bon vous semble:

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

Cependant, parfois, la simple manipulation d'un champ donné peut ne pas être suffisante (une page cible peut être un SPA avec des écouteurs d'événements), il est donc préférable d'émuler de vraies touches. Les exemples ci-dessous sont tirés de le problème informatif dans le Github du marionnettiste concernant cette tâche.

Ici, nous appuyons sur Backspace autant de fois qu'il y a de caractères dans ce champ:

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

Une autre solution intéressante consiste à cliquer 3 fois sur le champ cible afin que le navigateur sélectionne tout le texte qu'il contient et que vous puissiez simplement taper ce que vous voulez:

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

Vous pouvez utiliser les méthodes page.keyboard pour modifier les valeurs d'entrée, ou vous pouvez utiliser page.evaluate() .

Remplacer tout le texte: 

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

Ajouter du texte: 

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

Dernier caractère de retour arrière: 

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

Supprimer le premier caractère: 

// 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

Si vous n'êtes pas intéressé par la simulation des événements clés, vous pouvez également utiliser la méthode page. $ Eval du marionnettiste comme moyen concis pour supprimer la valeur de la zone de texte ...

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

ou même remplacer complètement la valeur en une seule étape, sans simuler la saisie suivante:

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

les réponses ci-dessus ont des problèmes ESLint. la solution suivante passant la varification ESLint:

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

Eh bien, la raison pour laquelle vous souhaitez supprimer le texte existant peut être le remplacer.

Vous pouvez utiliser 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