Protractor: ShadowDOM 支持请求

@first87

Tnx 分享这个。 它看起来不错，是一个很好的解决方法。

如果您想在新版本的 Protractor 中看到这一点，您可以添加一个带有新定位器的 PR，例如element(by. shadowRoot('#parentElement #innerElement'))

@wswebcreation好的，很好。 我将添加一个 PR。
但是我想在开始之前确保一件事：你可以用这种风格的选择器#parentElement::sr #innerElement来指示#innerElement的阴影树中的元素#parentElement吗？

@first87

我觉得不错👍

我不是（唯一）决定 PR 的人。 核心成员也会审查你的 PR，最终做出决定。

我认为这将是一个很好的补充和清晰的日志记录，所以去吧😉

@wswebcreation如何推送我的提交？ 似乎我没有足够的权限来贡献。

嗨@first87 ，

你看过这个文件吗。 它包含您需要采取的所有步骤。

@wswebcreation是的，我检查了DEVELOPER.md并没有找到任何推送指南。 这些是我去的步骤：

• git clone [email protected]:angular/protractor.git
• cd protractor/
• git remote add upstream https://github.com/angular/protractor.git
• git checkout -b feature/shadow-root-locator master创建我自己的分支
• npm install
• 做了几个提交
• gulp lint检查代码格式是否正确
• npm start , webdriver-manager start , npm test通过所有测试

现在我下一步该怎么做？

嗨@first87 ，

• 你从分叉项目开始。
• 然后它将被添加到您的帐户中。
• 克隆到本地机器
• 然后推送您的更改并单击“创建 PR”按钮。

这应该够了吧

@wswebcreation好的，谢谢您的指导。

@wswebcreation我刚刚创建了一个PR #4392 。

@first87 Tnx！！

这方面的现状如何？ 我们希望能够使用 by.shadowRoot 函数。

希望有人帮我解决这个问题： https :

@first87我尝试在我的 e2e 测试中使用您的新定位器。 我无法获取 shadow dom 中的元素。

环境：带有 Polymer Web 组件的 Angular (v5) 应用程序。 用于运行 e2e 测试的量角器。

角 CLI：1.6.4
节点：6.10.0
角度：5.2.0
@角/cli：1.6.4
打字稿：2.5.3
下面给出的是我在 chrome 中扩展的聚合物 Web 组件阴影根。 您可以在此自定义元素中看到 input type = "text"。

我无法使用量角器 by.css_sr 访问自定义聚合物组件内的输入元素。

var polymerFirstName = element(by.className('polyFName'));
var inputElement = polymerFirstName.element(by.css_sr('input')); // 什么都不返回。

它失败并出现错误“使用定位器找不到元素：by.css_sr("input")”。

我需要访问内部输入元素，以便执行 UI 自动化任务。
polymerFirstName.element(by.css_sr('input')).clear();
polymerFirstName.element(by.css_sr('input')).sendKeys('Ritchie');

有什么我想念的吗？

@msbasanth你错过了::sr因为by.css_sr不会开始在元素的影子根中查找元素〜它会为每个::sr挖掘任何元素的影子 DOM 树
所以你应该用这个替换你的输入元素查找器：

var inputElement = polymerFirstName.element(by.css_sr('::sr input'));

谢谢@first87，它就像一个魅力。
希望我们能尽快在量角器中获得这种影子 DOM 支持。

