时间戳

首页 > 解决方案 > 使用 Javascript 对类名发生变化的网站进行 Web 抓取

javascript - 使用 Javascript 对类名发生变化的网站进行 Web 抓取

问题描述

我正在尝试使用 Puppeteer 将地址输入到 ubereats (www.ubereats.com)。我已经意识到，在输入地址之前，我必须等待某个图标先加载，否则文本就会被删除。为此，我正在使用：

page.waitForSelector("#wrapper > main > div.ao.ap.aq.ar.af > div.ag.bq.br.bs.bt > div > div.c1.af.bh.c2 > div > div.av.b3.ax > div > svg > path");

目前有效。然而，问题是类名偶尔会改变。我没有看到任何明显的变化模式。我尝试使用 page.waitForXPath() 代替，因为没有涉及类名，但它不起作用。有什么办法可以绕过更改的类名？谢谢！

编辑：添加了一些示例 HTML。这些是通往我等待加载的图标的最里面的几个 div。其中一些类名随机更改。

<div class="bi bj c3 at c4 c5 bd ae ar c6 c7 av af an">
   <div class="av b3 ax">
      <div class="c8 b1 c9">
         <svg width="24px" height="24px" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-hidden="true" focusable="false">
            <path d="M17.5834 5.16602C14.5001 2.08268 9.50008 2.08268 6.41675 5.16602C3.33341 8.24935 3.33341 13.3327 6.41675 16.416L12.0001 21.9993L17.5834 16.3327C20.6667 13.3327 20.6667 8.24935 17.5834 5.16602ZM12.0001 12.416C11.0834 12.416 10.3334 11.666 10.3334 10.7493C10.3334 9.83268 11.0834 9.08268 12.0001 9.08268C12.9167 9.08268 13.6667 9.83268 13.6667 10.7493C13.6667 11.666 12.9167 12.416 12.0001 12.416Z" fill="#000000"></path>
         </svg>
      </div>
   </div>
   <div class="b3 ca ah b5 b6"></div>
   <input role="combobox" aria-expanded="false" id="location-typeahead-home-input" aria-autocomplete="list" aria-controls="location-typeahead-home-menu" aria-labelledby="location-typeahead-home-label" autocomplete="off" value="" placeholder="Enter delivery address" class="bh bd cb cc">
   <div class="b3 ca ah b5 b6"></div>
</div>

标签： javascriptweb-scrapingpuppeteer

解决方案

根据您的 HTML，如果此图标仅在页面中出现一次，则使用属性选择器可能会起作用，首先，搜索路径，svg 的子项，其属性“d”以“M17.5834 5.16602C14.5001”开头2.08268":

page.waitForSelector('svg > path[d^="M17.5834 5.16602C14.5001 2.08268"]');

然后，输入选择器，找到与“输入收货地址”相同的属性“占位符”的输入：

input[placeholder="Enter delivery address"]

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

推荐阅读