WebdriverIO: what is the equivalent of elementIdHtml?

Question

How do I get an element's inner HTML from an elementId using browser object?

Is there something like elementIdHtml available in the WebdriverIO API?

The getHTML link for v4 is returning 403 Forbidden.

my goal is that i need to get all text inside all a._3cnp from an elementId

example html

<div class="container">
    <a class="_3cnp">first link</a>
    <a class="_3cnp">second link</a>
    <a class="_3cnp">third link</a>
</div>

need to convert that to ["first link", "second link", ..]

i have the .container elementId already

this is what i did

.then(() => browser.elementIdElements(someElementId, 'a._3cnp'))
.then(buttonElem => {
    console.log('->', buttonElem)
    console.log('-->', buttonElem.getHTML)
    buttonElem.getHTML().then(x => console.log('---->', x))
    return buttonElem.value
})

result of elementIdElements is buttonElem

{ sessionId: '2e2f144c8895a03da1b8df92f4613a33',
  status: 0,
  value:
   [ { ELEMENT: '0.6603119466268468-24',
       'element-6066-11e4-a52e-4f735466cecf': '0.6603119466268468-24' } ],
  selector: 'a._3cnp' }

but buttonElem.getHTML is undefined

im using webdriverio standalone from botium-webdriverio-connector

iamdanchiv · Answer 1 · 2019-02-16T06:06:37.987

LE:

Change your code accordingly to the following:

.then(() => browser.elementIdElements(someElementId, 'a._3cnp'))
.then(buttonElem => {
    // buttonElem's 'value' will contain a list of all the matching elements
    // thus, you have to call getHTML() on each item from 'value'

    // the following will return the HTML of the first matching element
    console.log('\nPrint element HTML: ' + buttonElem.value[0].getHTML());
    return buttonElem.value[0].getHTML();
})

A better approach would be to loop between them & print the HTML:

.then(() => browser.elementIdElements(someElementId, 'a._3cnp'))
.value.forEach(buttonElem => {

    console.log('\nPrint element HTML: ' + buttonElem.getHTML());
    return buttonElem.getHTML();
})

The .getHTML() property is scoped to all the ELEMENT objects. For the sake of more didactical approach, I'm going to consider the task to be manipulating the HTML code found in a series of list items (<li>), from am unordered list (<ul>).

So you can do the following:

browser.getHTML('ul.ourList li.ourListItems') (this will return a list of all the <li>'s HTML code)
browser.element('ul.ourList li.ourListItems').getHTML() (this will return the first <li>'s HTML code)
$('ul.ourList li.ourListItems').getHTML() (this is the equivalent of the command above, only a relaxed version)

If you need to iterate through all the <li>s & get the HTML, do this:

let locator = 'ul.ourList li.ourListItems';

browser.elements(locator).value.forEach(elem => {
  let elemHTML = elem.getHTML();

  console.log( JSON.stringify(elemHTML) );
  elemHTML.doSomethingWithIt();
})

where, elem will is an object with the following format:

{ ELEMENT: '0.285350058261731-1',
  'element-6066-11e4-a52e-4f735466cecf': '0.285350058261731-1',
  selector: 'ul li.fw-item.fz-16.lh-36.pos-r',
  value: { ELEMENT: '0.285350058261731-1' },
  index: 0 
}

i cant seem to make it work, i updated my question to give you more info. im using standalone version i think. — Rahadian Kumang, Feb 15 '19 at 18:15
no, cannot do $('div.container'), the .container is added dynamically, so a lot of .container will actually exists, the elementId is passed to me in realtime, as "here, the newest .container, do as you will", problem is i dont know what api to use. — Rahadian Kumang, Feb 15 '19 at 19:00
@lamdanchiv ya, i know i need to call ```.getHTML()```, the issue is ( as i put in the edited question above ) is that browser.elementIdElements return a json, or as your doc said "A list of WebElement JSON objects for the located elements." and there is no ```getHTML``` function inside it, therefore i cannot call ```getHTML()```, please see the edited question above. — Rahadian Kumang, Feb 16 '19 at 05:10
@lamdanchiv ```browser.element('div._3058').then(elem => elem.getHTML()).then(console.log)``` throw error ```TypeError: elem.getHTML is not a function``` — Rahadian Kumang, Feb 16 '19 at 05:16
ah, yes, forgot to inform you, sorry. turns out it is very simple, but since cannot find documentation about standalone mode, it got quite hard. the way to get html is indeed ```$(selector).getHTML()```. But if running in standalone mode, need to chain it directly, don't call ```then()``` first. so it should be like this ```browser.elementIdElements(elementId, selector).getHTML().then(html => console.log('HTML', html))``` — Rahadian Kumang, Feb 20 '19 at 09:14

WebdriverIO: what is the equivalent of elementIdHtml?

1 Answers1