Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to set Value for a Input Element #441

Closed
FreeGIS opened this issue Aug 21, 2017 · 8 comments

Comments

@FreeGIS
Copy link

commented Aug 21, 2017

const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();

await page.goto('https://google.com');
const keywordInput=await page.$('#lst-ib');
keywordInput.value='China';

const inputElement = await page.$('input[type=submit]');
await inputElement.click();

//等待几秒
_sleep();
//print png
await page.screenshot({path: 'clickbd.png',fullPage: true});
browser.close();

})();
async function _sleep() {
console.log('Hello')
await sleep(2000)
console.log('world!')
}

function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}

The code is up,i hope set a value for input then search them,but It didn't work,please help me...

@jsnanigans

This comment has been minimized.

Copy link

commented Aug 21, 2017

Hi there,
I think you should use the page.focus() and page.keyboard.type() function for this.
Try this code:

// ...
await page.focus('#lst-ib')
page.keyboard.type('China')
// ...

edit: updated page.type() to page.keyboard.type()

@hzoo

This comment has been minimized.

Copy link

commented Aug 21, 2017

You can also use page.evaluate:

    await page.evaluate((a, b) => {
      document.querySelector('#a').value = a;
      document.querySelector('#b').value = b;
      document.querySelector('#c').click();
    }, a, b);
@alexander-elgin

This comment has been minimized.

Copy link

commented Sep 15, 2018

I like the @jsnanigans 's answer but instead of

page.type('China')

I used

await page.keyboard.type('China')
@hackhat

This comment has been minimized.

Copy link

commented Nov 5, 2018

The problem with this is that you will prepend this string to the input (if has any value in the input already). You first need to delete the text that is there (as the question asks how to set a value, not how to prepend a value to an input box).

You could use "CTRL+A", but that won't work on MAC.

A cross-OS solution could be:

const setTextInputValue = async (page: puppeteer.Page, selector: string, value: string | number) => {
  await page.waitFor(selector);
  await page.evaluate((data) => {
    return document.querySelector(data.selector).value = data.value
  }, {selector, value})
}
await setTextInputValue(page, `.mySelector`, `value`)

Or you can set to empty and then use the type function

@ParableYields

This comment has been minimized.

Copy link

commented Nov 5, 2018

@jsnanigans

This comment has been minimized.

Copy link

commented Nov 5, 2018

I don't think its a great idea to set the value with the .value method, in my case I rely on other scripts triggering on the input event so here are some examples based on hzoo's and my solution:

await page.evaluate((a, b) => {
    document.querySelector('#a').select();
}, a, b);
await page.keyboard.type('China')

or

await page.evaluate((a, b) => {
    document.querySelector('#a').value = '';
}, a, b);
await page.keyboard.type('China')

or something maybe even this, without eval-uate :)

const foo = await page.$('#a');
await foo.click({ clickCount: 3 });
await page.keyboard.type('China')

but I am assuming that triple click will select text on every system

@hackhat

This comment has been minimized.

Copy link

commented Nov 6, 2018

@jsnanigans yes, I don't like to magically set the .value, is hacky. I wouldn't do await = foo.click({ clickCount: 3 }); because relies on the OS to have this enabled and work everywhere, you don't want to worry about this breaking.

I'm actually doing your second solution right now, but I like your first solution more. I don't feel very comfortable with that because if some script on the page changes your focus between the select and type, it will break. The most robust I still think is the 2nd solution.

@Xample

This comment has been minimized.

Copy link

commented Dec 19, 2018

The signature of type is
type(selector: string, text: string, options?: { delay: number }): Promise<void>;
Meaning the usage is as follow

await page.type('#lst-ib', 'China');

Hi there,
I think you should use the page.focus() and page.type() function for this.
Try this code:

// ...
await page.focus('#lst-ib')
page.type('China')
// ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
8 participants
You can’t perform that action at this time.