我刚刚在 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} 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;
如果你不了解 React,那么只需考虑 return
语句中的内容,这是基本的 HTML。
我想用 Puppeteer 执行 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();
});
注意,link
常量和接下来的 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 上正确搜索 😂
有什么线索吗?
最佳答案
您不能从 page.$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");
关于javascript - 从 Puppeteer 中的单个选择器获取多个属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59190266/