How do I make puppeteer select google translate text box for me? it only works if I click it myself

Question

my code is as follows

await page.waitForTimeout(1000);
  await page.waitForSelector(
    "#yDmH0d > c-wiz > div > div.WFnNle > c-wiz > div.OlSOob > c-wiz > div.ccvoYb.EjH7wc > div.AxqVh > div.OPPzxe > c-wiz.rm1UF.UnxENd.u3bW4e > span > span > div > textarea"
  );

  let sourceString = "ni hao ma";
  await page.type(
    "#yDmH0d > c-wiz > div > div.WFnNle > c-wiz > div.OlSOob > c-wiz > div.ccvoYb.EjH7wc > div.AxqVh > div.OPPzxe > c-wiz.rm1UF.UnxENd.u3bW4e > span > span > div > textarea",
    sourceString
  );

  await page.waitForTimeout(5000);
  await page.waitForSelector(
    "#yDmH0d > c-wiz > div > div.WFnNle > c-wiz > div.OlSOob > c-wiz > div.ccvoYb.EjH7wc > div.AxqVh > div.OPPzxe > c-wiz.P6w8m > div.tm8pq"
  );

  const [val1] = await page.$x(
    '//*[@id="yDmH0d"]/c-wiz/div/div[2]/c-wiz/div[2]/c-wiz/div[1]/div[2]/div[3]/c-wiz[2]/div[7]/div/div[1]/span[1]/span/span'
  );
  const txtval1 = await val1.getProperty("textContent");
  const rawtxtval1 = await txtval1.jsonValue();
  console.log(rattxtval1);

this code opens google translate, types in some text, in this case "ni hao ma" and returns the translation of it. All of this works perfectly but only if I click the first box myself. For some reason, I cannot get it to enter the text without me clicking the box. I have tried to call page.click() on the box with the same tag, and it says the node does not exist as shown in the error below

Error: No node found for selector: #yDmH0d > c-wiz > div > div.WFnNle > c-wiz > div.OlSOob > c-wiz > div.ccvoYb.EjH7wc > div.AxqVh > div.OPPzxe > c-wiz.rm1UF.UnxENd.u3bW4e > span > span > div > textarea

yet when I click it myself as the program runs, it then types in the box perfectly (using the exact same tag to find which box to type into) and retrieves the text in the other box too.

Am I using the wrong function or am I completely missing a step of what's going on?

Any help greatly appreciated.

Answer 1

This approach seems too complicated. Firstly, the browser-generated hyper-specific selectors should usually be avoided. It's all too easy for JS to slide a new element in the chain unexpectedly or change a single class or id and the whole thing falls apart.

Secondly, waitForTimeout is almost always a poor approach, as Puppeteer's readme warns. Stick to an event-driven strategy using waitForSelector and waitForFunction as much as possible to avoid race conditions and slow scripts.

const puppeteer = require("puppeteer"); // ^13.5.1

let browser;
(async () => {
  browser = await puppeteer.launch({headless: true});
  const [page] = await browser.pages();
  await page.goto("https://translate.google.com");
  await page.type(".er8xn", "ni hao ma");
  await page.waitForSelector(".Q4iAWc");
  const phrases = await page.$$eval(".Q4iAWc", els => els.map(e => e.textContent));
  console.log(phrases.join(" ")); // => How are you 
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close())
;

This can be optimized further by navigating directly to https://translate.google.com/?sl=auto&tl=en&text=ni%20hao%20ma&op=translate to avoid selecting and manipulating the textarea entirely. Direct navigation is faster and more robust since it doesn't need to hook into any DOM class or id. Just take care to encode your query string correctly.