title: Handling disabled select options in puppeteer
body: <p>I need to select from a dropdown with Puppeteer - the option is not important but is required to submit the form. Problem is that the dropdown may contain several disabled options and I can't seem to exclude these. </p>
  
  <p>This is to add an item with options to the cart in a test checkout. The add to cart button is disabled until the correct options are selected. </p>
  
  <p>As the options select is dynamic and changes for every product I have no way of knowing which of the options are enabled and in stock. </p>
  
  <p>I've originally tried to select first item selectedindex = 1, then also tried to use a variety of methods to exclude attributes:</p>
  
  <pre><code>const option = (await page.$x(
      '//*[@id = "selectID"]/option[disabled=null]'
    ))[0];
  const value = await (await option.getProperty('value')).jsonValue();
  await page.select('#selectID', value);
  
  
  
  &lt;select name="Color" id="selectID" pseudoid="1" class="select" style="border: 1px solid lightgray; width: 190px;" selectedindex="0"&gt;&lt;option value="-1"&gt;- Select -&lt;/option&gt;
  
  &lt;option id="opt-0" outofstock="true" value="0" disabled="disabled" style="color: rgb(204, 204, 204);"&gt;Black[out of stock]&lt;/option&gt;
  
  &lt;option id="opt-1" outofstock="true" value="1" disabled="disabled" style="color: rgb(204, 204, 204);"&gt;Blue[out of stock]&lt;/option&gt;
  
  &lt;option id="opt-2" outofstock="true" value="2" disabled="disabled" style="color: rgb(204, 204, 204);"&gt;Red[out of stock]&lt;/option&gt;
  
  &lt;option id="opt-3" outofstock="true" value="3" disabled="disabled" style="color: rgb(204, 204, 204);"&gt;Chocolate[out of stock]&lt;/option&gt;
  
  &lt;option id="opt-4" value="4" style="color: black;"&gt;Green Camouflage&lt;/option&gt;
  
  &lt;option id="opt-5" outofstock="true" value="5" disabled="disabled" style="color: rgb(204, 204, 204);"&gt;Pink Camouflage[out of stock]&lt;/option&gt;
  
  &lt;option id="opt-6" value="6" style="color: black;"&gt;Arctic Blue Camouflage&lt;/option&gt;&lt;/select&gt;
  </code></pre>
  
  <p>I would like to identify the first option which is in stock. </p>
  
  <p>I can select any option based on attributes it has or even text / values but where the option does not have the text or an attribute I cannot seem to do this.</p>