Puppeteer MUI Material Select Programatically Select Option

mui-select-puppeteer.jsx

// struggled to figure this out, hopefully this helps you!

// component
import { Select, MenuItem, FormControl } from '@material-ui/core'

const SelectRamen = () => (
  <FormControl id="select-ramen">
    <InputLabel>Pick Your Ramen</InputLabel>
    <Select>
      {options.map((opt, i) => <MenuItem key={i} value={opt}>{opt.name}</MenuItem>)}
    </Select>
  </FormControl>
)

// e2e test
const puppeteer = require('puppeteer')
const browser = puppeteer.launch()
const page = browser.newPage()

async function muiSelectOption(buttonSelector, optionValue) {
  await page.waitForSelector(buttonSelector)
  await page.$eval(buttonSelector, el => {
    const event = new MouseEvent('mousedown')
    event.initEvent('mousedown', true, true)
    return el.dispatchEvent(event)
  })
  const liSelector = `li[data-value="${optionValue}"]`
  await page.waitForSelector(liSelector)
  await page.$eval(liSelector, e => e.click())
}

muiSelectOption('#select-ramen[role="button"]', 'Mi-So-Good')