How to getText concatenating 2 strings in Protractor

Question

I have 2 variables that get the texts: locationDisplayed and bindisplayed.

I want the 3rd variable: expectedDescription concats the text of the first 2 vars.

Here is the code:

let locationDisplayed = element(by.css('.badge-primary')).getText().then(function (text) {

        }); //location to be compared with Destination field
           
        let bindisplayed = element(by.css('.badge-info')).getText().then(function (text) {

        }); //bin to be compared with Destination field
        
        let expectedDescription = locationDisplayed + " "+bindisplayed;
        expectedDescription.getText().then(function(text){
            console.log(text);

        });

But then I got: expectedDescription.getText is not a function.

Anyone knows how can I concat 2 strings, and get the string of this concatenation?

Answer 1

Function getText() could be called on a DOM element (https://www.protractortest.org/#/api?view=webdriver.WebElement.prototype.getText), but you're using this function on a string. That won't work.

If you just want to concatenate expectedDescription and locationDisplayed, you've actually done that already on this line: let expectedDescription = locationDisplayed + " "+bindisplayed;

Another way might be to use str.concat() function (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/concat).

Answer 2

I think you forgot the fact that everything is a promise in protractor.

In your code, you are not waiting for the promise to be resolved.

There are two ways :

First: Using await

Add the below line in your config file:

 SELENIUM_PROMISE_MANAGER: false

Then rewrite the code as below:

    let locationDisplayed = await element(by.css('.badge-primary')).getText()

    let bindisplayed = await element(by.css('.badge-info')).getText()

    let expectedDescription = locationDisplayed + " "+bindisplayed;

    console.log(text);

Here, the await ensures that the promise is resolved before it goes to the next line else each line will act asynchronously.

Second: Chaining promise

element(by.css('.badge-primary')).getText().then(function (locationDisplayed ) {

    element(by.css('.badge-info')).getText().then(function (bindisplayed ) {
    console.log(locationDisplayed+bindisplayed);
   });      

  });

The second option works only if the script has enough time for the call back to resolve. Try using await browser.sleep(3000) at the end