这行得通！ 谢谢！ 现在定位元素将变得非常困难，尤其是如果有嵌套的 shadow dom :( 因为我们无法在控制台中测试定位器。再次感谢！

@firstor 非常感谢您！ 希望这可以尽快整合....

不过，我希望能从你那里得到一些帮助。 虽然我可以根据需要使用 ::sr 获得正确的值，但当我执行title.getText()它似乎获得了“不正确”的值。 它似乎是作为一个对象进来的。 请参阅下面的输出：

预期 ['Title'] 为 'Title'。

我未能成功从该对象/数组中获取字符串，想知道您是否有任何想法？

再次感谢您的解决方法！！

编辑：无视！！ 引用了这个，它成功了https://stackoverflow.com/questions/29478905/protractor-element-gettext-returns-an-object-and-not-string。 再次感谢！！

嗨@firstor / @msbasanth ，我无法获取 shadow-root DOM 中存在的元素。 我将您的上述代码复制到 .ts 文件中，但在第 1 行出现编译错误。 6：
代码：让 shadowDomInUse = (document.head.createShadowRoot .......
错误： “HTMLHeadElement”类型上不存在属性“createShadowRoot” 。

应用：Angular v7
节点JS：6.9.0
打字稿：2.3.3
量角器：5.3.2

您能否详细说明如何使用您的方法在 shadow-root 内的输入框中输入一些文本？
谢谢！

@firstor
谢谢你。 我试图像这样使用它。
var searchBar = element(by.css_sr('::sr input'));
var searchButton = element(by.css_sr('::sr i'));

我收到以下错误
[11:36:06] E/launcher - TypeError: Invalid locator

我究竟做错了什么？
非常感谢任何帮助。 提前致谢。

@firstor嘿，感谢您的解决方法）
但是，除非将它合并到 Protractor 主分支中，否则我们不能在我们的团队中完全使用它（我们在远程节点上使用 Protractor，因此在运行测试时总是会拉取库）。

合并https://github.com/angular/protractor/pull/4786 的任何进展？

这事有进一步更新吗？

任何更新？ 这是最近许多规格的障碍（

你好@firstor ，

应用：Angular 8
节点JS：12.13.1
打字稿：3.5.3
量角器：5.4.0

感谢您的解决方法。

我尝试在 ShadowRoot 中找到元素。 在我们的前端架构中，我们有 3 个深度级别

• 第一级：微前端应用
• 第二层：微前端组件
• 第三级：角材料组件

第一个和第二个 shadowRoot 级别是可访问的，但不是最后一个。

代码源的提取：

    await expect(element(by.tagName('page-affaire')).isDisplayed());
    await browser.driver.sleep(3000);
    console.log('Page affaire chargée');
    var el1 = element(by.tagName('page-affaire'));

    var el2 = el1.element(by.css_sr('::sr rac-card'));
    console.log('rac-card found');

    var el3 = el1.element(by.css_sr('::sr rac-option'));
    console.log('rac-option found');

    var el4 = el1.element(by.css_sr('::sr mat-select')); 
    console.log('rac-card select');

结果日志：

Jasmine` started
Page affaire chargée
rac-card found
rac-option found
rac-card select
Sélection du type de demande

  créer Affaire
    × Select type demande
      - NoSuchElementError: No element found using locator: by.css_sr("::sr mat-select")

我们尝试使用其他解决方案（ https://stackoverflow.com/questions/57979981/how-to-check-in-protractor-javescript-in-shadow-dom-if-the-button-is-enabled-o ）。 我们有同样的问题：

await browser.executeScript("return document.querySelector(\"page-affaire\");").then(function () {
      console.log('page affaire found');
      // browser.sleep(5000);
    });
    await browser.executeScript("return document.querySelector(\"page-affaire\").shadowRoot.querySelector(\"rac-card\");").then(function () {
      console.log('rac card found');
      // browser.sleep(5000);
    });
    await browser.executeScript("return document.querySelector(\"page-affaire\").shadowRoot.querySelector(\"rac-card\").shadowRoot.querySelector(\"rac-option\");").then(function () {
      console.log('rac option found');
      // browser.sleep(5000);
    });
    await browser.executeScript("return document.querySelector(\"page-affaire\").shadowRoot.querySelector(\"rac-card\").shadowRoot.querySelector(\"rac-option\").shadowRoot.querySelector(\"mat-select\").click();").then(function () {
      console.log('Type de Demande cliqué');
      browser.sleep(5000);
    });

结果 ：

Jasmine started
Page affaire chargée
rac-card found
rac-option found
rac-card select
Sélection du type de demande

  créer Affaire
    × Select type demande
      - NoSuchElementError: No element found using locator: by.css_sr("::sr mat-select")

shadowRoot 深度限制访问是否有限制？

感谢您的支持。

V1nc3kr0

你好@firstor ，

应用：Angular 8
节点JS：12.13.1
打字稿：3.5.3
量角器：5.4.0

感谢您的解决方法。

我尝试在 ShadowRoot 中找到元素。 在我们的前端架构中，我们有 3 个深度级别

• 第一级：微前端应用
• 第二层：微前端组件
• 第三级：角材料组件

第一个和第二个 shadowRoot 级别是可访问的，但不是最后一个。

代码源的提取：

    await expect(element(by.tagName('page-affaire')).isDisplayed());
    await browser.driver.sleep(3000);
    console.log('Page affaire chargée');
    var el1 = element(by.tagName('page-affaire'));

    var el2 = el1.element(by.css_sr('::sr rac-card'));
    console.log('rac-card found');

    var el3 = el1.element(by.css_sr('::sr rac-option'));
    console.log('rac-option found');

    var el4 = el1.element(by.css_sr('::sr mat-select')); 
    console.log('rac-card select');

结果日志：

Jasmine` started
Page affaire chargée
rac-card found
rac-option found
rac-card select
Sélection du type de demande

  créer Affaire
    × Select type demande
      - NoSuchElementError: No element found using locator: by.css_sr("::sr mat-select")

我们尝试使用其他解决方案（ https://stackoverflow.com/questions/57979981/how-to-check-in-protractor-javescript-in-shadow-dom-if-the-button-is-enabled-o ）。 我们有同样的问题：

await browser.executeScript("return document.querySelector(\"page-affaire\");").then(function () {
      console.log('page affaire found');
      // browser.sleep(5000);
    });
    await browser.executeScript("return document.querySelector(\"page-affaire\").shadowRoot.querySelector(\"rac-card\");").then(function () {
      console.log('rac card found');
      // browser.sleep(5000);
    });
    await browser.executeScript("return document.querySelector(\"page-affaire\").shadowRoot.querySelector(\"rac-card\").shadowRoot.querySelector(\"rac-option\");").then(function () {
      console.log('rac option found');
      // browser.sleep(5000);
    });
    await browser.executeScript("return document.querySelector(\"page-affaire\").shadowRoot.querySelector(\"rac-card\").shadowRoot.querySelector(\"rac-option\").shadowRoot.querySelector(\"mat-select\").click();").then(function () {
      console.log('Type de Demande cliqué');
      browser.sleep(5000);
    });

结果 ：

Jasmine started
Page affaire chargée
rac-card found
rac-option found
rac-card select
Sélection du type de demande

  créer Affaire
    × Select type demande
      - NoSuchElementError: No element found using locator: by.css_sr("::sr mat-select")

shadowRoot 深度限制访问是否有限制？

感谢您的支持。

V1nc3kr0

试试看
var el4 = el3 .element(by.css_sr('::sr mat-select'));

@firstor
我的 Web 应用程序正在使用具有 10 级影子根的 Polymer.js。

是否可以从顶部节点调用最后一个 Shadow 根元素，而不是遍历各个 Shadow 根。
谢谢你的支持。

大家好 ，
我是量角器的新手，我希望我能获得有关如何在量角器中包含此定位器脚本（shadowDOM）的帮助。
我正在对聚合物 webcomponent 进行一些 UI 测试，量角器版本：5.4.2 和节点 v12.13。

谁能告诉我在哪里包含该脚本？ @firstor，@ alagappan-QA

提前致谢。

@rugaba
在 onPrepare() 方法下的 Configuration.js 文件中包含脚本。

谢谢@alagappan-qa，它工作！

你好，

是否可以将此脚本包含在单独的 js 文件中并将其导入 protractor.conf 文件并包含在 onPrepare() 方法中。 如果是这样，我们该怎么做？

谢谢，
拉克希米

如果现在有人需要这个，请参阅https://github.com/angular/protractor/pull/4786#issuecomment -607204672 和https://github.com/angular/protractor/pull/4786#issuecomment -607224145

您也可以使用https://github.com/angular/protractor/pull/4786.patch或https://github.com/angular/protractor/pull/4786.diff

你好，

是否可以将此脚本包含在单独的 js 文件中并将其导入 protractor.conf 文件并包含在 onPrepare() 方法中。 如果是这样，我们该怎么做？

谢谢，
拉克希米

@Lakhs02
在其他文件中将此定位器声明为

exports.addShadowRootLocator = function () {
    by.addLocator('css_sr', function (
.
.
.
    return matches;
    });
};

然后在 onPrepare() 方法中

onPrepare: function () {
        // register the shadow root locator, to use it globally
        require('./path/to/file').addShadowRootLocator();
}

>

@firstor
我的 Web 应用程序正在使用具有 10 级影子根的 Polymer.js。

是否可以从顶部节点调用最后一个 Shadow 根元素，而不是遍历各个 Shadow 根。
谢谢你的支持。

@firstor我可以在您的个人资料中看到您对影子 DOM 有丰富的经验。 能否请您这么好心并提供一个如何访问嵌套影子 DOM 的示例？ 我现在已经为此苦苦挣扎了两个星期，但仍然无法访问某些元素：
这是我的示例，我需要访问突出显示的 div 元素：div.a-choosen-text：

我尝试了以下定位器（以及许多其他定位器）但没有成功：
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)::sr appkit-panel::sr app-assignee- dropdown::sr appkit-dropdown::sr div.a-choosen-text'));

令人惊讶的是，应用程序项目的定位器工作正常，但是当我更深入时，无论我尝试什么，它都不起作用。
工作正常： static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)'));

