Javascript 从Puppeter中的单个选择器获取多个属性
我刚刚在app.js中创建了一个新的React应用程序,其中包含以下内容:Javascript 从Puppeter中的单个选择器获取多个属性,javascript,html,reactjs,puppeteer,Javascript,Html,Reactjs,Puppeteer,我刚刚在app.js中创建了一个新的React应用程序,其中包含以下内容: import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} cl
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
如果你不知道反应,那么只考虑“代码”>返回语句中的内容,这是基本的HTML。< /P> 我想用Puppeter执行E2E测试,因此我的**App.test.js••看起来像:
import puppeteer from "puppeteer";
let browser;
let page;
beforeAll(async () => {
browser = await puppeteer.launch({
headless: false
});
page = await browser.newPage();
await page.goto("http://localhost:3000/");
});
test("renders learn react link", async () => {
await page.waitForSelector(".App");
const header = await page.$eval(".App-header>p", e => e.innerHTML);
expect(header).toBe(`Edit <code>src/App.js</code> and save to reload.`);
const link = await page.$eval(".App-header>a", e => e);
expect(link.innerHTML).toBe(`Learn React`);
expect(link.href).toBe("https://reactjs.org");
console.log(link);
});
afterAll(() => {
browser.close();
});
请注意,链接
是常量,接下来是4行。它们不起作用。一种有效的方法是我执行以下操作:
const linkInnerHTML = await page.$eval(".App-header>a", e => e.innerHTML);
const linkHref = await page.$eval(".App-header>a", e => e.href);
expect(linkInnerHTML).toBe(`Learn React`);
expect(linkHref).toBe("https://reactjs.org");
但是,我希望能够调用选择器.App header>a
一次&然后调用innerHTML
和href
。
我知道这很简单,但似乎无法在Google上正确搜索您无法从
页面返回整个节点元素。$eval
因为它们不可序列化,但您可以返回如下简单对象:
const link = await page.$eval(".App-header>a", e => {
return {
InnerHTML : e.innerHTML,
Href : e.href,
}
});
expect(link.InnerHTML).toBe(`Learn React`);
expect(link.Href).toBe("https://reactjs.org");
很高兴我能帮忙!