Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/417.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/80.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/shell/5.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 从Puppeter中的单个选择器获取多个属性_Javascript_Html_Reactjs_Puppeteer - Fatal编程技术网

Javascript 从Puppeter中的单个选择器获取多个属性

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

我刚刚在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;

如果你不知道反应,那么只考虑“代码”>返回语句中的内容,这是基本的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");

很高兴我能帮忙!