如果您对如何使用SeleniumJava框架自动化ShadowDOM和selenium自动化框架有哪些感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解如何使用SeleniumJava框架自动化S

如果您对如何使用 Selenium Java 框架自动化 Shadow DOM和selenium自动化框架有哪些感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解如何使用 Selenium Java 框架自动化 Shadow DOM的各种细节，并对selenium自动化框架有哪些进行深入的分析，此外还有关于Angular form 控件的 shadow DOM、Angular Shadow Root DOM 的一些 API、Angular之 ViewEncapsulation 与 Shadow DOM、box-shadow（text-shadow）参数详解的实用技巧。

• 如何使用 Selenium Java 框架自动化 Shadow DOM（selenium自动化框架有哪些）
• Angular form 控件的 shadow DOM
• Angular Shadow Root DOM 的一些 API
• Angular之 ViewEncapsulation 与 Shadow DOM
• box-shadow（text-shadow）参数详解

如何使用 Selenium Java 框架自动化 Shadow DOM（selenium自动化框架有哪些）

如何解决如何使用 Selenium Java 框架自动化 Shadow DOM

我使用 Selenium Java 框架进行自动化测试，最近该应用程序使用 Shadow DOM 进行了升级。我们尝试使用 javascript executor querySelector 实现自动化。该应用程序在单个页面中有 20 多个影子根，并且大多数影子根是前一个根的子级。所以为了识别一个元素，我们需要遍历许多根，就像在 document.querySelector(''root1'').shadowRoot.querySelector(''root2'')....一样，直到第 n 个根才能找到一个元素。

WebElement DropDown = (WebElement) js.executeScript("return document.querySelector(''sn-test-layouts > sn-test-main > sn-test-contents'').shadowRoot.querySelector(''testroot1'').shadowRoot.querySelector(''testroot2'')");

找到元素后，正常的硒点击或选择方法不起作用。所以我使用javascript方法来执行点击，输入文本等。

您能否提供有关使用 selenium Java 自动化 Shadow DOM 的任何其他解决方案的见解。提前致谢

Angular form 控件的 shadow DOM

import {
   
   
    Component } from ''@angular/core'';
import {
   
   
    FormControl } from ''@angular/forms'';

@Component({
   
   
   
  selector: ''app-reactive-favorite-color'',
  template: `
    Favorite Color: <input type="text" [formControl]="favoriteColorControl">
  `
})
export class ReactFormComponent {
   
   
   
