错误：未能找到< img data-src =" url>的元素匹配选择器 [英] Error: failed to find element matching selector for <img data-src="url>

问题描述

在Puppeteer上运行，全部更新。

Running on Puppeteer, all updated.

目标流程是访问网站，其中url是url / {搜索项目}并运行搜索名称列表。然后，对于每个搜索项目 - >搜索页面，获取每个列表的名称，价格和图像URL。现在有错误，它无法找到选择器。感谢任何帮助，非常感谢！

The intended process is to go to website, where url is url/{search item} and run through the list of search names. Then for each search item --> search page, get name, price and image url for each listing. Now theres error it cannot find selector. Appreciate any help on this, many thanks!

网站数据的布局如下：

<div class="items-box-content">
   <section class="items-box">
      <a href="https://listingurl">
         <figure class="items-box-photo">
            <img data-src="https://imageurl.jpg" class=" lazyloaded" src="https://imageurl.jpg">
         </figure>
         <div class="items-box-main">
            <h3 class="items-box-name"> listing name </h3>

            <div class="items-box-figure">
               <div class="items-price font-4"> $29.95 </div> // item's price
            </h3>
         </div>

我现在拥有的是（这会引发错误）：

const puppeteer = require('puppeteer');
const searches = ["a", "b", "c"]; //appended to url
(async () => {
   const browser = await puppeteer.launch({ headless: false });
   let results =[];
   for (const search of searches) {
         try {
            page = await browser.newPage();
            await page.goto(`https://weburl/?keyword=${search}`);
            await page.evaluate(() => { document.querySelector('div[class*="items-box"]').scrollIntoView();});
            let elements = await page.$$('div[class*="items-box"]');
            for (let element of elements) {
               let listImg = await element.$eval(('img[class="items-box-photo]'), img => img.getAttribute('src'));
               let listTitle = await element.$eval(('d[class="items-box-main"] > h[class="items-box-name"]'), node => node.innerText.trim());
               let listPrice = await element.$eval(('d[class="items-box-figure"] > d[class="items-price"]'), node => node.innerText.trim());
               let listUrl = await element.$eval(('d[class="items-box-content"] > a[class*="items-box"]'), node => node.getAttribute('href'));

               results.push({ 
                  listImg, 
                  listTitle, 
                  listPrice, 
                  listUrl 
               })
               return results;
            }
         } finally {
            await page.close
         }
   }
})();

抛出的错误是

（节点：5168）UnhandledPromiseRejectionWarning：错误：错误：
找不到元素匹配选择器img [class =items-box-photo]

(node:5168) UnhandledPromiseRejectionWarning: Error: Error: failed to find element matching selector "img[class="items-box-photo]"

推荐答案

问题出现在错误信息中（错误：找不到元素匹配选择器... ）。

The problem is right there in the error message (Error: failed to find element matching selector ...).

选择器在以下行中是错误的：

The selectors are wrong in the following lines:

let listImg = await element.$eval(('img[class="items-box-photo]'), img => img.getAttribute('src'));
let listTitle = await element.$eval(('d[class="items-box-main"] > h[class="items-box-name"]'), node => node.innerText.trim());
let listPrice = await element.$eval(('d[class="items-box-figure"] > d[class="items-price"]'), node => node.innerText.trim());
let listUrl = await element.$eval(('d[class="items-box-content"] > a[class*="items-box"]'), node => node.getAttribute('href'));

根据您提供的HTML代码，这些代码应为：

According to the HTML code you have given, these should be:

let listImg = await element.$eval('img.lazyloaded', img => img.getAttribute('src'));
let listTitle = await element.$eval('h3.items-box-name', node => node.innerText.trim());
let listPrice = await element.$eval('div.items-price', node => node.innerText.trim());
let listUrl = await element.$eval('div.items-box-content a', node => node.getAttribute('href'));

注意，而不是使用 [class = ...] 查询类的正确方法是使用类选择器：。

Note, that instead of using [class=...] the proper way to query a class is by using the class selector: .

这篇关于错误：未能找到< img data-src =" url>的元素匹配选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！