Zombie.js 无法访问 DOM 元素的数据集属性

Posted 2023-03-07

【中文标题】Zombie.js 无法访问 DOM 元素的数据集属性

【英文标题】：Zombie.js unable to access dataset property of DOM elements

【发布时间】：2020-07-10 16:50:55

【问题描述】：

我有一个包含富文本编辑器的页面。为此，我使用了 CKEditor。您将一个 div 元素传递给它，它会将编辑器加载到该元素中。

现在我想为该页面编写集成测试。为此，我正在使用版本 4.2.1 的zombie.js（旧的，我知道，但我坚持使用它）。但是，我在尝试加载页面时遇到错误。该问题显然是在尝试将编辑器加载到 div 元素时发生的。这是相关的输出：

[some other resources loading]
  zombie GET http://localhost:10003/js/lib/ckeditor.js => 200 +0ms
  zombie GET http://localhost:10003/js/pages/categories/init.js => 200 +0ms
  zombie http://localhost:10003/js/lib/ckeditor.js:6623
                e.dataset.ckeFiller = true;
                                    ^

TypeError: Cannot set property 'ckeFiller' of undefined
    at au (http://localhost:10003/js/lib/ckeditor.js:6623:37)
    at Module.<anonymous> (http://localhost:10003/js/lib/ckeditor.js:7326:24)
    at n (http://localhost:10003/js/lib/ckeditor.js:57:22)
    at http://localhost:10003/js/lib/ckeditor.js:100:20
    at http://localhost:10003/js/lib/ckeditor.js:101:10
    at t (http://localhost:10003/js/lib/ckeditor.js:47:258)
    at http://localhost:10003/js/lib/ckeditor.js:48:7
    at Script.runInContext (vm.js:133:20)
    at Object.runInContext (vm.js:311:6)
    at window._evaluate (/home/laura/Projekte/fricke/hybristools/node_modules/zombie/lib/document.js:253:75)
    in http://localhost:10003/categories +68ms
Debug-Output hier:
undefined
 http://localhost:10003/js/lib/ckeditor.js:6623
                e.dataset.ckeFiller = true;
                                    ^

TypeError: Cannot set property 'ckeFiller' of undefined
    at au (http://localhost:10003/js/lib/ckeditor.js:6623:37)
    at Module.<anonymous> (http://localhost:10003/js/lib/ckeditor.js:7326:24)
    at n (http://localhost:10003/js/lib/ckeditor.js:57:22)
    at http://localhost:10003/js/lib/ckeditor.js:100:20
    at http://localhost:10003/js/lib/ckeditor.js:101:10
    at t (http://localhost:10003/js/lib/ckeditor.js:47:258)
    at http://localhost:10003/js/lib/ckeditor.js:48:7
    at Script.runInContext (vm.js:133:20)
    at Object.runInContext (vm.js:311:6)
    at window._evaluate (/home/laura/Projekte/fricke/hybristools/node_modules/zombie/lib/document.js:253:75)
    in http://localhost:10003/categories
  cause:
   http://localhost:10003/js/lib/ckeditor.js:6623
                   e.dataset.ckeFiller = true;
                                       ^

   TypeError: Cannot set property 'ckeFiller' of undefined
       at au (http://localhost:10003/js/lib/ckeditor.js:6623:37)
       at Module.<anonymous> (http://localhost:10003/js/lib/ckeditor.js:7326:24)
       at n (http://localhost:10003/js/lib/ckeditor.js:57:22)
       at http://localhost:10003/js/lib/ckeditor.js:100:20
       at http://localhost:10003/js/lib/ckeditor.js:101:10
       at t (http://localhost:10003/js/lib/ckeditor.js:47:258)
       at http://localhost:10003/js/lib/ckeditor.js:48:7
       at Script.runInContext (vm.js:133:20)
       at Object.runInContext (vm.js:311:6)
       at window._evaluate (/home/laura/Projekte/fricke/hybristools/node_modules/zombie/lib/document.js:253:75)
       in http://localhost:10003/categories,
  isOperational: true 

我知道该错误与 CKEditor 无关，因为我使用另一个富文本编辑器进行了尝试，它给了我完全相同的错误（只是属性名称不同）。

该错误显然是在尝试设置 br 元素的 html 属性“data-cke-filler”的值时发生的。这是元素：

那个元素是在创建的时候插入到编辑器中的，它代表编辑器的内容，开头是空的。

我尝试使用僵尸调试功能，但是，由于在站点加载时发生错误，我真的没有机会输出任何有用的东西。据我所知，zombie.js 应该能够处理加载此页面。

所以我的问题是： 是什么导致了这个错误，我该如何解决？

如果您需要更多信息，请告诉我。

谢谢。

编辑：

这是我加载页面的代码（它是用 CoffeeScript 编写的）：

require 'should'
Browser = require '../../support/browser'

describe 'editor page', ->

  browser = new Browser(debug: true)

  before (done) ->
    browser.debug()
    browser.visitLoggedIn('/', name: 'tester', password: 'secret')
      .then (done) ->
        browser.visitPage '/editor' # this is what doesn't work
      .then (done) ->
        console.log 'page loaded'
      .catch (error) ->
        console.error error

  it 'things should appear', ->
    ...

visitLoggedIn 方法是一种自定义方法，它只创建必要的 cookie 以作为经过身份验证的用户浏览应用程序并使用 visitPage 访问页面。 visitPage 使用僵尸 visit 方法。这些在此应用程序的所有其他集成测试中都可以正常工作。

---

编辑 2： 所以我设法使用this answer“模拟”CKedtor。这不是我想要的，但我决定暂时尝试使用它。但是，现在我得到了完全相同的错误！这次错误是在我自己的代码中抛出的：

# These are two functions that are run shortly after inserting the editor into the page,
# so basically while the page is still loading. 
getLanguageChoice: -> # This one is executed first
    document.getElementById('language').value

  getMandantChoice: -> # This one second
    document.getElementById('shopClient').dataset.name # The error is thrown here

这是确切的错误：

TypeError: Cannot read property 'name' of undefined
    at Object.CategoriesView.getMandantChoice (http://localhost:10003/js/pages/categories/view.js:49:59)
    at http://localhost:10003/js/pages/categories/app.js:22:97
    at process._tickCallback (internal/process/next_tick.js:68:7)

这对我来说没有任何意义。这是否意味着僵尸无法访问 data-* 属性的值？也许有人了解僵尸并可以提供进一步的见解？

【问题讨论】：

你能分享你的代码的相关部分吗？

你的代码在哪一行崩溃？

@LajosArpad 它在调用browser.visitPage('/editor') 时崩溃，这只是zombie.js 提供的方法browser.visit() 的包装。该行产生我发布的错误输出。

【参考方案1】：

在进一步了解我获得的新见解后，我在项目的 Github 页面上找到了this ticket。看起来数据集属性未在使用版本的基础库中实现。由于我无法升级，因此无法按原样加载页面...

为了解决这个问题，我将重构我的代码以不使用 data-* 属性。幸运的是，这与我的工作量无关。