failed to record interaction with react select components

[mdah90]

Hi, tried to record interaction with websites with react components, failed for example with select and multiselect. the generated code is not working.

to reproduce the issue you can try this: 1-go to https://jedwatson.github.io/react-select/ 2- start recording 2- from the first select : select victoria 3- from the second select: 3.1- select chocolate 3.2- select vanilla 4- stop recording

the generated script: (i added the last waitFor command to see that it doesn't work)

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

  await page.goto('https://jedwatson.github.io/react-select/')

  await page.setViewport({ width: 1920, height: 937 })

  await page.waitForSelector('.section > .Select > .Select-control > #react-select-2--value > .Select-value')
  await page.click('.section > .Select > .Select-control > #react-select-2--value > .Select-value')

  await page.waitForSelector('.section > .Select > .Select-control > #react-select-3--value > .Select-placeholder')
  await page.click('.section > .Select > .Select-control > #react-select-3--value > .Select-placeholder')

  await page.waitForSelector('#example > div > .section > .is-focused > .Select-control')
  await page.click('#example > div > .section > .is-focused > .Select-control')

  await page.waitFor(10000)

  await browser.close()
})()

[tnolet]

@mdah90 thanks for reporting. Can you give an analysis on why it's not working and what you would expect the generated code to look like?

[mdah90]

thanks for replying, i looked into this, it looks that maybe puppeteer recorder assumes static html. however the react select option will be created and added to the html only after opening the drop down menu. so for example to fix the first select: 1- first click the select arrow 2- select the value

so it will work if you replace the following lines

await page.waitForSelector('.section > .Select > .Select-control > #react-select-2--value > .Select-value')
await page.click('.section > .Select > .Select-control > #react-select-2--value > .Select-value')

with :

//click the select arrow 
await page.waitForSelector('.section > .Select > .Select-control > .Select-arrow-zone > .Select-arrow')
await page.click('.section > .Select > .Select-control > .Select-arrow-zone > .Select-arrow')
//select the value 
await page.waitForSelector('#react-select-2--option-2')
await page.click('#react-select-2--option-2')

[tnolet]

Yeah, looks like this should be a manual edit. A solution could be to have Puppeteer explicitly wait for the elements to appear in the DOM. There is now way no to do that with the recorder.