使用 Serenity-js 框架，如何定位一个影子元素，其父元素的 id 是一个普通的 DOM答案

【问题标题】：using Serenity-js framework ,how to locate a shadow element whose parent has an id which is a normal DOM使用 Serenity-js 框架，如何定位一个影子元素，其父元素的 id 是一个普通的 DOM
【发布时间】：2017-09-22 17:49:12
【问题描述】：

请告诉我如何使用 serenity-js Target 定位以下表单中的元素。

下面是我尝试自动化的页面的 Dom。所以这里是一个下拉列表，你可以看到它有 id="splc" 这是一个普通的 DOM .. 但该下拉列表中的内容都是阴影元素。我的要求是访问下拉列表中的内容。

现在我什至无法通过 px-component 标签（这是普通的 DOM）上的普通 xpath 单击下拉菜单。在那个 px 组件标签内，我可以看到它有一个阴影元素#label，这是我需要单击的确切元素。问题出在我的 html 页面中，所有下拉列表都具有与阴影元素相同的#label，并且它们的父级是具有唯一 ID 的普通 xpath。

当我在 chrome 控制台上使用 Jquery 时

$("html #splc /deep/ div#label").click()

我可以点击所需的下拉菜单。

但是我怎样才能对 serenity-js 框架工作做同样的事情。我想使用 SERENITY-JS 概念执行量角器中的以下功能。

static dropdown = element(by.id("splc")).element(by.deepCss("#label"));

因为 serenity-js 总是需要一个目标，因为任务在活动中需要它。怎么能一样呢？请帮我。

【问题讨论】：

我不确定如何回答这个问题。您是否尝试过使用element(by.id("splc")).element(by.deepCss("#label")); 的解决方案？或者您是否正在为您尚未尝试过的代码行寻求建议？如果你试过了，错误信息是什么样的？
嗨，我尝试使用相同的方法，但由于它是 ElementFinder 并且 Serenity-js 期望 Actor 的 Target 执行 Activity。
我需要解决方案，因为我可以使用 serenityis 概念来使用相同的概念。
这真是一个 serenityJS 的问题。可能删除量角器标签？我知道 Protractor 有类似的想法；但是，问题不在于量角器。
是的，谢谢你。我已经编辑了。我需要 serenity-js 的帮助。使用 protractor 和 serenity-js 实现上述概念

标签： element shadow serenity-js

【解决方案1】：

来自what I can see，by.deepCss 只不过是by.css 的包装：

deepCss(selector: string): Locator {
  return By.css('* /deep/ ' + selector);
};

如果是这样的话，那么如下：

element(by.id("splc")).element(by.deepCss("#label"))

可以表示为：

element(by.css("#splc /deep/ #label"))

根据您的 jQuery 示例。

现在，如果上述方法有效，您应该可以定义一个Target，如下所示：

const Dropdown = Target.the('Dropdown').located(by.css("#splc /deep/ #label"))

希望这会有所帮助！

一月

【讨论】：