How to get the html of the ElementFinder in the debugger, not a promise?

Question

I have an element: this.page.taskAssignment of type ElementFinder. In my UI tests I click this element, but nothing happens. I suspect I click wrong element, that's why I want to check what is clicked and in order to do it I need to see html in debugger.

I wrote in WebStorm debugger: this.page.taskAssignment.element.getTagName().then(e => {console.log(e)}) but still the result is a promise and I can't find any html.

Question: How do I get html of that element, not a Promise, but a string?

Answer 1

You can use the await keyword to get the value.

let formField = await element(by.formControlName(myField));
let formTag = await formField.getTagName();
let innerHtml = await browser.executeScript("return arguments[0].innerHTML;", formField);

(There used to be a getOuterHtml() method but, according to the protractor docs, selenium removed it.)

If you get an error that you can only use await is a reserved word it needs to be in an async function e.g. on your page object.

class myPageObject{
    async fillForm(myField) {
        let formField = await element(by.formControlName(myField));
        let formTag = await formField.getTagName();
        let innerHtml = await browser.executeScript("return arguments[0].innerHTML;", formField);

        // .... rest of code
    }
}

see https://www.protractortest.org/#/page-objects for more on page objects.

Answer 2

Several ways to identify the element that you are trying to access.

let elementLocator: ElementFinder;

To get the tagName: use await elementLocator.getTagName() so this will return the tag name of the element.

To get the particular Attribute of the element: use await elementLocator.getAttribute('class') //if you want the class name of the locator. You can use the same to get all the locator attributes.

Note: All the above returns only as a string.

Hope it helps you