Puppeteer $.eval 选择嵌套元素

Question

可以说我给出的情况像这个页面

<div id="details-container" class="style-scope ytd-channel-about-metadata-renderer">
         <yt-formatted-string class="subheadline style-scope ytd-channel-about-metadata-renderer">Details</yt-formatted-string>
        <table class="style-scope ytd-channel-about-metadata-renderer">
          <tbody class="style-scope ytd-channel-about-metadata-renderer"><tr class="style-scope ytd-channel-about-metadata-renderer">
            <td class="label style-scope ytd-channel-about-metadata-renderer">
              <yt-formatted-string class="style-scope ytd-channel-about-metadata-renderer"></yt-formatted-string>
            </td>
            <td class="style-scope ytd-channel-about-metadata-renderer">
              <ytd-button-renderer align-by-text="" class="style-scope ytd-channel-about-metadata-renderer" button-renderer=""></ytd-button-renderer>
              <div id="captcha-container" class="style-scope ytd-channel-about-metadata-renderer"></div>
              <div id="email-container" class="style-scope ytd-channel-about-metadata-renderer"></div>
              <a id="email" target="_blank" class="style-scope ytd-channel-about-metadata-renderer" href="mailto:undefined" hidden=""></a>
            </td>
          </tr>
          <tr class="style-scope ytd-channel-about-metadata-renderer">
            <td class="label style-scope ytd-channel-about-metadata-renderer">
              <yt-formatted-string class="style-scope ytd-channel-about-metadata-renderer"><span class="deemphasize style-scope yt-formatted-string"> Location:   </span></yt-formatted-string>
            </td>
            <td class="style-scope ytd-channel-about-metadata-renderer">
              <yt-formatted-string class="style-scope ytd-channel-about-metadata-renderer">YourCountry</yt-formatted-string>
            </td>
          </tr>
        </tbody></table>
      </div>

假设我需要获取“YourCountry”，我实际上如何获取此元素？

到目前为止我尝试过：

  const location = await page.$$eval(
    "#details-container > table > tbody:nth-child(1) > tr:nth-child(1) > yt-formatted-string",
    locationEl => locationEl.innerHTML
  );
console.log(location) // Undefined

不知道该怎么做，尝试只返回 tr 然后再次评估 tr[1] 不起作用，因为它说 tr 没有函数 .$$eval。

请注意，我正在使用 apify 来获取页面。

Answer 1

在您提供的 HTML 中，您想要的元素是第二个元素下yt-formatted-string第二个元素的直接子元素，但您尝试将其与第二个元素的直接子元素匹配。您需要修复您的选择器。例如：tdtryt-formatted-stringtr

\n\n

\r\n

\r\n

console.log("HTML:", document.querySelector("#details-container > table > tbody > tr:nth-child(2) > td:nth-child(2) > yt-formatted-string").innerHTML)

\r\n

<div id="details-container" class="style-scope ytd-channel-about-metadata-renderer">\r\n  <yt-formatted-string class="subheadline style-scope ytd-channel-about-metadata-renderer">Details</yt-formatted-string>\r\n  <table class="style-scope ytd-channel-about-metadata-renderer">\r\n    <tbody class="style-scope ytd-channel-about-metadata-renderer">\r\n      <tr class="style-scope ytd-channel-about-metadata-renderer">\r\n        <td class="label style-scope ytd-channel-about-metadata-renderer">\r\n          <yt-formatted-string class="style-scope ytd-channel-about-metadata-renderer"></yt-formatted-string>\r\n        </td>\r\n        <td class="style-scope ytd-channel-about-metadata-renderer">\r\n          <ytd-button-renderer align-by-text="" class="style-scope ytd-channel-about-metadata-renderer" button-renderer=""></ytd-button-renderer>\r\n          <div id="captcha-container" class="style-scope ytd-channel-about-metadata-renderer"></div>\r\n          <div id="email-container" class="style-scope ytd-channel-about-metadata-renderer"></div>\r\n          <a id="email" target="_blank" class="style-scope ytd-channel-about-metadata-renderer" href="mailto:undefined" hidden=""></a>\r\n        </td>\r\n      </tr>\r\n      <tr class="style-scope ytd-channel-about-metadata-renderer">\r\n        <td class="label style-scope ytd-channel-about-metadata-renderer">\r\n          <yt-formatted-string class="style-scope ytd-channel-about-metadata-renderer"><span class="deemphasize style-scope yt-formatted-string"> Location:   </span></yt-formatted-string>\r\n        </td>\r\n        <td class="style-scope ytd-channel-about-metadata-renderer">\r\n          <yt-formatted-string class="style-scope ytd-channel-about-metadata-renderer">YourCountry</yt-formatted-string>\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>

\r\n

\r\n

\r\n

\n\n

并且您应该能够调用$$eval&c。如果你有一个ElementHandle. 问题是你的选择器\xe2\x80\x99不匹配，所以你没有\xe2\x80\x99t。

\n