map is not a function in testcafe

Question

I am not able to use a map function inside a client function.

 export function availableAudioBitrates() {
  const getOptionNames = ClientFunction(() => {
    const select = document.querySelector('[data-testid=audioBitrate-setting]');
    const options = select.querySelectorAll('option');
    console.log(typeof options);
    //const values = [];
    const values = options.map((option) => option.TextContent);

    //options.forEach((option) => values.push(option.textContent));
    return values;
  });
  return getOptionNames();
}

I have "options.foreach" statement working, but with map function, it is throwing an error that options.map is not a function.

Answer 1

Because that is a HTMLCollection, not an array. Use Array.form(select.querrySelectorAll('option')).

export function availableAudioBitrates() {
  const getOptionNames = ClientFunction(() => {
    const select = document.querySelector('[data-testid=audioBitrate-setting]');
    const options = Array.from(select.querySelectorAll('option'));
    console.log(typeof options);
    //const values = [];
    const values = options.map((option) => option.TextContent);

    //options.forEach((option) => values.push(option.textContent));
    return values;
  });
  return getOptionNames();
}

Answer 2

Check the value of options, its either undefined or not an array. .map() requires an array to run, anything else will cause that error