1

please tell me how i can locate an element in the below form using serenity-js Target.

Below is my Dom to the page i am trying to automate. enter image description here so here its a dropdown which you can see as which has id="splc" which is a normal DOM .. but the content inside that dropdown are all shadow elements. my requirement is to access the content in dropdown.

Now i am not able to even click on the dropdown by normal xpath on px-component tag ( which is normal DOM) . Inside that px component tag I can see that it has a shadow element #label which is exact element i need to click. Problem is in my html page , all the dropdown has the same #label as the shadow element and their parent is a normal xpath with unique id.

When i use the Jquery on the chrome console

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

i can click the desired dropdown.

But how can i do the same with serenity-js frame work. i want to do the below functionality that i have in protractor using SERENITY-JS concept . 

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

Since serenity-js expects a target always since the Task needs that in activity. How can do the same ? please help me.

Pringa
  • 91
  • 2
  • 6
  • I am unsure of how to answer this question. Have you tried your solution using `element(by.id("splc")).element(by.deepCss("#label"));`? Or are you asking advice for a line of code you haven't tried out yet? If you have tried it out, what does the error message look like? – cnishina Sep 23 '17 at 07:33
  • Hi , i tried using the same but since its a ElementFinder and Serenity-js expects Target for the Actor to perform a Activity. – Pringa Sep 23 '17 at 14:41
  • I need the solution as how i can use the same concept using serenityis concept. – Pringa Sep 23 '17 at 14:42
  • So really a serenityJS question. Possibly remove the Protractor tag? I understand that there are parallel ideas with Protractor; however, the question is not about Protractor. – cnishina Sep 23 '17 at 16:05
  • yes thank u cnishina . i have editted. I need help with serenity-js. To implement the above mentioned concept already present with protractor , with serenity-js – Pringa Sep 24 '17 at 14:06

1 Answers1

0

From what I can see, by.deepCss is nothing more than a wrapper around by.css:

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

If that's the case, then the following:

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

could be represented as:

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

as per your jQuery example.

Now, if the above works, you should be able to define a Target as follows:

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

Hope this helps!

Jan

Jan Molak
  • 4,426
  • 2
  • 36
  • 32