Jest + Playwright - 测试基于事件的 DOM 库的回调 /tests/visual/basic.html玩笑测试使用 PlayWright

编程问答 2022-06-01

问题描述

我有一个想要测试的 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
})

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dom-eventsjavascriptjestjsplaywrightwebautomation