在没有 id 或标识属性的情况下填写输入字段时出现问题。（木偶师）

Question

这是我要输入的输入元素：

<input name="name" ng-model-options="{ debounce: 300 }" ng-model="contestantState.form.name" ng-pattern=".*" placeholder="Alice Smith" required="" style="width: 246px" type="text" class="ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-dirty ng-valid-parse ng-touched">

我的一个尝试：

 await page.type('input[name="name"]',"my name");

无论我尝试以何种方式在此字段中键入内容，都没有任何反应：它保持空白，因为无法通过名称或类.

来识别它

如何让 Puppeteer 在该字段中输入名称？

我正在尝试执行此操作的网站是：https://gleam.io/hxVaH/win-a-krooked-big-eyes-too-skateboard?gsr=hxVaH-4hKgdgSzfh （全名和电子邮件字段）。

Answer 1

有多个匹配元素在使用您的定位器。试试这个：

await page.type('[class="entry-method  expanded"] input[name="name"]',"my name");

Answer 2

您需要先切换输入以使其在 DOM 中可用（直到此元素只是 <script> 标记内的 Angular 模板）。正如 Tanuj 所写：您应该使用只有一个实例的选择器。例如：

await page.click('#em5682795 > a'); // "Refer friends for extra entries"
await page.type('[class="entry-method  expanded"] input[name="name"]',"my name");

Answer 3

现有答案很有用，但这应该完整提交并给你分享 URL。

因为这个 AngularJS 应用程序似乎不怎么使用 ID 和类，使用文本内容似乎是点击几个按钮的合理选择。

我必须使用 .evaluate(el => el.click()) 而不是 .click() 才能成功单击其中一个按钮，如所述。

const puppeteer = require("puppeteer");

const clickXPath = async (page, xp) => {
  await page.waitForXPath(xp);
  const [el] = await page.$x(xp);
  await el.evaluate(el => el.click());
};

const randomEmail = () => 
  Array(10).fill().map(() => 
    String.fromCharCode(~~(Math.random() * 26 + 97))
  ).join("") + 
  `${(Math.random() + "").replace(/\./, "")}@gmail.com`
;

let browser;
(async () => {
  const url = "https://gleam.io/hxVaH/win-a-krooked-big-eyes-too-skateboard";
  browser = await puppeteer.launch({headless: false});
  const [page] = await browser.pages();
  await page.goto(url, {waitUntil: "networkidle0"});
  await clickXPath(page, `//span[contains(text(), "Refer Friends")]`);
  const nameSel = '[class="entry-method  expanded"] input[name="name"]';
  const emailSel = '[class="entry-method  expanded"] input[name="email"]';
  await page.waitForSelector(nameSel);
  await page.type(nameSel, "my name33");
  await page.type(emailSel, randomEmail());

  const hasText = () => page.evaluate(() => 
    !!document.querySelector(".share-link__link")?.innerText.trim()
  );

  for (let tries = 1000; !(await hasText()) && tries--;) {
    await clickXPath(page, `//span[contains(text(), "Save")]`);
    await page.waitForTimeout(100);
  }

  const shareCode = await page.$eval(".share-link__link", el => el.innerText);
  console.log(shareCode); // => https://wn.nr/w9Wz5p
})()
  .catch(err => console.error(err))
  .finally(async () => await browser.close())
;

在没有 id 或标识属性的情况下填写输入字段时出现问题。（木偶师）

Problem filling in an input field without an id or identifying attribute. (Puppeteer)

javascript

node.js

puppeteer

在没有 id 或标识属性的情况下填写输入字段时出现问题。 （木偶师）

Problem filling in an input field without an id or identifying attribute. (Puppeteer)

javascript

node.js

puppeteer

在没有 id 或标识属性的情况下填写输入字段时出现问题。（木偶师）