web-dev-qa-db-fra.com

Comment remplir un champ de saisie à l'aide de marionnettiste

J'utilise marionnettiste pour le test E2E et j'essaie maintenant de remplir un champ de saisie avec le code ci-dessous.

await page.type('#email', '[email protected]');

Cela a fonctionné, mais j’ai trouvé que l’adresse e-mail était saisie dans le champ caractère par caractère, comme si un être humain tapait.
Est-il possible de laisser le champ de saisie rempli avec l'adresse électronique à la fois?

e2e-testingpuppeteer
15
choasia

Il suffit de définir la valeur de l’entrée comme ceci:

await page.$eval('#email', el => el.value = '[email protected]');

Voici un exemple d'utilisation sur Wikipedia:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://en.wikipedia.org', {waitUntil: 'networkidle2'});

    await page.waitFor('input[name=search]');

    // await page.type('input[name=search]', 'Adenosine triphosphate');
    await page.$eval('input[name=search]', el => el.value = 'Adenosine triphosphate');

    await page.click('input[type="submit"]');
    await page.waitForSelector('#mw-content-text');
    const text = await page.evaluate(() => {
        const anchor = document.querySelector('#mw-content-text');
        return anchor.textContent;
    });
    console.log(text);
    await browser.close();
})();
36
Everettss

Pour prolonger la réponse acceptée ci-dessus, vous pouvez également utiliser $ eval avec des variables localisées,

const myLocalValue = 'Adenosine triphosphate';    
await page.$eval('input[name=search]', (el, value) => el.value = value, myLocalValue);

Cela prendra "myLocalValue" de la portée locale et la passera dans la portée du navigateur en tant que "valeur"

27
Andrew

une autre façon de faire

await page.focus('#email')
await page.keyboard.type('test54')
6
Sarath Ak