Puppeteer - 如何点击内部元素

Question

我正在使用 Puppeteer 对使用 React 和 Material-UI 构建的应用程序进行 e2e 测试。

在我的登录表单中，我试图点击登录按钮，但我得到了loginBtn.click is not a function - 这是因为 Material UI（版本 0.21.0）用一个额外的 div 包装了<RaisedButton>，所以我只能到达外部元素。我需要一种方法来访问内部元素，然后模拟点击事件。

我试过了：

const loginBtn = await page.$eval(
    '.login-form-button', 
    (element) => element.innerHTML
);
await loginBtn.click();

但似乎element.innerHTML 只是一个文本，不可点击。

任何想法如何获得内部元素？

Answer 1

page.$eval 选择一个元素 (.login-form-button) 并将该元素传递给第二个参数 ((element) => element.innerHTML)，在您的情况下，它将以字符串形式返回节点的 HTML。因此loginBtn 不是按钮而是字符串。要单击您可能想要使用的元素page.click。

如果您要执行更复杂的术语，我建议您使用page.evaluate。在您的情况下，您可以像这样使用它来查询元素并单击其第一个子元素：

await page.evaluate(() => {
  document.querySelector('.login-form-button').firstElementChild.click();
});