I am new to puppeteer and want to write to the username input of this website with puppeteer in headless mode:

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(";, {
    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?

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?

• javascript
• node.js
• input
• puppeteer

Share Improve this question Follow edited Oct 29, 2020 at 11:04 Zoe - Save the data dump 28.3k2222 gold badges128128 silver badges160160 bronze badges asked Feb 21, 2020 at 21:06 BraimeBraime 4311 gold badge11 silver badge77 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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 protected]");