title: UnhandledPromiseRejectionWarning: Error: Evaluation failed: ReferenceError: options is not defined
body: <pre><code>const puppeteer = require('puppeteer');
  (async () =&gt; {
  const browser = await puppeteer.launch();
  const options = [&quot;iframe&quot;]
  const url = 'https://www.loungeincomfort.com.au/'
  const page = await browser.newPage();
  await page.goto(url);
  for (var i = 0; i &lt; options.length; i++) {
      const frame = await page.$$eval(options[i], e =&gt; e.map(a =&gt; {
          const attrs = a.getAttributeNames();
          const len = attrs.length;
          const test = {};
          for (var i = 0; i &lt; len; i++) {
              //test[attrs[i]].push({ label: &quot;Hello World&quot; })
              test[attrs[i]] = a.getAttribute(attrs[i])
          }
          return test;
      }))
      console.log(frame);
  }
  await browser.close();
  })();
  </code></pre>
  <p>output is like this:</p>
  <pre><code>    [
      {
      &quot;width&quot;: &quot;640&quot;,
      &quot;height&quot;: &quot;360&quot;,
      &quot;src&quot;: &quot;https://www.youtube.com/embed/ZJPsDBCD4XU&quot;,
      &quot;frameborder&quot;: &quot;0&quot;,
      &quot;allow&quot;: &quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot;,
      &quot;allowfullscreen&quot;: &quot;&quot;
      }
      ]
  </code></pre>
  <p>I want to add to the output the options[i] and the url I have added this in my code</p>
  <pre><code>        const test = {
               &quot;object&quot;: options[i],
               &quot;page&quot;: url
           };
  </code></pre>
  <p>but I get an error that options is not defined and I get the same error with url if I removed the &quot;object&quot;: options[i],</p>
  <p>What should I do to resolve this error?</p>
  <p>So I have another problem in my output</p>
  <p>output is like this:</p>
  <pre><code>[{
      &quot;width&quot;: &quot;1170&quot;,
      &quot;height&quot;: &quot;490&quot;,
      &quot;style&quot;: &quot;visibility: visible; width: 100%; margin-left: 0px; height: 301.538px; margin-top: -3.26923px; position: absolute;&quot;
  }]
  </code></pre>
  <p>I want to separate the style output into objects to be like this</p>
  <p>I did some research about it and I couldn't find anything useful</p>
  <pre><code>[{
      &quot;width&quot;: &quot;1170&quot;,
      &quot;height&quot;: &quot;490&quot;,
      &quot;style&quot;: {
             &quot;visibility&quot;: &quot;visible&quot;,
             &quot;width&quot;: &quot;100%&quot;,
             &quot;margin-left&quot;: &quot;0px&quot;,
             &quot;height&quot;: &quot;301.538px&quot;,
             &quot;margin-top&quot;: &quot;-3.26923px&quot;,
              &quot;position&quot;: &quot;absolute&quot;
  
  }}]
  </code></pre>
  <p>Thanks in advance :)</p>