使用puppeteer从输入标签获取选择器

问题描述

所以，我在React.js或Ember.js中有一个前端-不确定。我只是想自动化一些测试。在Chrome开发工具中查看HTML时，我看到了

<label class="MuiFormlabel-root-16 MuiInputLabel-root-5 MuiInputLabel-formControl-10 MuiInputLabel-animated-13 MuiInputLabel-outlined-15" data-shrink="false">Username</label>

这是在iframe中设置的（此问题不太重要）。我正在尝试使用puppeteer函数获取ElementHandler

frame.$(selector)

如何获得选择器

用户名

我尝试了一些尝试，但收效甚微。

解决方法

如果我理解正确，则需要根据其文本内容查找元素。如果是这样，则至少有两种方式：

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch(); // { headless: false,defaultViewport: null,args: ['--lang=en'] }
    const [page] = await browser.pages();

    await page.goto('https://example.org/');

    const element1 = await page.evaluateHandle(() => {
      return [...document.querySelectorAll('h1')].find(h1 => h1.innerText === 'Example Domain');
    });
    console.log(await (await element1.getProperty('outerHTML')).jsonValue());

    const [element2] = await page.$x('//h1[text()="Example Domain"]');
    console.log(await (await element2.getProperty('outerHTML')).jsonValue());

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();

,

我的解决方案是将HTML数据属性放在前端代码中，以便我可以轻松地选择它们。