使用Serenity-js框架，如何定位父元素的id为普通DOM的阴影元素

Question

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

下面是我想要自动化的页面的Dom。

所以这里是一个下拉列表，你可以看到其中有id="splc“，这是一个普通的DOM。但是dropdown中的内容都是影子元素。我的要求是访问下拉列表中的内容。

现在我甚至不能点击px-component标签上的普通xpath的下拉列表(这是普通的DOM)。在px组件标记中，我可以看到它有一个阴影元素#标签，这正是我需要单击的元素。问题是在我的html页面中，所有的dropdown都有与阴影元素相同的#标签，它们的父元素是一个具有唯一id的普通xpath。

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

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

我可以点击所需的下拉列表。

但是我怎样才能用serenity-js frame work做同样的事情呢？我想使用SERENITY-JS概念在量角器中实现以下功能。

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

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

Answer 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"))

希望这能有所帮助！

1月