在没有id或标识属性的情况下填写输入字段时出现问题。(木偶戏演员)

Question

下面是我想要输入的input元素：

<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

现有的答案很有用，但这应该会完成完整的提交，并为您提供共享URL。

由于这个AngularJS应用程序似乎不太使用ids和类，因此使用文本内容似乎是点击几个按钮的合理选择。

按照here的描述，我必须使用.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())
;

Answer 2

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

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

Answer 3

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

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