Fatal编程技术网
  • automated-tests/
  • Automated tests Polymer web组件测试器因浏览器视口大小不同而失败

Automated tests Polymer web组件测试器因浏览器视口大小不同而失败

automated-tests polymer

Automated tests Polymer web组件测试器因浏览器视口大小不同而失败,automated-tests,polymer,Automated Tests,Polymer,我正在使用运行组件的自动化测试 我遇到了一个问题，组件测试在隔离运行时将通过，但在使用文件glob运行时失败-例如： FAILS: wct components/**/test SUCCEEDS: wct components/btn-component/test 经过一番挖掘，我发现原因在于浏览器行为的变化：在这两种情况下，启动的浏览器都有两个iFrame并排，右侧显示测试进度，左侧显示组件。全局测试运行会导致左侧（组件）iFrame显著变窄 当使用聚合手势模拟鼠标单击时，较窄的iFr

我正在使用运行组件的自动化测试

我遇到了一个问题，组件测试在隔离运行时将通过，但在使用文件glob运行时失败-例如：

FAILS:    wct components/**/test
SUCCEEDS: wct components/btn-component/test
经过一番挖掘，我发现原因在于浏览器行为的变化：在这两种情况下，启动的浏览器都有两个iFrame并排，右侧显示测试进度，左侧显示组件。全局测试运行会导致左侧（组件）iFrame显著变窄

当使用聚合手势模拟鼠标单击时，较窄的iFrame会导致问题，因为它通常会呈现水平滚动条并更改组件的可单击性

下面是一个组件和测试失败的示例，如所述。它会将取消按钮渲染到右侧几百像素处

组件

<link rel="import" href="../../bower_components/polymer/polymer.html">

<polymer-element name="btn-component" attributes="name">
  <template>
    <style>
    :host {
      display: block;
      width: 400px;
    }
    </style>

    <div layout horizontal>
      <span flex></span>
      <div id="cancel_button" on-tap="{{cancel}}">Cancel</div>
    </div>
  </template>

  <script>
    Polymer({
      ready: function() {
        console.log("btn-component component ready!");
      },

      cancel: function(event, detail, sender) {
        console.log("Cancel Btn!", event, detail, sender);

        this.fire('cancel_btn', {});
      }
    });
  </script>
</polymer-element>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>btn-component Tests</title>

  <script src="../../../bower_components/webcomponentsjs/webcomponents.js"></script>
  <script src="../../../bower_components/web-component-tester/browser.js"></script>
  <script src="../../../bower_components/polymer-gestures/test/js/fake.js"></script>

  <link href="../btn-component.html" rel="import">

</head>
<body>

<btn-component id="component"></btn-component>

<script>
  function runAfterEvent(eventName, element, callback) {
    var listener = function(event) {
      element.removeEventListener(eventName, listener)
      callback(event.detail);
    };
    element.addEventListener(eventName, listener);
  }

  suite('<btn-component>', function() {
    var c = document.getElementById('component');
    var fake = new Fake();

    test('hitting cancel fires cancel event', function(done) {
      runAfterEvent('cancel_btn', c, function(event) {
        assert.ok(1, "the cancel_btn event should be fired");

        done();
      });

      var cancelBtn = document.querySelectorAll("btn-component /deep/ #cancel_button")[0];

      console.log(cancelBtn);

      setTimeout(function() {
        fake.downOnNode(cancelBtn);
        fake.upOnNode(cancelBtn);
      }, 1000);
    });
  });
</script>


：主持人{
显示：块；
宽度：400px；
}
取消
聚合物({
就绪：函数（）{
log（“btn组件就绪！”）；
},
取消：功能（事件、详细信息、发件人）{
日志（“取消Btn！”，事件，细节，发送者）；
此.fire（'cancel_btn'，{}）；
}
});
测试

<link rel="import" href="../../bower_components/polymer/polymer.html">

<polymer-element name="btn-component" attributes="name">
  <template>
    <style>
    :host {
      display: block;
      width: 400px;
    }
    </style>

    <div layout horizontal>
      <span flex></span>
      <div id="cancel_button" on-tap="{{cancel}}">Cancel</div>
    </div>
  </template>

  <script>
    Polymer({
      ready: function() {
        console.log("btn-component component ready!");
      },

      cancel: function(event, detail, sender) {
        console.log("Cancel Btn!", event, detail, sender);

        this.fire('cancel_btn', {});
      }
    });
  </script>
</polymer-element>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>btn-component Tests</title>

  <script src="../../../bower_components/webcomponentsjs/webcomponents.js"></script>
  <script src="../../../bower_components/web-component-tester/browser.js"></script>
  <script src="../../../bower_components/polymer-gestures/test/js/fake.js"></script>

  <link href="../btn-component.html" rel="import">

</head>
<body>

<btn-component id="component"></btn-component>

<script>
  function runAfterEvent(eventName, element, callback) {
    var listener = function(event) {
      element.removeEventListener(eventName, listener)
      callback(event.detail);
    };
    element.addEventListener(eventName, listener);
  }

  suite('<btn-component>', function() {
    var c = document.getElementById('component');
    var fake = new Fake();

    test('hitting cancel fires cancel event', function(done) {
      runAfterEvent('cancel_btn', c, function(event) {
        assert.ok(1, "the cancel_btn event should be fired");

        done();
      });

      var cancelBtn = document.querySelectorAll("btn-component /deep/ #cancel_button")[0];

      console.log(cancelBtn);

      setTimeout(function() {
        fake.downOnNode(cancelBtn);
        fake.upOnNode(cancelBtn);
      }, 1000);
    });
  });
</script>


btn组件测试
函数runAfterEvent（eventName、元素、回调）{
var listener=函数（事件）{
元素。removeEventListener（事件名称，侦听器）
回调（event.detail）；
};
元素addEventListener（eventName，listener）；
}
套件（“”，函数（）{
var c=document.getElementById（'component'）；
var fake=new fake（）；
测试（'点击取消触发取消事件'，函数（完成）{
runAfterEvent（'cancel_btn'，c，函数（事件）{
assert.ok（1，“应该触发cancel_btn事件”）；
完成（）；
});
var cancelBtn=document.querySelectorAll（“btn组件/deep/#取消按钮”）[0]；
console.log（cancelBtn）；
setTimeout（函数（）{
fake.downOnNode（cancelBtn）；
伪.upOnNode（cancelBtn）；
}, 1000);
});
});
尝试单击按钮时失败

我想有多种方法可以解决这个问题——包括在我自己的测试中（例如，在尝试模拟单击之前检查视口大小和元素位置，并滚动），但开始变得相当棘手/脆弱。一个合理的选择可能是向wct添加一个配置，该配置指定组件iFrame上的最小视口大小

也许我缺少一些可以在这里提供帮助的可用配置。有没有推荐的方法来处理这种情况？

一个简单的解决方案是显而易见的。我在测试的index.html中添加了以下内容

<style>
  #subsuites {
    width: 600px !important;
  }
</style>


#子套件{
宽度：600px！重要；
}
wct工具使用的css将宽度设置为50%，并在使用文件globs时嵌套帧-导致逐渐缩小