你知道我在做什么错吗？
先感谢您，
玛格达

>

@firstor
我的 Web 应用程序正在使用具有 10 级影子根的 Polymer.js。

是否可以从顶部节点调用最后一个 Shadow 根元素，而不是遍历各个 Shadow 根。
谢谢你的支持。

@firstor我可以在您的个人资料中看到您对影子 DOM 有丰富的经验。 能否请您这么好心并提供一个如何访问嵌套影子 DOM 的示例？ 我现在已经为此苦苦挣扎了两个星期，但仍然无法访问某些元素：
这是我的示例，我需要访问突出显示的 div 元素：div.a-choosen-text：

我尝试了以下定位器（以及许多其他定位器）但没有成功：
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)::sr appkit-panel::sr app-assignee- dropdown::sr appkit-dropdown::sr div.a-choosen-text'));

令人惊讶的是，应用程序项目的定位器工作正常，但是当我更深入时，无论我尝试什么，它都不起作用。
工作正常： static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)'));

你知道我在做什么错吗？
先感谢您，
玛格达

嗨，玛格达，
在您的情况下，WebElement appkit-panel 下的影子根没有展开以找出您的元素。
但是在 nameOnTheProjectTab 元素中，它被扩展了，这导致了这个问题。
试试下面的元素定位器，
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)::sr app-assignee-dropdown::sr appkit- dropdown::sr div.a-choosen-text'));

