一个简单的解决方案是显而易见的。我在测试的index.html 中添加了以下内容
我正在使用Polymer/web组件测试仪来运行组件的自动测试。
我遇到过一个问题，如果在隔离状态下运行，组件测试将通过，但当使用文件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>
尝试单击按钮时失败。
我想有多种方法可以解决这个问题，包括在我自己的测试中（例如，检查视口大小与元素位置，并在尝试模拟点击之前滚动），但开始变得相当棘手/脆弱。一个合理的选择可能是向wct添加一个配置，该配置指定组件iFrame上的最小视口大小。
也许我缺少一些可用的配置，可以在这里提供帮助。有没有推荐的方法来处理这种情况？
<style>
#subsuites {
width: 600px !important;
}
</style>
wct工具使用的css将宽度设置为50%，并在使用文件globs时嵌套帧，从而导致逐渐缩小。