javascript - 从 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} 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 一次,然后调用 innerHTMLhref . 我知道这很简单,但似乎无法在 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/

相关文章:

javascript - Rails 应用程序中搜索框的自动过滤

javascript - 如何在 Chart.js 中将 Y 轴值从数字更改为字符串?

javascript - 如果我在屏幕上来回移动,为什么 useState 的状态会突然恢复为 false?

javascript - 避免资源管理器在 srcElement 中抛出错误

jquery - slider 不适用于 div 但适用于图像

node.js - server.js 中的内存泄漏 | react /表达/SSR

reactjs - react 谷歌地图 : Can't get bounds

javascript - jTemplate 中未找到函数

javascript - 如何确定播放 HTML5 音频是否真的发出声音?

javascript - 在 React-Native 中使用 Navigator 组件自定义导航