天哪，我现在知道了，我可以找到我需要的所有定位器！
非常感谢您的帮助！
最好的祝福，
玛格达

来自：alagappan-qa [email protected]
发送：2020 年 7 月 4 日，星期六 4:34 AM
至：角度/量角器[email protected]
抄送：Bartkowiak-Jowsa, Magdalena [email protected] ； 评论[email protected]
主题：回复：[角度/量角器] ShadowDOM 支持请求 (#4367)

@firstor https://github.com/firstor
我的 Web 应用程序正在使用具有 10 级影子根的 Polymer.js。
[图片已被发件人删除。 RJvlf] https://user-images.githubusercontent.com/57852329/72205775-de7d6300-34ac-11ea-93f7-37917052ce90.png
是否可以从顶部节点调用最后一个 Shadow 根元素，而不是遍历各个 Shadow 根。
谢谢你的支持。

@firstor https://github.com/firstor我可以在您的个人资料中看到您对 shadow DOM 有丰富的经验。 能否请您这么好心并提供一个如何访问嵌套影子 DOM 的示例？ 我现在已经为此苦苦挣扎了两个星期，但仍然无法访问某些元素：
这是我的示例，我需要访问突出显示的 div 元素：div.a-choosen-text：
[图片已被发件人删除。 图片] https://user-images.githubusercontent.com/50359393/86498151-c532e080-bd84-11ea-867c-337085b96087.png

我尝试了以下定位器（以及许多其他定位器）但没有成功：
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)::sr appkit-panel::sr app-assignee- dropdown::sr appkit-dropdown::sr div.a-choosen-text'));

