Puppeteer write in input field

Question

I am new to puppeteer and want to write to the username input of this website with puppeteer in headless mode: https://partner.spreadshirt.de/login

The wikipedia example from How to fill an input field using Puppeteer? works fine on wikipedia. On github, something like const selector = "input.form-control.input-block"; worked fine, but not on the login page of spreadshirt. The selector of the input, I want to fill is #username and a document.querySelector("#username") in devtools returns the input no problem. But if I wait for the selector in puppeteer, I run into timeouts.

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://partner.spreadshirt.de/login", {
    waitUntil: "networkidle2"
  });

  await page.waitFor("input[name=username]");
  await browser.close();
})();

All my variations of the selector have not been successful so far, like #username, input#username.textinput__input, .textinput__input... When I log the page.content(), the main content div of the page is not logged at all, it is probably loaded later by some javascript. Is it possible to fill the input with puppeteer and how would that look in code?

score 4 · Accepted Answer · answered Feb 21 '20 at 21:12

The element is in an iframe. You need to access the frame first and then interact with the element:

const frame = page.frames().find(frame => frame.url() === "https://accounts.spreadshirt.de/login?context=partner&lang=de");
let input = await frame.waitForSelector('input[type="email"]');
await input.type("email@email.com");

Puppeteer write in input field

1 Answers1