I am trying to set a value to an Input/TextArea element in html using puppeteer without success. The code is transpiled with typescript.
Here I use YouTube as an example.
First it should navigate to youtube, then select the input box with pseudo-class css selector, and set the value according to the variables: prefix and caption.
The script shuts down as soon as it starts to perform page.eval. I am not sure if I am using the wrong css selector. There might be an issue when I am try to assign string to "value" property as well.
(async ()=>{
const searchbox='html>body>ytd-app>div>div>ytd-masthead>div:nth-of-type(3)/div:nth-of-type(2)/ytd-searchbox/form/div:first-of-type/div:first-of-type/input'
const puppeteer = require("puppeteer")
const browser = await puppeteer.launch({headless:false, defaultViewport: null, slowMo: 100});
const page = await browser.newPage();
await page.goto('https://www.youtube.com/');
await uploadPhoto("Some", " Video");
async function uploadPhoto(prefix:string, caption:string) {
await page.evaluate( (searchbox:string, prefix:string, caption:string) => {
(document.querySelector(searchbox) as HTMLInputElement).value = `${prefix} ${caption}`},
searchbox, prefix, caption)
}
console.log("finish")
})();
I think you should remove all types from your evaluate function as this function will be executed directly in the brwoser and I believe the types would make it fail:
async function uploadPhoto(prefix:string, caption:string) {
await page.evaluate( (searchbox, prefix, caption) => {
document.querySelector(searchbox).value = `${prefix} ${caption}`
}, searchbox, prefix, caption)
}
An easier solution is to use the method type from ElementHandle class:
const searchInput: ElementHandle<Element> = await page.waitForSelector(searchbox, { timeout: 5000 });
await searchInput.type("Some text to search");
or type from Page class:
await page.type(searchbox, "Some text to search");