1

Currently in my test case I need to write tests to be able to find elements of the customized variety made using web components, example of the html code is below:

<html>
<head>...</head>
<body class>
    <customtag1 id="app">
      <customtag2 id="app2">
         <div id="divid">
           <customtag3 class="current icon">
              "Text here"
           </customtag3>
         </div>
      </customtag2>
    </customtag1>

Now for my selenium test, I have written as follows, written using mocha:

  test.it('test', function() {    
    return driver.findElement(webdriver.By.css("customtag1")).then(function(cus1){
        cus1.findElement(webdriver.By.css("customtag2")).then(function(cus2){
            cus2.findElement(webdriver.By.css("#divid")).then(function(div){
                    div.findElement(webdriver.By.css("customtag3 ")).getText();
       })
     })
  })
})

However it seems to have trouble finding any element but the first tag, after the first tag returns the promise object, it can not find the web element customtag2, or any remaining elements. Is there another way of doing it? Or what am I doing wrong here?

Improve this question

2 Answers 2

Reset to default
1

There is no need to resolve the results of findElement() command - you can chain the findElement commands one by one:

var customtag1 = driver.findElement(webdriver.By.css("customtag1"));
var customtag2 = customtag1.findElement(webdriver.By.css("customtag2"));
var div = customtag2.findElement(webdriver.By.css("#divid"));
var customtag3 = div.findElement(webdriver.By.css("customtag3"))
customtag3.getText().then(console.log);

Or, just reach customtag3 directly if intermediate elements are not needed:

var customtag3 = driver.findElement(webdriver.By.css("customtag1 > customtag2 > #divid > customtag3"));
customtag3.getText().then(console.log);

> means the direct parent-child relationship. .then(console.log) is a short way to do .then(function (text) { console.log(text); });.

Improve this answer
7
  • Isn't all the element returned from Selenium are promises that needs to be resolved?
    – Harvey Lin
    Commented Jan 4, 2018 at 17:10
  • @HarveyLin I was always under the impression that chaining findElement commands works like that in WebDriverJS. Give it a try.
    – alecxe
    Commented Jan 4, 2018 at 18:43
  • Does not work, it returns a promise object, and still can not find elements. I can't even print out the innerHTML of the first customtag1
    – Harvey Lin
    Commented Jan 4, 2018 at 18:51
  • @HarveyLin wait, does customtag1.getText().then(console.log); prints out something on the console?..
    – alecxe
    Commented Jan 4, 2018 at 18:55
  • I found the problem but doesn't know the solution yet. The problem is that the webpage I am trying to load have a lot of <link rel="import" herf="xx.html"> tags on the page and it looks like Webdriver is not picking them up, thus returning an empty innerHTML inside the first customized tag.
    – Harvey Lin
    Commented Jan 4, 2018 at 19:24
0

I would suspect that

cus1.findElement(webdriver.By.css("#customtag2")).then(function(cus2){

should be

cus1.findElement(webdriver.By.css("customtag2")).then(function(cus2){

because customtag is an element, not an elements id. The id is #app2 so that could be used, i.e.

cus1.findElement(webdriver.By.css("#app2")).then(function(cus2){
Improve this answer
1
  • Tried it, still doesn't work. It will be able to find the top level element, but rest of it doesn't work, like it will throw warning "can not find element customtag2" Also I edited the question to much the suggestion you did.
    – Harvey Lin
    Commented Jan 4, 2018 at 4:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.