傀儡师；获取元素内的值

发布于 2025-01-18 01:50:35 字数 3346 浏览 3 评论 0原文

我被困在这里。

我有多行带有class rowcontent。

我得到了这样的东西：

const rows = await page.$$('.row-content');

几乎每排的行都与名为CashSpan的班级都有许多跨度。

我想在一个称为“值”的数组中获取这些值。

我尝试了很多事情，但没有成功，

for (let m = 0; m < rows.length; m++) {
        const row = await rows[m];
const values = await row.evaluate(() => Array.from(row.getElementsByClassName('cashspan'), element => element.textContent));
 console.log(values)
}

这是我尝试过的最新事情。

我

const spancashs = await page.evaluate(() => Array.from(document.querySelectorAll('[class="cashspan"]'), element => element.textContent));

在页面上获取所有元素。但是我需要每行。希望这是有道理的。

Update1

示例：

<div class="container">
        <div class="row-content">
            <div class="someclass1">
                <div class="someclass2">
                    <span class="cashspan">1</span>
                </div>
            </div>
            <div class="someclass3">
                <div class="someclass4">
                    <span class="cashspan">2</span>
                </div>
            </div>
            <div class="someclass5">
                <div class="someclass6">
                    <span class="cashspan">3</span>
                </div>
            </div>
        </div>
        <div class="row-content">
            <div class="someclass7">
                <div class="someclass8">
                    <span class="cashspan">4</span>
                </div>
            </div>
            <div class="someclass9">
                <div class="someclass10">
                    <span class="cashspan">5</span>
                </div>
            </div>
            <div class="someclass11">
                <div class="someclass12">
                    <span class="cashspan">6</span>
                </div>
            </div>
        </div>
        <div class="row-content">
            <div class="someclass13">
                <div class="someclass14">
                    <span class="cashspan">7</span>
                </div>
            </div>
            <div class="someclass15">
                <div class="someclass16">
                    <span class="cashspan">8</span>
                </div>
            </div>
            <div class="someclass17">
                <div class="someclass18">
                    <span class="cashspan">9</span>
                </div>
            </div>
        </div> 
     </div>

代码：

 const rows = await page.$$('.row-content');
    
 for (let i = 0; i < rows.length; i++) {
        const row = await rows[i];
        const values = await row.evaluate(() => 
        Array.from(row.getElementsByClassName('cashspan'), element => 
        element.textContent));
   console.log(values)
 }

我正在尝试在每个行容器中获取所有CashSpan值。此示例的输出应为：

[ 1, 2, 3 ]
[ 4, 5, 6 ]
[ 7, 8 ,9 ]

原文

I'm stuck here.

I got multiple rows with class rowcontent.

I get them like that:

const rows = await page.$('.row-content');

Almost every row in rows got many spans with the class named cashspan.

I would like to get those values in an array called 'values'.

I've tried much to many things with no success

for (let m = 0; m < rows.length; m++) {
        const row = await rows[m];
const values = await row.evaluate(() => Array.from(row.getElementsByClassName('cashspan'), element => element.textContent));
 console.log(values)
}

this was the latest thing I've tried.

With

const spancashs = await page.evaluate(() => Array.from(document.querySelectorAll('[class="cashspan"]'), element => element.textContent));

I get all the elements on the page. But i need them for every row. Hope that makes sense.

Update1

Example:

<div class="container">
        <div class="row-content">
            <div class="someclass1">
                <div class="someclass2">
                    <span class="cashspan">1</span>
                </div>
            </div>
            <div class="someclass3">
                <div class="someclass4">
                    <span class="cashspan">2</span>
                </div>
            </div>
            <div class="someclass5">
                <div class="someclass6">
                    <span class="cashspan">3</span>
                </div>
            </div>
        </div>
        <div class="row-content">
            <div class="someclass7">
                <div class="someclass8">
                    <span class="cashspan">4</span>
                </div>
            </div>
            <div class="someclass9">
                <div class="someclass10">
                    <span class="cashspan">5</span>
                </div>
            </div>
            <div class="someclass11">
                <div class="someclass12">
                    <span class="cashspan">6</span>
                </div>
            </div>
        </div>
        <div class="row-content">
            <div class="someclass13">
                <div class="someclass14">
                    <span class="cashspan">7</span>
                </div>
            </div>
            <div class="someclass15">
                <div class="someclass16">
                    <span class="cashspan">8</span>
                </div>
            </div>
            <div class="someclass17">
                <div class="someclass18">
                    <span class="cashspan">9</span>
                </div>
            </div>
        </div> 
     </div>

