聚合物网络组件的测试失败是由于变种浏览器窗口大小 [英] Polymer web-component-tester failing due to variant browser viewport sizes
问题描述
我使用的是聚合物/网络组件测试仪来运行自动化测试我的部分。
I'm using the Polymer/web-component-tester to run automated tests of my components.
我使用一个文件运行水珠时遇到一个问题：如果单独运行一个组件测试会通过，但是失败 - 例如：
I've run into an issue where a component test will pass if run in isolation, but fail when run using a file glob - for example:
FAILS: wct components/**/test
SUCCEEDS: wct components/btn-component/test
挖公平一点后，我发现原因是在浏览器行为的改变：在两种情况下启动的浏览器有两个iFrame中并排侧，用正确的显示测试进度，左侧显示零件。该晶片被测试的显著窄左（组件）iFrame的运行结果。
After a fair bit of digging, I found the reason is the change in browser behaviour: in both cases the launched browser has two iFrames side-by-side, with the right one showing the test progress, and the left showing the component. The globbed test run results in a significantly narrower left (component) iFrame.
在使用聚合物手势来模拟鼠标点击，较窄的iFrame导致的问题，因为它往往呈现一个水平滚动条，改变组件的可点击
When using polymer-gestures to simulate mouse clicks, the narrower iFrame causes issues because it can often render a horizontal scrollbar and change a component's clickability.
以下是组分放大器的一个例子;这本身未能如描述的测试。它呈现一个取消按钮几百像素的权利
The following is an example of a component & test that fails as described. It renders a Cancel button a few hundred pixels to the right.
组件
<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>
在故障发生试图点击该按钮。
The fail happens trying to click the button.
我想有各种各样的方式来处理解决这一点 - 包括我自己的测试（例如检查视口大小VS元素位置，并试图模拟点击前向右滚动），但开始变得相当繁琐/脆弱。一个合理的选择可能是一个配置添加到WCT指定的组件的iFrame最小视口大小。
I guess there's a variety of ways to approach resolving this - including in my own tests (e.g. checking the viewport size vs the element position and scrolling right before trying to simulate a click), but starts to get quite fiddly/fragile. A reasonable option might be to add a config to wct that specifies a minimum viewport size on the component iFrame.
也许我错过了一些可用的配置，可以帮助在这里。是否有处理这种情况的一个推荐的方法？
Perhaps I'm missing some available configuration that could help here. Is there a recommended way to handle this scenario?
推荐答案
一个简单的解决方案是pretty明显。我增加了以下我测试的的index.html
A simple solution is pretty obvious. I added the following to my test's index.html
<style>
#subsuites {
width: 600px !important;
}
</style>
由WCT工具使用的CSS文件使用时，水珠在设定50％的巢框的宽度 - 从而逐步缩小
The css used by the wct tool sets the width at 50% and nests frames when using file globs - resulting in progressive narrowing.
这篇关于聚合物网络组件的测试失败是由于变种浏览器窗口大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
