en utilisant Serenity-js framework, comment localiser un élément shadow dont le parent a un identifiant qui est un DOM normal

Question

S'il vous plaît dites-moi comment je peux localiser un élément dans le formulaire ci-dessous en utilisant serenity-js Target.

Ci-dessous est mon Dom à la page que j'essaie d'automatiser. alors voici une liste déroulante que vous pouvez voir comme qui a id = "splc" qui est un DOM normal .. mais le contenu de cette liste déroulante sont tous des éléments d'ombre. mon exigence est d'accéder au contenu dans la liste déroulante.

Maintenant, je ne suis même pas capable de cliquer sur la liste déroulante par xpath normal sur la balise px-component (qui est DOM normal). À l'intérieur de ce tag de composant px, je peux voir qu'il a un élément d'ombre #label qui est l'élément exact que je dois cliquer. Le problème est dans ma page html, toute la liste déroulante a le même #label que l'élément shadow et leur parent est un xpath normal avec un identifiant unique.

Quand je l'utilise Jquery sur la console chromée

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

i cliquez sur le menu déroulant désiré.

Mais comment puis-je faire la même chose avec le travail de trame de sérénité-js. Je veux faire la fonctionnalité ci-dessous que j'ai en rapporteur d'angle en utilisant le concept SERENITY-JS.

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

Puisque serenity-js attend toujours une cible puisque la tâche a besoin de celle en activité. Comment peut-on faire la même chose? aidez-moi s'il vous plaît.

Answer 1

De what I can see, by.deepCss est rien de plus qu'une enveloppe autour by.css:

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

Si tel est le cas, ce qui suit:

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

pourrait être représentée comme:

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

selon votre exemple jQuery.

Maintenant, si les travaux ci-dessus, vous devriez être en mesure de définir une Target comme suit:

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

Hope this helps!

Jan