令人惊讶的是，应用程序项目的定位器工作正常，但是当我更深入时，无论我尝试什么，它都不起作用。
工作正常： static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)'));

你知道我在做什么错吗？
先感谢您，
玛格达

嗨，玛格达，
在您的情况下，WebElement appkit-panel 下的影子根没有展开以找出您的元素。
但是在 nameOnTheProjectTab 元素中，它被扩展了，这导致了这个问题。
试试下面的元素定位器，
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)::sr app-assignee-dropdown::sr appkit- dropdown::sr div.a-choosen-text'));

—
您收到此消息是因为您发表了评论。
直接回复此邮件，在 GitHub 上查看https://github.com/angular/protractor/issues/4367#issuecomment-653710546 ，或取消订阅https://github.com/notifications/unsubscribe-auth/AMAGYYOPZMDJCRSHT5XI45TRZ2ILDANCNFSM4DR44ABQ 。

Capgemini Polska Sp. 动物园，
ul。 Żwirki i Wigury 16a 02-092 华沙，
S?d Rejonowy dla M.ST. Warszawy, XII Wydzia? Gospodarczy Rejestrowy，nr KRS：0000040605，
NIP：526-11-84-467，
威索科？？ kapita?u zak?adowego: 16.403.320,00 z?.
此消息包含可能具有特权或机密的信息，并且是 Capgemini Group 的财产。 它仅适用于收件人。 如果您不是预期的收件人，则您无权阅读、打印、保留、复制、传播、分发或使用此消息或其任何部分。 如果您错误地收到此邮件，请立即通知发件人并删除此邮件的所有副本。

大家好，找到了一个解决方案，可以在任何深度的阴影根中定位阴影元素。
借助节点模块“query-selector-shadow-dom”，我们可以轻松识别 Shadow DOM 中的 Web 元素。 无需遍历所有影子根。
使用元素（by.shadowDomCss（''))，我们可以在任何级别指向 Shadow Root 内的 Web 元素。

嗨阿拉加潘，
你能用一个例子来描述一下吗？谢谢

2020 年 8 月 19 日星期三上午 7:52
通知@github.com> 写道：

嘿大家，找到了一个解决方案来定位里面的阴影元素
任何深层的暗影根。
借助节点模块“query-selector-shadow-dom”，我们可以
轻松识别 Shadow DOM 中的 Web 元素。 无需穿越
穿过所有暗影根源。
使用element(by.shadowDomCss(''))，我们可以指向里面的Web元素
任何级别的暗影根。

—
您收到此消息是因为您发表了评论。
直接回复此邮件，在 GitHub 上查看
https://github.com/angular/protractor/issues/4367#issuecomment-676304234 ，
或退订
https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ
.

嗨，Alagappan，你能用一个例子来描述一下吗？谢谢
…
在星期三，2020年8月19日在7:52 alagappan-annamalai <@。 * > 写道: 大家好，找到了一个解决方案，可以在任何深层的阴影根中找到阴影元素。 借助节点模块“query-selector-shadow-dom”，我们可以轻松识别 Shadow DOM 中的 Web 元素。 无需遍历所有影子根。 使用 element(by.shadowDomCss(''))，我们可以在任何级别指向 Shadow Root 内的 Web 元素。 — 您收到此消息是因为您发表了评论。 直接回复此邮件，在 GitHub < #4367（评论） > 上查看，或取消订阅https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ 。

在上面的屏幕截图中，id=container 的标签 paper-input-container 位于 6+ shadow root 层。 要获取这个 webElement，我们可以使用 element(by.shadowDomCss('paper-input#textbox paper-input-container#container')); 这个短元素标识符将作用于 WebElement。

