问题描述
所以,我在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数据属性放在前端代码中,以便我可以轻松地选择它们。