javascript - 聚合物 Selenium 测试访问子元素数据

在firebase登录元素中，我有

<paper-button id="btnLogin" data-dialog="login-modal" on-tap="toggleLogin">
    <iron-icon icon="account-box"></iron-icon>
    Login
</paper-button>

toggleLogin调用的位置：

toggleLogin: function() {this.$.loginModal.toggle();},

在Polymer测试套件中，我正在使用：

Polymer.dom(element.root).querySelector('#btnLogin').click();

但是硒给了我以下错误：

this.$.loginModal.toggle is not a function

长话短说，如何单击按钮并检查弹出的模态？

注意：Polymer团队的测试如下所示：

Polymer.dom(myEl.root).querySelector('button').click()

由于他们正在命名其元素myEl而不是element，并且正在寻找按钮标签而不是ID为btnLogin的标签，所以我觉得我的解决方案是合适的。我在这里做错了什么？

更新：

在查看绑定事件时，我仍然无法正常工作。

码：

var btnLogin = Polymer.dom(myEl.root).querySelector('#btnLogin');
// This does the same thing as
// var btnLogin = element.$.btnLogin;
btnLogin.click.bind(btnLogin);

上面的代码使我可以越过该行，但实际上并没有切换对话框。我不知道为什么。当我添加click()而不是click时，它给了我一直在努力解决的this.$.loginModal.toggle() is not defined错误。

更新：

仍然没有找到一个好的答案。正在研究可能有帮助的代码，并找到了想要了解有关其内容元素信息的子菜单元素。我将在下面包括他们的测试。

码：

  suite('<paper-submenu>', function() {
    var menu,
        sub1, sub2, sub3,
        collapse1, collapse2, collapse3,
        trigger1, trigger2, trigger3;
    setup(function() {
      menu = fixture('basic');
      sub1 = menu.querySelectorAll('paper-submenu')[0];
      sub2 = menu.querySelectorAll('paper-submenu')[1];
      sub3 = menu.querySelectorAll('paper-submenu')[2];
      collapse1 = Polymer.dom(sub1.root).querySelector('iron-collapse');
      collapse2 = Polymer.dom(sub2.root).querySelector('iron-collapse');
      collapse3 = Polymer.dom(sub3.root).querySelector('iron-collapse');
      trigger1 = sub1.querySelector('.menu-trigger');
      trigger2 = sub2.querySelector('.menu-trigger');
      trigger3 = sub3.querySelector('.menu-trigger');
    });
    test('selecting an item expands the submenu', function() {
      assert.isFalse(collapse1.opened);
      assert.isFalse(collapse2.opened);
      assert.isFalse(collapse3.opened);
      MockInteractions.tap(trigger1);
      assert.isTrue(collapse1.opened);
      assert.isFalse(collapse2.opened);
      assert.isFalse(collapse3.opened);
    });

按照上面的示例，我尝试了以下操作：

test('Login Modal Opens', function(done) {
  expect(loginModal).to.exist;
  console.log(loginModal);
  console.dir(loginModal);
  expect(loginModal.opened).to.exist;

  assert.isFalse(loginModal.opened);

  btnLogin.click.bind(btnLogin);

  assert.isTrue(loginModal.opened);
});

不幸的是我得到了loginModal.opened的定义。 loginModal.toggle()给出切换不是功能错误。

更新：

我发现绑定实际上没有调用该函数。它仅将this绑定到新位置。因此，当我执行btnLogin.click.bind(btnLogin)时，它正在进行绑定，因此当我调用btnLogin.click()时，它将具有对btnLogin的绑定，而不是... btnLogin。因此，仅调用btnLogin.click()而无需调用bind函数将是相同的。

现在已经弄清楚了，我决定把call而不是bind弄乱了，但是我还是只将this绑定到相同的作用域，所以没有帮助。然后我尝试了btnLogin.click.call(element)，但它仍然给我一个错误，即this。$。loginModal.toggle不是一个函数。

最佳答案

只是个疯狂的猜测，我不太了解JS

var el = Polymer.dom(element.root).querySelector('#btnLogin');
el.click().bind(el)();