嗨@firstor / @msbasanth ，我无法获取 shadow-root DOM 中存在的元素。 我将您的上述代码复制到 .ts 文件中，但在第 1 行出现编译错误。 6：
代码：让 shadowDomInUse = (document.head.createShadowRoot .......
错误： “HTMLHeadElement”类型上不存在属性“createShadowRoot” 。

我也遇到了这个错误，解决方案是用attachShadow替换createShadowRoot ，因为 createShadowRoot() 方法已被弃用，取而代之的是 attachShadow()。 见参考：
https://developer.mozilla.org/en-US/docs/Web/API/Element/createShadowRoot

顺便说一下@firstor ，感谢您的贡献！ 到目前为止，它一直运行良好。 我浪费了很多时间试图让by.deepCss与 Protractor 和 Angular 10 一起工作。我最近开始在我的 Angular 10 组件中使用本机 shadowDom 封装， encapsulation: ViewEncapsulation.ShadowDom我喜欢但不开心我在 e2e 测试期间无法访问任何嵌套的 shadowDom 元素。 幸好我找到了这段代码！

@Rob4226
请查看包https://www.npmjs.com/package/query-selector-shadow-dom

看起来很有希望。

@msbasanth @Rob4226我是量角器的新手，我正在尝试访问 chrome 下载页面的文本“下载”
我的代码：

我也试过 var x = await element.element(by.css_sr('h1')).getText(); 它不起作用。
我收到以下错误消息：

感谢您对此的回应谢谢！

我修复了它，我需要为每个嵌套的阴影根元素创建单独的元素变量。

@firstor我非常感谢这段代码。 非常感谢👍

您好，我目前正在选择 shadow dom。 使用解决方法时出现以下错误：

Logg: { StaleElementReferenceError: stale element reference: stale element not found (Session info: chrome=87.0.4280.66)

用法：
const parent = element(by.css_sr('my-wrapper > div > div::sr my-data')); const domElement = parent.element(by.css('my-checkbox input')); console.log('Displayed', await domElement.isDisplayed());

<my-data> <my-checkbox> <input> <my-checkbox> </my-data> .....
我究竟做错了什么？

您好，我目前正在选择 shadow dom。 使用解决方法时出现以下错误：

Logg: { StaleElementReferenceError: stale element reference: stale element not found (Session info: chrome=87.0.4280.66)

用法：
const parent = element(by.css_sr('my-wrapper > div > div::sr my-data')); const domElement = parent.element(by.css('my-checkbox input')); console.log('Displayed', await domElement.isDisplayed());

<my-data> <my-checkbox> <input> <my-checkbox> </my-data> .....
我究竟做错了什么？

嗨@wasoek ，您能否从 Shadow Root 中为该元素提供 Chrome 开发者工具 > 检查元素。 这将提供有关此问题的更多详细信息。

你好，

这可以使用以下两种方法中的任何一种来处理，

让 element1 = element.all(by.css_shadowroot('downloads-manager::sr div')).get(1)

设 element2 = element1.element(by.css_shadowroot('::sr downloads-item::sr div::sr downloads-item')).getText();
或者

browser.element(by.css_shadowroot('downloads-manager::sr div[id=”mainContainer”]::sr downloads-item::sr div::sr downloads-item')).getText();
[这里我们使用 ID 而不是第 n 个孩子，因此它会专注于元素]

谢谢，
阿拉加潘A

来自：shopmujahid [email protected]
发送：2020 年 12 月 3 日，星期四，上午 9:20
至：角度/量角器[email protected]
抄送：Alagappan Annamalai [email protected] ； 评论[email protected]
主题：回复：[角度/量角器] ShadowDOM 支持请求 (#4367)

我正在尝试访问 shadow dom 的第二个 div 元素（突出显示）下的元素，但它总是使用以下消息检索第一个 div 元素：

W/element - 为定位器找到多个元素 by.css_shadowroot("downloads-manager::sr div") - 将使用第一个结果

下面是我的xpath：
browser.element(by.css_shadowroot('downloads-manager::sr div:nth-child (1)::sr downloads-item::sr div::sr downloads-item')).getText();

有人可以指导我吗？ 提前致谢

[图片] https://user-images.githubusercontent.com/58770415/100961235-336c0280-34df-11eb-9618-1f24ffcd62a0.png

—
您收到此消息是因为您发表了评论。
直接回复此邮件，在 GitHub 上查看https://github.com/angular/protractor/issues/4367#issuecomment-737647758 ，或取消订阅https://github.com/notifications/unsubscribe-auth/AORWPO6XNK7RUWPVHCWKBCTSS4DH5ANCNFSM4DR44ABQ 。

我正在尝试访问 shadow dom 中的 div 元素之一，在我的情况下，nth-child() 和 type-of() 都不起作用。
以前有人遇到过这个问题吗？

下面是 DOM 结构和我的 xpath

await browser.element(by.css_shadowroot('d2l-navigation::sr d2l-navigation-main- header:nth-type-of (3)'))

我没有收到任何元素发现错误。

任何帮助将不胜感激在此先感谢。

你好，

尝试删除元素定位器中的 ::sr，因为它位于 Shadow Root 之外。
使用这两个元素定位器中的任何一个，看看它是否有效。

await browser.element(by.css_shadowroot('d2l-navigation d2l-navigation-main- header:nth-type-of (3)'))
或者

await browser.element(by.css_shadowroot('d2l-navigation d2l-navigation-main-header div.d2l-navigation-header-right'))

谢谢，

阿拉加潘A
来自：shopmujahid [email protected]
发送：2020 年 12 月 9 日，星期三 12:09 PM
至：角度/量角器[email protected]
抄送：Alagappan Annamalai [email protected] ； 评论[email protected]
主题：回复：[角度/量角器] ShadowDOM 支持请求 (#4367)

我正在尝试访问 shadow dom 中的 div 元素之一，在我的情况下，nth-child() 和 type-of() 都不起作用。
以前有人遇到过这个问题吗？

下面是 DOM 结构和我的 xpath
[2134234] https://user-images.githubusercontent.com/58770415/101593797-cc9e8b80-39ad-11eb-8fd0-a7cd7541773f.jpg

await browser.element(by.css_shadowroot('d2l-navigation::sr d2l-navigation-main- header:nth-type-of (3)'))

我没有收到任何元素发现错误。

任何帮助将不胜感激在此先感谢。

—
您收到此消息是因为您发表了评论。
直接回复此邮件，在 GitHub 上查看https://github.com/angular/protractor/issues/4367#issuecomment-741567009 ，或取消订阅https://github.com/notifications/unsubscribe-auth/AORWPO7CSSI7P5GH37O74R3ST4LO5ANCNFSM4DR44ABQ 。

谢谢@alagappan-annamalai！ 👍第二个解决方案通过删除 ::sr 并添加 tagname.classname 对我有用，但是我遇到了其他奇怪的问题，它没有访问下面的子元素：

我需要访问上面突出显示的元素

尝试使用以下两个 xpath：
browser.element(by.css_sr('d2l-navigation d2l-navigation-main-header div.d2l-navigation-header-right div d2l-dropdown d2l-dropdown-content div div div div ul:nth-child(2)' ))

和

browser.element(by.css_sr('d2l-navigation d2l-navigation-main-header div.d2l-navigation-header-right div d2l-dropdown d2l-dropdown-content div div div div ul li._（当我们将鼠标悬停在 li 类名上时，它会附加一些文本）

我没有收到任何元素发现错误。
提前致谢。

谢谢@alagappan-annamalai！ 👍第二个解决方案通过删除 ::sr 并添加 tagname.classname 对我有用，但是我遇到了其他奇怪的问题，它没有访问下面的子元素：

我需要访问上面突出显示的元素

尝试使用以下两个 xpath：
browser.element(by.css_sr('d2l-navigation d2l-navigation-main-header div.d2l-navigation-header-right div d2l-dropdown d2l-dropdown-content div div div div ul:nth-child(2)' ))

和

browser.element(by.css_sr('d2l-navigation d2l-navigation-main-header div.d2l-navigation-header-right div d2l-dropdown d2l-dropdown-content div div div div ul li.__')) （当我们将鼠标悬停在 li 类名上时，它会附加一些文本）

我没有收到任何元素发现错误。
提前致谢。

这可以在没有 css_sr 并提供少量 HTML Web 元素的情况下以简单的方式本身处理
browser.element.all(by.css('d2l-navigation d2l-navigation-main-header ul[class="d2l-datalist vui-list"] li')).get(1);

太棒了，像魅力一样工作谢谢@alagappan-annamalai！ ⁇