Puppeteer 不改变选择器

Question

我正在尝试使用 Puppeteer 自动执行在 this site 上查询数据的任务。所以我需要选择数据集（每日摘要，第一个选项），然后选择位置类型（州，第三个选项），然后选择州（阿拉斯加，第二个选项）。问题是我的代码没有更改为下一张表。因此，在数据集（每日摘要）中选择第一个选项后，它不会选择第三个选项（状态），而是再次选择数据集表中的第三个选项！我是 Puppeteer 的新手，所以我真的不知道该怎么做。任何帮助表示赞赏。

下面是我的代码：

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({headless:false})
  const page = await browser.newPage()

  const navigationPromise = page.waitForNavigation()

  await page.goto('https://www.ncdc.noaa.gov/cdo-web/datatools/selectlocation')

  await page.waitForSelector('.selectLocationFilters > .datasetContainer > .slideElement > #datasetSelect > option:nth-child(1)')
  await page.click('.selectLocationFilters > .datasetContainer > .slideElement > #datasetSelect > option:nth-child(1)')

  await page.select('.inset #locationCategorySelect', '')

  await page.waitForSelector('.selectLocationFilters > .locationCategoryContainer > .locationCategoryFilter > #locationCategorySelect > option:nth-child(3)')
  await page.click('.selectLocationFilters > .locationCategoryContainer > .locationCategoryFilter > #locationCategorySelect > option:nth-child(3)')

  await page.select('.inset #selectedState', '')

  await page.waitForSelector('.selectLocationFilters > .locationContainer > .stateFilter > #selectedState > option:nth-child(2)')
  await page.click('.selectLocationFilters > .locationContainer > .stateFilter > #selectedState > option:nth-child(2)')

  await browser.close()
})()

这就是我想要的。数据集 -> 位置类型 -> 阿拉斯加州。相反，代码只在数据集表中进行选择。

Answer 1

您遇到的问题是 CSS 过渡会阻止您单击这些元素。一种可能的解决方案是禁用页面上的所有 CSS 动画。

您可以在goto 调用之后添加：

await page.addStyleTag({ content : `
    *,
    *::after,
    *::before {
        transition-delay: 0s !important;
        transition-duration: 0s !important;
        animation-delay: -0.0001s !important;
        animation-duration: 0s !important;
        animation-play-state: paused !important;
        caret-color: transparent !important;
    }`})