Кукольник не меняет селектор

Question

Я пытаюсь автоматизировать задачу запроса данных на этом сайте с помощью Puppeteer. Поэтому мне нужно выбрать набор данных (ежедневные сводки, 1-й вариант), затем выбрать тип местоположения (штат, 3-й вариант), затем выбрать штат (Аляска, 2-й вариант). Проблема в том, что мой код не переходит в следующую таблицу. Поэтому вместо выбора 3-го варианта (Состояние) после выбора 1-го варианта в наборе данных (Ежедневные сводки) он просто выбирает 3-й вариант, но снова в таблице набора данных! Я новичок в 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;
    }`})