title: Jest + Playwright - Test callbacks of event-based DOM library
body: <p>I have a <a href="https://yaireo.github.io/color-picker/" rel="nofollow noreferrer">library</a> which I wish to test, which is a simple <em>color picker</em>.</p>
  <p>I want to test the DOM callbacks (which the events-of the library handles internally) are fired.
  and was wondering what would be the correct approach to test it.</p>
  <ul>
  <li>Does Playwright has access to the <code>cPicker</code> object on the page?</li>
  <li>Does it has access to the <code>window</code> object?</li>
  <li>Should I trigger the events from the HTML file itself, and in the callbacks, print in the DOM the result, in some dummy-element, and then infer from that dummy element text that the callbacks fired?</li>
  </ul>
  <p>I'm unsure of the range of possibilities in such scenario - <br>If anyone knows, please assist, <strong>thank you</strong>.</p>
  <h3><code>/tests/visual/basic.html</code></h3>
  <pre class="lang-html prettyprint-override"><code>&lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;script src=&quot;/dist/color-picker.min.js&quot;&gt;&lt;/script&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;/dist/styles.css&quot;&gt;
  &lt;script type=&quot;module&quot;&gt;
      const cPicker = new ColorPicker({
          onClickOutside(e){
          },
          onInput(color){
          },
          onChange(color){
          }
      })
  
      document.body.appendChild(cPicker.DOM.scope)
  &lt;/script&gt;
  </code></pre>
  <h3>Jest Test (with PlayWright)</h3>
  <pre class="lang-js prettyprint-override"><code>it('Should call all callbacks with correct arguments', async() =&gt; {
      await page.goto(`http://localhost:5000/tests/visual/basic.html`, {waitUntil:'load'})
  
      // Wait until the next frame
      await page.evaluate(() =&gt; new Promise(requestAnimationFrame))
  
      // TODO: Wtite the test which infers onInput/onChange/onClickOutside callbacks fired
  })
  </code></pre>