ElementFinder is logging when calling getText() in Protractor

Question

I am trying to get the below text in a Protractor test:

I got the XPath of the <a> tag & am trying to use that in the test below, but when I run the test Samsung Note 8 isn't logged, instead a massive object containing the below is logged:

ElementFinder {
  browser_: ProtractorBrowser {
    controlFlow: [Function],
    schedule: [Function],
    setFileDetector: [Function],
    getExecutor: [Function],
    getSession: [Function],
    getCapabilities: [Function],
    quit: [Function],
    actions: [Function],
    touchActions: [Function],
......

Here is my test code:

it('does something', () => {
    selectItems("Samsung Note 8");
    element(by.css("a[class='nav-link btn btn-primary']")).click().then(() => {
        var EC = protractor.ExpectedConditions;
        var myTitle = element(by.xpath('/html/body/app-root/app-shop/div/div/div/table/tbody/tr[1]/td[1]/div/div/h4/a'));
        browser.wait(EC.elementToBeClickable(myTitle.getText()), 5000).then(() => {
            console.log(myTitle);
        });
    });
});

Can someone please tell me what I'm doing wrong here?

Answer 1

Print the resolved value of the getText not the element finder

    var myTitle = element(by.xpath('/html/body/app-root/app-shop/div/div/div/table/tbody/tr[1]/td[1]/div/div/h4/a')); 
browser.wait(EC.elementToBeClickable(myTitle), 5000);
    myTitle.getText().then((t)=>{
    console.log(t);
    })

And I would encourage using relative xpath instead of absolute xpath. Eg: '.media-heading a' will be css selector