Code:

 const rows = await page.$('.row-content');
    
 for (let i = 0; i < rows.length; i++) {
        const row = await rows[i];
        const values = await row.evaluate(() => 
        Array.from(row.getElementsByClassName('cashspan'), element => 
        element.textContent));
   console.log(values)
 }

I'm trying to get all cashspan values in every row-content container. The output for this example should be:

[ 1, 2, 3 ]
[ 4, 5, 6 ]
[ 7, 8 ,9 ]

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

丑丑阿 2025-01-25 01:50:36

根据评论，evaluate() 回调中的 row 变量从未在浏览器上下文中定义。将该变量添加到 evaluate() 回调参数列表中对我提供的示例很有用。这是下面唯一的非装饰性更改：

const puppeteer = require("puppeteer"); // ^13.5.1

const html = `
<body>
<div class="container">
  <div class="row-content">
    <div class="someclass1">
      <div class="someclass2">
        <span class="cashspan">1</span>
      </div>
    </div>
    <div class="someclass3">
      <div class="someclass4">
        <span class="cashspan">2</span>
      </div>
    </div>
    <div class="someclass5">
      <div class="someclass6">
        <span class="cashspan">3</span>
      </div>
    </div>
  </div>
  <div class="row-content">
    <div class="someclass7">
      <div class="someclass8">
        <span class="cashspan">4</span>
      </div>
    </div>
    <div class="someclass9">
      <div class="someclass10">
        <span class="cashspan">5</span>
      </div>
    </div>
    <div class="someclass11">
      <div class="someclass12">
        <span class="cashspan">6</span>
      </div>
    </div>
  </div>
  <div class="row-content">
    <div class="someclass13">
      <div class="someclass14">
        <span class="cashspan">7</span>
      </div>
    </div>
    <div class="someclass15">
      <div class="someclass16">
        <span class="cashspan">8</span>
      </div>
    </div>
    <div class="someclass17">
      <div class="someclass18">
        <span class="cashspan">9</span>
      </div>
    </div>
  </div>
</div>
</body>
`;

let browser;
(async () => {
  browser = await puppeteer.launch({headless: true});
  const [page] = await browser.pages();
  await page.setContent(html);
  const rows = await page.$('.row-content');

  for (let i = 0; i < rows.length; i++) {
    const row = await rows[i];
    const values = await row.evaluate(row => Array.from(
      row.getElementsByClassName('cashspan'),
      element => element.textContent
    ));
    console.log(values);
  }
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close())
;

如果这在实时站点上不起作用，则问题可能是由于任意数量的 JS 行为、可见性或计时问题造成的，因此需要更多详细信息才能准确地重现问题。

Following up on the comments, the row variable inside of evaluate()'s callback was never defined in browser context. Adding that variable to the evaluate() callback parameter list worked for me on the provided example. This is the only non-cosmetic change below:

const puppeteer = require("puppeteer"); // ^13.5.1

const html = `
<body>
<div class="container">
  <div class="row-content">
    <div class="someclass1">
      <div class="someclass2">
        <span class="cashspan">1</span>
      </div>
    </div>
    <div class="someclass3">
      <div class="someclass4">
        <span class="cashspan">2</span>
      </div>
    </div>
    <div class="someclass5">
      <div class="someclass6">
        <span class="cashspan">3</span>
      </div>
    </div>
  </div>
  <div class="row-content">
    <div class="someclass7">
      <div class="someclass8">
        <span class="cashspan">4</span>
      </div>
    </div>
    <div class="someclass9">
      <div class="someclass10">
        <span class="cashspan">5</span>
      </div>
    </div>
    <div class="someclass11">
      <div class="someclass12">
        <span class="cashspan">6</span>
      </div>
    </div>
  </div>
  <div class="row-content">
    <div class="someclass13">
      <div class="someclass14">
        <span class="cashspan">7</span>
      </div>
    </div>
    <div class="someclass15">
      <div class="someclass16">
        <span class="cashspan">8</span>
      </div>
    </div>
    <div class="someclass17">
      <div class="someclass18">
        <span class="cashspan">9</span>
      </div>
    </div>
  </div>
</div>
</body>
`;

let browser;
(async () => {
  browser = await puppeteer.launch({headless: true});
  const [page] = await browser.pages();
  await page.setContent(html);
  const rows = await page.$('.row-content');

  for (let i = 0; i < rows.length; i++) {
    const row = await rows[i];
    const values = await row.evaluate(row => Array.from(
      row.getElementsByClassName('cashspan'),
      element => element.textContent
    ));
    console.log(values);
  }
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close())
;

If this isn't working on the live site, the problem could be due to any number of JS behaviors, visibility or timing issues, so more detail would be necessary to accurately reproduce the problem.

回复收藏 0 原文

~没有更多了~