  favoriteColorControl = new FormControl('''');
}

在 input 控件里输入一个 33 后，在生成的 html 里，能看到 shadow-root 节点下的 div 标签，里面包含了 33 的值。

本文同步分享在 博客 “汪子熙”（CSDN）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与 “OSC 源创计划”，欢迎正在阅读的你也加入，一起分享。

Angular Shadow Root DOM 的一些 API

一下子就跳到这个函数ɵɵadvance 了：

/**
 * Executes post-order init and check hooks (one of AfterContentInit, AfterContentChecked,
 * AfterViewInit, AfterViewChecked) given a view where there are pending init hooks to be executed.
 * @param {?} lView The LView where hooks are defined
 * @param {?} hooks Hooks to be run
 * @param {?} initPhase A phase for which hooks should be run
 * @param {?=} nodeIndex 3 cases depending on the value:
 * - undefined: all hooks from the array should be executed (post-order case)
 * - null: execute hooks only from the saved index until the end of the array (pre-order case, when
 * flushing the remaining hooks)
 * - number: execute hooks only from the saved index until that node index exclusive (pre-order
 * case, when executing select(number))
 * @return {?}
 */
function executeInitAndCheckHooks(lView, hooks, initPhase, nodeIndex) {
   
   
   
    ngDevMode &&
        assertNotEqual(initPhase, 3 /* InitPhaseCompleted */, ''Init pre-order hooks should not be called more than once'');
    if ((lView[FLAGS] & 3 /* InitPhaseStateMask */) === initPhase) {
   
   
   
        callHooks(lView, hooks, initPhase, nodeIndex);
    }
}

这个 NzInputGroupComponent 来自：nz-input-group

如何判断当前浏览器是否支持 ShadowDom：

/**
 * Checks whether the user''s browser support Shadow DOM.
 * @return {?}
 */
function _supportsShadowDom() {
   
   
   
    if (shadowDomIsSupported == null) {
   
   
   
        /** @type {?} */
        const head = typeof document !== ''undefined'' ? document.head : null;
        shadowDomIsSupported = !!(head && (((/** @type {?} */ (head))).createShadowRoot || head.attachShadow));
    }
    return shadowDomIsSupported;
}

要获取更多 Jerry 的原创文章，请关注公众号 "汪子熙":

本文分享 CSDN - 汪子熙。
如有侵权，请联系 support@oschina.cn 删除。
本文参与 “OSC 源创计划”，欢迎正在阅读的你也加入，一起分享。

Angular之 ViewEncapsulation 与 Shadow DOM

Shadow DOM

　　1、在浏览器中的表现形式

　　　　以video为例，如下代码：

<video controls autoplay name="media" width="500">
  <source id="mp4" src="#" type="video/mp4">
</video>

　　　　如果不对浏览器任何设置操作，渲染生成的代码和上面的代码分毫不差。

　　　　然后打开Chrome的开发者模式，在 setting 中勾选显示显示 shadow DOM。

　　 　　浏览器中的渲染结果如下：

　　 　　　　可以发现，在<video>标签中多了一个包裹的对象， #shadow-root。

　　 2、定义

　　 　　　　Shadow DOM 允许在 document渲染时插入一个DOM子树，但这棵子树不在DOM主树中。

　　　　　　 #shadow-root 被成为影子根，而外层的video此时被成为 影子宿主（shadow host)。

　　　　　　 #shadow-root可以嵌套， 形成影子树（shadow trees).

　　　　　　 影子树对其中的HTML，CSS，JS 有选择性的进行渲染。

　　 3、如何创建

　　　　　 最简单的例子如下：

<div id="hostDiv">
  I love you
</div>

<script type="text/javascript">
  let hostDiv = document.getElementById(''hostDiv'');
  let shadow = hostDiv.createShadowRoot(); // hostDiv.attachShadow({ mode: ''open''})
  shadow.innerHTML = ''<a href="#">baidu</a>'';
</script>

　　 4、如何修改影子元素的样式

　　　　为了保证影子宿主和影子根 之间样式互不侵袭，他们之间存在影子边界（shadow boundary).

　　　　<template>

　　　　　　此标签在使用前不会被渲染，不会执行加载等操作。

　　　　　　也能够实现隐藏标签内容，位置任意。　

　　　　<content>

　　　　      web组件技术套件废弃的部分。

　　　　　　select属性告诉<content>有选择性的插入内容。 

　　　　      使用CSS选择器选取要展示的内容。

　　　　<slot>

　　　　　　自定义web组件的占位符。

　　　　　　属性 name，指插槽名字。

　　　　参考 w3c标准

<div id="hostDiv">
  <i id="c1">first</i>
  <i class="c2">second</i>
</div>

<template id="template">
  <content select="#c1"></content> I  love you<br>
  <content select=".c2"></content> you love me
</template>
<script type="text/javascript">
  let hostDiv = document.getElementById(''hostDiv'');
  let shadow = hostDiv.createShadowRoot();
  shadow.appendChild(document.importNode(template.content,true))
</script>

<div id="hostDiv">
  <i slot="c1">first</i>
  <i slot="c2">second</i>
</div>

<template id="template">
  <slot name="c1"></slot> I  love you<br>
  <slot name="c2"></slot> you love me
</template>
<script type="text/javascript">
  let hostDiv = document.getElementById(''hostDiv'');
  let shadow = hostDiv.attachShadow({   mode: "open"});
  shadow.appendChild(document.importNode(template.content,true))
</script>

Angular ViewEncapsulation

　　提供模版和CSS样式使用的样式封装策略。

　　官方上的解释：

　　　　ViewEncapsulation.Native：使用 Shadow DOM。它只在原生支持 Shadow DOM 的平台上才能工作。

　　　　ViewEncapsulation.Emulated：使用垫片（shimmed) CSS 来模拟原生行为。

　　　　ViewEncapsulation.None: 使用全局样式，没有任何视图包装。

　　　　 ViewEncapsulation.None：使用全局 CSS，不做任何封装。

　　默认编译器是 Emulated。

box-shadow（text-shadow）参数详解

基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}

box-shadow属性的参数设置取值：

阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；

X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

我们今天的关于如何使用 Selenium Java 框架自动化 Shadow DOM和selenium自动化框架有哪些的分享已经告一段落，感谢您的关注，如果您想了解更多关于Angular form 控件的 shadow DOM、Angular Shadow Root DOM 的一些 API、Angular之 ViewEncapsulation 与 Shadow DOM、box-shadow（text-shadow）参数详解的相关信息，请在本站查询。