CODEWITHSUNDEEP
puppeteer
Eric
Eric

Reputation: 13

Selecting dropdown option with puppeteer

Trying to automate selection of a dropdown item in the Wunderground/wundermap (https://www.wunderground.com/wundermap) and struggling a bit. The selection item isn't named, and gets a random ID every page load (common element to the ID, but new numbers). The element is:

<select aria-label="Map Types" class="header-select ng-pristine ng-valid ng-touched" style="width: 200px;" id="mapTypes0.3556425555390934"><option title="Show street map with terrain" value="terrain" selected="selected">Terrain</option><option title="Show Dark Map" value="darkmap">Dark Map</option><option title="Show Light Map" value="lightmap">Light Map</option><option title="Show satellite imagery" value="satellite">Satellite</option><option title="Show imagery with street names" value="hybrid">Hybrid</option></select>

Trying to select darkmap using puppeteer.

I've tried a couple of page eval options but they don't seem to be finding the element. Any suggestions?

Upvotes: 1

Views: 293

Answers (1)

vsemozhebuty
vsemozhebuty

Reputation: 13792

This seems working:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({ headless: false, defaultViewport: null });

try {
  const [page] = await browser.pages();

  await page.goto('https://www.wunderground.com/wundermap');

  const select = await page.waitForSelector('select[aria-label="Map Types"]');
  await select.select('darkmap');
} catch (err) { console.error(err); }

Upvotes: 1

Related Questions