标签: web-component
从技术角度来看,Selenium如何点击网页上的元素？
如果有人知道解决更大问题的替代方法,则提供上下文.
问题背景
我正率先为使用Web组件的Web应用程序开发测试自动化框架.这在Internet Explorer中进行测试时出现了问题,因为Internet Explorer本身不支持Web组件; 相反,polyfill用于提供此功能.
对此的主要反应是,Selenium的大部分将无法按预期工作.它无法像在Firefox和Chrome中那样"看到"Internet Explorer中的Shadow DOM.
另一种方法是编写一个测试框架,它提供了一种通过JavaScript访问元素的替代机制 - 这允许元素通过polyfill定位.
我们当前的实现检查WebDriver正在使用的,并使用方法的原始Selenium实现(在Chrome或Firefox的情况下),或者我们自己的替代实现(在Internet Explorer的情况下).
这意味着我们希望我们的实现尽可能接近Selenium的实现,其核心是浏览器交互级别.
问题
我试图复制的功能Actions.click(WebElement onElement)(源),以简化形式(不继的生成器设计模式Actions类,并使得假设该点击是与鼠标左键并没有其他按键(Ctrl,Shift,Alt)正在举行下).
我想找到处理点击的核心代码(特别是在Chrome,Firefox和Internet Explorer中),所以我可以尽可能地复制它,但是我发现自己迷失在类和接口的深层. ..
创建一个新的ClickAction(源)(以后执行).执行此操作包括对Mouse接口实例(源)进行"click()"调用... aaaa并且我丢失了.我从生成的JavaDoc中看到,它是由EventFiringMouse(源代码)或HtmlUnitMouse(源代码)实现的,但我不确定将实现哪一个.我做了一个假设(没什么基础)HtmlUnitMouse可以使用,这让我进一步深入兔子洞看Gargoyle Software的HTMLUnit代码 ......
简而言之,我完全迷失了.
任何指导将不胜感激:)
研究
- 我发现我认为ChromeUnit,Firefox和Internet Explorer使用HTMLUnit是不正确的.文档显示
RemoteWebDriver(源)由子类ChromeDriver,FirefoxDriver和InternetExplorerDriver.
selenium web-component polyfills selenium-webdriver remotewebdriver
推荐指数
解决办法
查看次数
你如何检查浏览器中的CSS变量？
:root {
--my-colour: #000;
}
并像这样访问它们:
.my-element {
background: var( --my-colour );
}
哪个工作正常.
但是,我想知道是否有一种调试或检查:rootCSS规则的方法,以查看已定义的变量,以及它们的值是什么？
根据我的理解,:root选择器和html选择器都针对相同的元素,但是当我html使用Chrome的调试工具检查元素时,我看不到任何定义:
有没有办法找出已定义的变量及其值？
推荐指数
解决办法
查看次数
将表单传递给AngularJS组件进行验证
我正在将我的遗留代码库移植到使用AngularJS 1.5推广的新组件架构.我在为更大的表单执行此操作时遇到了问题.传统上,我会附加表单验证如下:
<form name="myForm">
<input type="text" name="input1" ng-model="vm.input1" required />
<div ng-messages="myForm.input1.$error">
<div ng-message="required">Please fill out this field.</div>
</div>
<!-- many more inputs -->
</form>
转换到组件体系结构时,我必须将表单显式传递给组件:
<form name="vm.myForm">
<my-awesome-input-component model="vm.input1" form="vm.myForm"><my-awesome-input-component>
<!-- many more inputs -->
</form>
我想避免vm用我的表格污染.有没有更好的方法来实现表单所需的组件架构？
推荐指数
解决办法
查看次数
扩展HTMLElement:使用webpack时构造函数失败
我将以下TypeScript程序转换为ES5:
档案1:
class BaseElement extends HTMLElement {
constructor() {
super();
}
}
文件2:
import {BaseElement} from './BaseElement';
class MyElement extends BaseElement {
constructor() {
super();
}
}
var el = new MyElement();
将所有内容手动放入文件中,代码工作正常并在浏览器中执行,HTMLElement构造没有问题.但是,只要我通过webpack打包它,我收到以下错误消息:
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
没有webpack,构造了以下JS代码:
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor …推荐指数
解决办法
查看次数
如何使用带有Rails的聚合物(1.0)(4)？
现在Polymer(1.0)是"生产就绪"哪个是在Rails上使用它的最佳方式(4)？
我看了很多,我看到所有的解决方案都被弃用了(例如使用Gems,比如:likepolymer-rails,emcee等)
我没有尝试为项目创造一个好的结构,以及包含所有聚合物组件的方式,我也不知道Sprocket是否能提供帮助.
推荐指数
解决办法
查看次数
原生形式的自定义输入元素
对于Web组件,人们想要创建和覆盖的元素之一是<input>.输入元素很糟糕,因为它们很多东西取决于它们的类型而且通常难以定制,因此人们总是想要修改它们的外观和行为是正常的.
两年前或多或少,当我第一次听说Web组件时,我非常兴奋,我想要创建的第一种元素是自定义输入元素.现在规范已经完成,看起来我对输入元素的需求没有得到解决.Shadow DOM应该允许我改变它们的内部结构和外观但是输入元素被列入黑名单并且不能有阴影根,因为它们已经有一个隐藏的.如果我想添加额外的逻辑和行为,带有is属性的自定义内置元素应该可以解决问题; 我无法做影子DOM魔法,但至少我有这个,对吧？好吧Safari不会实现它,聚合物不会因为这个原因而使用它们,它们的气味就像很快就会被弃用的标准.
所以我留下了正常的自定义元素; 他们可以使用shadow DOM并拥有我想要的任何逻辑,但我希望它们是输入!他们应该在一个内部工作<form>,但如果我是正确的,表单元素不喜欢它们.我是否必须编写自己的自定义表单元素,以复制本机的所有内容？我必须告别FormData,验证API等吗？我是否失去了使用没有javascript工作的输入表单的能力？
推荐指数
解决办法
查看次数
Polymer和WebComponentsReady事件
根据Polymer docs,WebComponentsReady事件是必要的,因为......
polyfills解析元素定义并异步处理它们的升级.如果您在有机会升级之前过早地从DOM中获取元素,那么您将使用HTMLUnknownElement.在这些情况下,请在与元素交互之前等待WebComponentsReady事件
我有一个HTML页面,它导入一个Web组件并注册一个处理程序,该处理程序在加载所有Web组件时记录语句:
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="elements/my-element.html">
</head>
<body unresolved>
<my-element></my-element>
<script>
window.addEventListener('WebComponentsReady', function(e) {
console.log('components ready');
});
</script>
</body>
</html>
为什么WebComponentsReady事件在my-element的ready聚合物事件之前触发？我需要知道何时可以与自定义元素进行交互,例如更改其属性并调用其公共方法.
推荐指数
解决办法
查看次数
Web组件在IE11和Edge中实际可用吗？
Web组件是热门的新事物,也是一个真正的Web标准,每个人都在谈论它们并且可能使用它们,它们似乎是我们遇到的问题的完美解决方案(在不同的站点之间共享组件).
所以我们构建了几个Web组件.Chrome中的工作正常,但IE11中没有.使用polyfill可能吗？https://www.webcomponents.org/polyfills有大量的polyfills,但IE11一直在抱怨class.
也许编译成ES5？各种来源声称Web组件需要ES6,因为您在IE11中没有从HTMLElement获得相同类型的继承.有自定义元素-es5-adapter.js,但不知何故它不起作用.如果我编译下来,webcomponents不起作用.如果我不这样做,IE11就会失败class.
但是每个人都在使用网络组件.你怎么做呢？你根本不支持IE11/Edge吗？难道我做错了什么？
推荐指数
解决办法
查看次数
Web组件,传入和传出数据
我的理解是数据通过其属性传递给自定义html元素,并通过调度CustomEvent发送出去.
显然,JavaScript对象可以在事件的详细信息字段中发送出去,但是如果元素需要传递大量数据,该怎么办呢？有没有办法在JavaScript中为它提供一个对象.
如果元素例如包含需要动态初始化或更改的可变数量的部分(例如,具有可变行数的表),该怎么办？我可以设想设置和修改由在组件内部解析的JSON字符串组成的属性,但它不是一种优雅的继续方式:
<my-element tableRowProperties="[{p1:'v1', p2:'v2'}, {p1:'v1',p2:'v2'}, {p1:'v1',p2:'v2'}]"></my-element>
或者,您是否可以让元素监听来自外部的包含数据有效负载的事件？
推荐指数
解决办法
查看次数
:: 用于 shadowDOM 插槽中嵌套子项的插槽 CSS 选择器
CSS::slotted选择器选择<slot>元素的子元素。
但是，当尝试选择像 with ::slotted(*), ::slotted(*) *, or那样的孙子时，选择::slotted(* *)器似乎没有生效。
class MyElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'})
shadowRoot.innerHTML = `
<style>
::slotted(*) {
display: block;
border: solid blue 1px;
padding: 3px;
}
::slotted(*) span {
display: block;
border: solid red 1px;
padding: 3px;
}
::slotted(* span) {
display: block;
border: solid green 1px;
padding: 3px;
}
</style>
<slot></slot>
`;
}
}
customElements.define('my-element', MyElement);<my-element>
<p>
<span>Test</span>
</p>
</my-element> …推荐指数
解决办法
查看次数
标签 统计
web-component ×10
javascript ×5
html ×3
css ×2
polyfills ×2
polymer ×2
angularjs ×1
forms ×1
json ×1
selenium ×1
shadow-dom ×1
typescript ×1
webpack ×1