Кукловод напишите в поле ввода

Question

Я новичок в кукловоде и хочу написать имя пользователя на этом сайте с кукловодом в режиме без головы: https://partner.spreadshirt.de/login

Пример Википедии от Как заполнить поле ввода с использованием puppeteer отлично работает в Википедии. На github что-то вроде const selector = "input.form-control.input-block"; работало нормально, но не на странице входа в футболку. Селектором ввода, который я хочу заполнить, является #username, а document.querySelector("#username") в devtools возвращает ввод без проблем. Но если я подожду селектора в кукловоде, я столкнусь с таймаутами.

(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();
})();

Все мои варианты селектора пока не увенчались успехом, как #username, input#username.textinput__input, .textinput__input ... Когда я регистрирую page.content (), основное содержание div страницы вообще не регистрируется, возможно, он загружается позже чем-то javascript. Можно ли заполнить поля ввода кукловодом и как это будет выглядеть в коде?

Заранее спасибо, и любая помощь высоко ценится!

Answer 1

Элемент находится в iframe. Сначала вам нужно получить доступ к фрейму, а затем взаимодействовать с элементом:

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