Jest + Playwright - 测试基于事件的 DOM 库的回调答案

【问题标题】：Jest + Playwright - Test callbacks of event-based DOM libraryJest + Playwright - 测试基于事件的 DOM 库的回调
【发布时间】：2021-01-05 23:18:24
【问题描述】：

我有一个想要测试的library，它是一个简单的颜色选择器。

我想测试触发了 DOM 回调（库的事件在内部处理）。并且想知道测试它的正确方法是什么。

Playwright 是否有权访问页面上的 cPicker 对象？
它是否有权访问window 对象？
我是否应该从 HTML 文件本身触发事件，并在回调中，在 DOM 中打印结果，在一些虚拟元素中，然后从回调触发的虚拟元素文本中推断？

我不确定这种情况下的可能性范围 -
如果有人知道，请提供帮助，谢谢。

`/tests/visual/basic.html`

<meta charset="utf-8">
<script src="/dist/color-picker.min.js"></script>
<link rel="stylesheet" href="/dist/styles.css">
<script type="module">
    const cPicker = new ColorPicker({
        onClickOutside(e){
        },
        onInput(color){
        },
        onChange(color){
        }
    })

    document.body.appendChild(cPicker.DOM.scope)
</script>

玩笑测试（使用 PlayWright）

it('Should call all callbacks with correct arguments', async() => {
    await page.goto(`http://localhost:5000/tests/visual/basic.html`, {waitUntil:'load'})

    // Wait until the next frame
    await page.evaluate(() => new Promise(requestAnimationFrame))

    // TODO: Wtite the test which infers onInput/onChange/onClickOutside callbacks fired
})

【问题讨论】：

标签： javascript jestjs dom-events webautomation playwright

【解决方案1】：

这个问题非常接近“需要更多关注”的问题。但让我们试着给它一些重点：

Playwright 是否有权访问页面上的 cPicker 对象？它是否可以访问窗口对象？

是的，您可以在评估调用中同时访问 cPicker 和窗口对象。

我是否应该从 HTML 文件本身触发事件，并在回调中，在 DOM 中打印结果，在一些虚拟元素中，然后从回调触发的虚拟元素文本中推断？

完全正确，或者您可以为 javascript 变量赋值：

const cPicker = new ColorPicker({
  onClickOutside(e){
  },
  onInput(color){
    window['color'] = color;
  },
  onChange(color){
    window['result'] = color;
  }
})

然后

it('Should call all callbacks with correct arguments', async() => {
    await page.goto(`http://localhost:5000/tests/visual/basic.html`, {waitUntil:'load'})

    // Wait until the next frame
    await page.evaluate(() => new Promise(requestAnimationFrame))

    // Act
   
    // Assert
    const result = await page.evaluate(() => window['color']);
    // Check the value
})

【讨论】：