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

Question

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

现在我想为该页面编写集成测试。为此，我正在使用 zombie.js 和版本 4.2.1（旧的，我知道，但我坚持使用它）。但是，我在尝试加载页面时遇到错误。该问题显然是在尝试将编辑器加载到 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" 的值时发生的。这是元素：

该元素是在创建时插入到编辑器中的，代表编辑器的内容，开头为空

我尝试使用 zombies 调试功能，但是，由于在站点加载时发生错误，我真的没有机会输出任何有用的信息。据我所知，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： 所以我设法 "mock" CKEdtor 使用 this answer。这不是我想要的，但我决定暂时尝试使用它。但是，现在我得到了完全相同的错误！这次错误是在我自己的代码里面抛出的：

# 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-* 属性的值？也许有人对僵尸很了解并且可以提供进一步的见解？

Answer 1

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

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

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

Zombie.js unable to access dataset property of DOM elements

javascript

ckeditor

mocha.js

integration-testing

zombie.js

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

Zombie.js unable to access dataset property of DOM elements

javascript

ckeditor

mocha.js

integration-testing

zombie.js

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