How to print list of elements to console with prot

Question

I'm new to Stack Overflow. In my application I have to create a group and verify the group is created or not by searching the group in the list. If the group is in list, I have to open the chat box of that group. All this scenario should be automated using protractor. I'm new to protractor so could you please provide an explanation with the answer

1. Trying to loop through group names to check if created.
2. Tried simply printing group names in console, but still unsuccessful.

Attempt in protractor to print group text:

this.getElements = function(){
  element.all(by.css('some text')).getText().then(function(text){
      console.log(text);
  });
};

HTML Snippet:

<ul class="list-unstyled users-list components">
      <!----><q4s-spinner _nghost-c4=""><div _ngcontent-c4="" class="spinner" hidden=""></div>
</q4s-spinner>
      <!----><div class="user-profile-container">
        <!---->
        <!----><div class="row each-user">
          <div class="user-profile-picture">
            <!---->
            <!----><div>
              <!----><img class="img-fluid user-picture" src="http://13.126.104.174/static/6286/BMP.jpeg">
              <!---->
              
            </div>

            <!---->
          </div>
          <div class="user-profile-details">
            <div class="row">
              <p class="group-name-text">myGrpW</p>
              <!----><span>
                <!---->
              </span>
            </div>
            <!----><p class="group-details-text"></p>
            <!---->
            <p class="group-members-text">2 Members</p>
            <!----><span>
              <!----><p class="admin-text"> Admin </p>
              <!---->
            </span>
          </div>


          <!----><div class="more-action-image-position">
            <div>
              <img class="img-fluid more-icon" placement="left" src="assets/images/more-icon.svg">
              <!---->
            </div>
          </div>

          <!---->
        </div>
      </div><div class="user-profile-container">
        <!---->
        <!----><div class="row each-user">
          <div class="user-profile-picture">
            <!---->
            <!----><div>
              <!----><img class="img-fluid user-picture" src="http://13.126.104.174/static/6286/BMP.jpeg">
              <!---->
              
            </div>

            <!---->
          </div>
          <div class="user-profile-details">
            <div class="row">
              <p class="group-name-text">newWWW</p>
              <!----><span>
                <!---->
              </span>
            </div>
            <!----><p class="group-details-text"></p>
            <!---->
            <p class="group-members-text">3 Members</p>
            <!----><span>
              <!----><p class="admin-text"> Admin </p>
              <!---->
            </span>
          </div>


          <!----><div class="more-action-image-position">
            <div>
              <img class="img-fluid more-icon" placement="left" src="assets/images/more-icon.svg">
              <!---->
            </div>
          </div>

          <!---->
        </div>
      </div><div class="user-profile-container">
        <!---->
        <!----><div class="row each-user">
          <div class="user-profile-picture">
            <!---->
            <!----><div>
              <!----><img class="img-fluid user-picture" src="http://13.126.104.174/static/6286/BMP.jpeg">
              <!---->
              
            </div>

            <!---->
          </div>
          <div class="user-profile-details">
            <div class="row">
              <p class="group-name-text">AutoWa</p>
              <!----><span>
                <!---->
              </span>
            </div>
            <!----><p class="group-details-text"></p>
            <!---->
            <p class="group-members-text">3 Members</p>
            <!----><span>
              <!----><p class="admin-text"> Admin </p>
              <!---->
            </span>
          </div>


          <!----><div class="more-action-image-position">
            <div>
              <img class="img-fluid more-icon" placement="left" src="assets/images/more-icon.svg">
              <!---->
            </div>
          </div>

          <!---->
        </div>
      </div><div class="user-profile-container">
        <!---->
        <!----><div class="row each-user">
          <div class="user-profile-picture">
            <!---->
            <!----><div>
              <!----><img class="img-fluid user-picture" src="http://13.126.104.174/static/6286/BMP.jpeg">
              <!---->
              
            </div>

            <!---->
          </div>

Answer 1

var totalList_grps = element.all(by.css('p.group-name-text'));

    totalList_grps.getText().then(function(text){
        console.log('Total list of joined groups : ' + text);
      });   

Sorry there,s nothing problem in css, needed a small change, I tried the above code it works fine for me

Answer 2

If you are trying to check for text in an element, you need to use and expect.

expect(element.all(by.css('some-text').getText()).toContain('expected text');

You also need to make sure you are using the proper CSS Selectors. To get the group name from your example html, you could use p.group-name-text. The entire expect would look like:

expect(element.all(by.css('p.group-name-text').getText().toContain('MyGrpW');

If you are only tryng to print the text to the console your code would look like

element.all(by.css('p.group-name-text').getText()).then(function(text){
  console.log(text);
});