Polymer web-component-tester 由于浏览器视口大小不同而失败

Question

我正在使用 Polymer/web-component-tester 到运行组件的自动化测试。

我已经运行遇到一个问题，如果运行隔离，组件测试将通过，但当运行使用文件 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>

点击按钮失败。

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

也许我遗漏了一些可能对此处有所帮助的可用配置。有推荐的方法来处理这种情况吗？

Answer 1

一个简单的解决方案非常明显。我将以下内容添加到我的测试 index.html

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

wct 工具使用的 css 将宽度设置为 50%，并在使用文件 glob 时嵌套框架 - 导致逐渐变窄。

Polymer web-component-tester 由于浏览器视口大小不同而失败

Polymer web-component-tester failing due to variant browser viewport sizes

automated-tests

polymer